How to use ajax to operate a form with JavaScript

This time I will bring you JavaScriptHow to use ajax to operate the form, what are the precautions for using ajax to operate the form with JavaScript, the following is a practical case, let's take a look.

Using JavaScript to operate forms is similar to operating DOM, because the form itself is also a DOM tree.

However, the input box, drop-down box, etc. of the form can receive user input, so using JavaScript to operate the form can obtain the content entered by the user, or set new content for an input box.

The input controls of HTML form mainly include the following types:

• Text box , the corresponding is used to enter text;

• Password box, the corresponding is used to Enter the password;

• The radio button, corresponding , is used to select one item;

• Check box, corresponding , used to select multiple items;

• Drop-down box, corresponding < ;select>, used to select an item;

• Hidden text, corresponding , is not visible to the user, but will be hidden when the form is submitted Text is sent to the server.

##Get the value

If we get a reference to an node, we can call value directly Get the corresponding user input value:

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'

This method can be applied to text, password, hidden and select. However, for radio buttons and check boxes, the value attribute always returns the preset value of HTML, and what we need to get is actually whether the user has "checked" the option, so we should use checked to judge:

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

Set the value

Setting the value is similar to getting the value. For text, password, hidden and select, just set the value directly:

// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新

For radio buttons and check boxes, just set checked to true or false.

HTML5 controls

HTML5 has added a large number of standard controls, commonly used ones include date, datetime, datetime-local, color, etc., they all Use the tag:

<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">

Browsers that do not support HTML5 cannot recognize the new controls and will display them as type="text". Browsers that support HTML5 will get the formatted string. For example, the value of an input of type="date" is guaranteed to be a valid date in YYYY-MM-DD format, or an empty string.

Submit the form

Finally, JavaScript can handle form submission in two ways (the AJAX method will be introduced later).

Method one is to submit a form through the submit() method of the

element. For example, in response to a click event, submit the form in the JavaScript code:

<!-- HTML -->
<form id="test-form">
  <input type="text" name="test">
  <button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
  var form = document.getElementById('test-form');
  // 可以在此修改form的input...
  // 提交form:
  form.submit();
}
</script>

The disadvantage of this method is that it disrupts the browser's normal submission of the form. By default, the browser submits the form when clicking , or the user presses the Enter key in the last input box. Therefore, the second way is to respond to the onsubmit event of itself and make modifications when submitting the form:

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
  <input type="text" name="test">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var form = document.getElementById('test-form');
  // 可以在此修改form的input...
  // 继续下一步:
  return true;
}
</script>

Note that you must return true to tell the browser to continue submitting. If you return false, the browser will not The form will continue to be submitted. This situation usually corresponds to the user input error, prompting the user

error message and then terminating the submission of the form.

When checking and modifying , make full use of to pass data.

For example, many login forms expect users to enter their username and password. However, for security reasons, the plaintext password is not transmitted when submitting the form, but the MD5 of the password. Ordinary JavaScript developers will directly modify :

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
  <input type="text" id="username" name="username">
  <input type="password" id="password" name="password">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var pwd = document.getElementById('password');
  // 把用户输入的明文变为MD5:
  pwd.value = toMD5(pwd.value);
  // 继续下一步:
  return true;
}
</script>

This approach seems fine, but when the user enters the password and submits it, the display of the password box will suddenly change from a few * to 32 * (Because MD5 has 32 characters).

要想不改变用户的输入，可以利用实现：

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
  <input type="text" id="username" name="username">
  <input type="password" id="input-password">
  <input type="hidden" id="md5-password" name="password">
  <button type="submit">Submit</button>
</form>
<script>
function checkForm() {
  var input_pwd = document.getElementById('input-password');
  var md5_pwd = document.getElementById('md5-password');
  // 把用户输入的明文变为MD5:
  md5_pwd.value = toMD5(input_pwd.value);
  // 继续下一步:
  return true;
}
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

用history让ajax支持前进/后退/刷新

原生ajax与封装的ajax使用方法（附代码）

The above is the detailed content of How to use ajax to operate a form with JavaScript. For more information, please follow other related articles on the PHP Chinese website!