Web テクノロジーの継続的な進歩に伴い、動的な Web Web サイトの開発はますます注目を集めており、JavaScript はクライアント側のスクリプト言語として、Web アプリケーションに優れた対話機能と応答機能を提供します。その中でも、フォームの送信は JavaScript の最も基本的な機能の 1 つです。
この記事では、JavaScript を使用してフォームを送信する方法を主に次の側面から説明します:
1. フォームの基本構造と属性
2 . JavaScriptの使用 フォームデータの取得
3. フォームデータの変更とフォーム送信
4. フォームデータの前処理と検証
1. フォームの基本構造と属性
まず、フォームの基本構造と属性を理解する必要があります。フォームの基本構造は次のとおりです。
<form action="xxx" method="xxx" enctype="xxx"> 表单控件 <input type="xxx" name="xxx"> ... </form>
このうち、action
属性はフォーム送信先の URL アドレスを示し、method
属性はフォーム送信の URL アドレスを示します。リクエスト メソッド。通常、GET## が使用されます。# または
POST、
enctype 属性は、フォーム データのエンコード方法を示します。フォーム コントロールに関しては、フォーム要素とフォーム フィールドの 2 つのカテゴリに分類できます。
、
<fieldset> <legend>表单域名称</legend> ... 表单控件 <input type="xxx" name="xxx"> ... </fieldset>
// 获取表单对象 var formObj = document.forms[0]; // 或者 document.forms["form_name"]; // 获取表单控件值 var inputObj = formObj.elements["input_name"]; var inputValue = inputObj.value; // 获取选择框选中的值 var selectObj = formObj.elements["select_name"]; var selectValue = selectObj.options[selectObj.selectedIndex].value; // 获取多行文本框的值 var textareaObj = formObj.elements["textarea_name"]; var textareaValue = textareaObj.value;
querySelector メソッドと
querySelectorAll メソッドでも要素と要素コレクションを取得できます。 ##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>var inputObj = document.querySelector('[name="input_name"]');
var selectObj = document.querySelector('[name="select_name"]');
var textareaObj = document.querySelector('[name="textarea_name"]');</pre><div class="contentsignin">ログイン後にコピー</div></div>
3. フォーム データを変更してフォームを送信します
inputObj.value = "new_value"; textareaObj.value = textareaObj.value.toUpperCase(); selectObj.options[1].selected = true;
submit()
メソッドを使用する必要があります:formObj.submit();
フォームを送信する前に確認または検証する必要がある場合は、
onsubmit メソッドを使用できます。イベント: formObj.onsubmit = function () { // 验证表单数据是否合法 ... // 如果验证失败,则返回false取消表单提交 if (!isValid) { return false; } // 验证成功,提交表单 return true; }
4. フォーム データの前処理と検証
フォーム送信前のデータの前処理と検証には、次の手法を使用できます: // 对数据进行预处理 function preProcessData(formData) { formData.username = formData.username.toUpperCase(); formData.password = formData.password.toLowerCase(); ... } // 对数据进行验证 function validateFormData(formData) { if (!formData.username) { alert("请填写用户名!"); return false; } if (!formData.password) { alert("请填写密码!"); return false; } ... return true; } // 表单提交事件 formObj.onsubmit = function () { // 获取表单数据 var formData = { username: inputUsername.value, password: inputPassword.value, ... }; // 预处理表单数据 preProcessData(formData); // 验证表单数据是否合法 if (!validateFormData(formData)) { return false; } // 提交表单 formObj.submit(); return true; }
以上がJavaScriptを使用してフォームを送信する方法を説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。