With the continuous advancement of Web technology, the development of dynamic Web websites has attracted more and more attention. JavaScript, as a client-side scripting language, provides good interaction and response capabilities for Web applications. Among them, submitting a form is one of the most basic functions of JavaScript.
This article will explain to you how to use JavaScript to submit a form, mainly from the following aspects:
1. The basic structure and attributes of the form
2. Using JavaScript Obtain form data
3. Modify form data and submit the form
4. Preprocessing and verification of form data
1. Basic structure and attributes of the form
First, we need to understand the basic structure and attributes of the form. The basic structure of the form is as follows:
<form action="xxx" method="xxx" enctype="xxx"> 表单控件 <input type="xxx" name="xxx"> ... </form>
Among them, the action
attribute indicates the URL address of the form submission, and the method
attribute indicates the request method. Generally, GET## is used. # or
POST, the
enctype attribute indicates how to encode the form data. As for form controls, we can divide them into two categories: form elements and form fields.
,
<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 and
querySelectorAll methods can also obtain elements and element collections:
var inputObj = document.querySelector('[name="input_name"]'); var selectObj = document.querySelector('[name="select_name"]'); var textareaObj = document.querySelector('[name="textarea_name"]');
inputObj.value = "new_value"; textareaObj.value = textareaObj.value.toUpperCase(); selectObj.options[1].selected = true;
submit() method:
formObj.submit();
onsubmit event:
formObj.onsubmit = function () { // 验证表单数据是否合法 ... // 如果验证失败,则返回false取消表单提交 if (!isValid) { return false; } // 验证成功,提交表单 return true; }
// 对数据进行预处理 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; }
The above is the detailed content of Explain how to submit a form using javascript. For more information, please follow other related articles on the PHP Chinese website!