在本教程中，我们将学习使用jQuery处理表单。

提交表单

为了处理表单提交事件，我们使用on()方法，并传递" submit"和事件处理函数。

在下面的示例中，我们有一个ID为" sample-form"的表单，我们将处理表单提交事件。

$("#sample-form").on("submit", function(){

  //some code goes here...

});

表单重置

为了处理表单重置事件，我们使用on()方法并传递" reset"和事件处理函数。

在下面的示例中，我们有一个ID为" sample-form"的表单，我们将处理表单重置事件。

$("#sample-form").on("reset", function(){

  //some code goes here...

});

文本输入框字段

为了获得输入文本字段的值，我们使用了val()方法。

在下面的示例中，我们有一个输入文本字段，其ID为" sample-input-text1"。
我们正在获得其价值，并将其打印在浏览器控制台中。

var text = $("#sample-input-text1").val();
console.log( text );

要设置输入文本字段的值，我们将所需的值传递给val()方法。

在以下示例中，我们将ID为" sample-input-text1"的输入文本字段的值设置为" Hello World"。

$("#sample-input-text1").val("Hello World");

输入电子邮件字段

要获取输入电子邮件字段的值，我们使用val()方法。

在以下示例中，我们有一个输入电子邮件字段，其ID为" sample-input-email1"。
我们正在获得其价值，并将其打印在浏览器控制台中。

var email = $("#sample-input-email1").val();
console.log( email );

要设置输入电子邮件字段的值，我们将所需的值传递给val()方法。

在以下示例中，我们将ID为" sample-input-email1"的输入电子邮件字段的值设置为" [email protected]"。

$("#sample-input-email1").val("[email protected]");

输入密码字段

为了获得输入密码字段的值，我们使用了val()方法。

在以下示例中，我们有一个输入密码字段，其ID为" sample-input-password1"。
我们正在获得其价值，并将其打印在浏览器控制台中。

var password = $("#sample-input-password1").val();
console.log( password );

要设置输入密码字段的值，我们将所需的值传递给val()方法。

在以下示例中，我们将ID为" sample-input-password1"的输入密码字段的值设置为" root123"。

$("#sample-input-password1").val("root123");

选择选项

我们使用val()方法来获取所选选项的值。

在下面的示例中，我们有一个id为" sample-select1"的select元素，并且正在获取selected选项的值。

$("#sample-select1").val();

我们也可以使用val()方法选择一个选项。

在下面的示例中，我们将选择选项的值设置为"第二个选项"。

$("#sample-select1").val("2nd option");

文字区

我们使用val()方法来获取textarea元素的值。

在下面的示例中，我们有一个id为" sample-textarea1"的textarea，并使用val()方法获取其值。

var textarea = $("#sample-textarea1").val();
console.log( textarea );

要设置textarea的值，我们使用val()方法并传递要设置的值。

在下面的示例中，我们将id为" sample-textarea1"的textarea的值设置为" Hello World"。

$("#sample-textarea1").val("Hello World");

选框

为了获得选中复选框的值，我们使用each()方法进行循环，然后获取该值。

在下面的示例中，我们有一些复选框具有" name =" sample-checkbox1""。
我们将准备一个包含所选复选框值的数组。

var checkbox = [];
$('input[name="sample-checkbox1"]:checked').each(function(){
  checkbox.push(this.value);
});
console.log("Checkbox: " + checkbox);

为了检查是否选中了ID为" sample-checkbox"的给定复选框，我们使用以下代码。

if ($("#sample-checkbox").is(":checked")) {
  console.log("Checked!");
}
else {
  console.log("Not checked!");
}

要取消选中所有复选框，我们使用以下代码。

$('input[name="sample-checkbox1"]').prop({
  "checked": false
});

单选按钮

我们使用val()方法来获取所选单选按钮的值。

在下面的示例中，我们有一些具有name =" sample-radio1"的单选按钮。

var radio = $('input[name="sample-radio1"]:checked').val();
console.log("Radio: " + radio);

要取消选中所有广播，我们使用以下代码。

$('input[name="sample-radio1"]').prop({
  "checked": false
});

示例

HTML

<form id="sample-form">
  
  <input type="text" id="sample-input-text1" placeholder="Full Name">
  <input type="email" id="sample-input-email1" placeholder="Email">
  <input type="password" id="sample-input-password1" placeholder="Password">
  
  <select id="sample-select1">
    <option value="-">--- Select ---</option>
    <option value="1st option">1st option</option>
    <option value="2nd option">2nd option</option>
  </select>
  
  <textarea id="sample-textarea1" placeholder="Short description"></textarea>
  
  <br>
  <input type="checkbox" name="sample-checkbox1" value="Apple">Apple
  <input type="checkbox" name="sample-checkbox1" value="Orange">Orange
  <br>
  
  <input type="checkbox" id="sample-checkbox" value="Awesome">Awesome
  
  <br>
  <input type="radio" name="sample-radio1" value="Apple">Apple
  <input type="radio" name="sample-radio1" value="Orange">Orange
  <br>
  
  
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

CSS

input[type=text],
input[type=email],
input[type=password]{
  margin: 20px;
  display: block;
  padding: 5px;
  font-size: 16px;
}

select {
  margin: 20px;
  display: block;
}

textarea {
  margin: 20px;
  display: block;
}

jQuery

$("#sample-form").on("submit", function(){
  
  var text = $("#sample-input-text1").val();
  console.log("Fullname: " + text);
  $("#sample-input-text1").val("Hello");

  var email = $("#sample-input-email1").val();
  console.log("Email: " + email);
  $("#sample-input-email1").val("[email protected]");
  
  var password = $("#sample-input-password1").val();
  console.log("Password: " + password);
  $("#sample-input-password1").val("Hello");
  
  var select = $("#sample-select1").val();
  console.log("Select: " + select);
  $("#sample-select1").val("2nd option");
  
  var textarea = $("#sample-textarea1").val();
  console.log("Textarea: " + textarea);
  $("#sample-textarea1").val("My textarea.");
  
  var checkbox = [];
  $('input[name="sample-checkbox1"]:checked').each(function() {
    checkbox.push(this.value);
  });
  console.log("Checkbox: " + checkbox);
  $('input[name="sample-checkbox1"]').prop({
    "checked": false
  });

  if ($("#sample-checkbox").is(":checked")) {
    console.log("Checked!");
  }
  else {
    console.log("Not checked!");
  }
  
  var radio = $('input[name="sample-radio1"]:checked').val();
  console.log("Radio: " + radio);
  $('input[name="sample-radio1"]').prop({
    "checked": false
  });
  
  return false;

});

$("#sample-form").on("reset", function(){
  
  alert("Reset!");
  
});