jQuery - Form

In this tutorial we will learn to handle form using jQuery.

Form submit

To handle the form submit event we use the on() method and pass "submit" and an event handler function.

In the following example we have a form having id "sample-form" and we are going to handle the form submit event.

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

  // some code goes here...

});

Form reset

To handle the form reset event we use the on() method and pass "reset" and an event handler function.

In the following example we have a form having id "sample-form" and we are going to handle the form reset event.

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

  // some code goes here...

});

Input text field

To get the value of an input text field we use the val() method.

In the following example we have an input text field having id "sample-input-text1". We are getting its value and printing it in the browser console.

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

To set the value of an input text field we pass the required value to the val() method.

In the following example we are setting the value of the input text field having id "sample-input-text1" to "Hello World".

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

Input email field

To get the value of an input email field we use the val() method.

In the following example we have an input email field having id "sample-input-email1". We are getting its value and printing it in the browser console.

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

To set the value of an input email field we pass the required value to the val() method.

In the following example we are setting the value of the input email field having id "sample-input-email1" to "sample@example.com".

$("#sample-input-email1").val("sample@example.com");

Input password field

To get the value of an input password field we use the val() method.

In the following example we have an input password field having id "sample-input-password1". We are getting its value and printing it in the browser console.

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

To set the value of an input password field we pass the required value to the val() method.

In the following example we are setting the value of the input password field having id "sample-input-password1" to "root123".

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

Select option

We use the val() method to get the value of the selected option.

In the following example we have a select element having id "sample-select1" and we are getting the value of the selected option.

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

We can also use the val() method to select one of the options.

In the following example we are setting the value of the select option to "2nd option".

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

Textarea

We use the val() method to get the value of the textarea element.

In the following example we have a textarea having id "sample-textarea1" and we are getting its value using the val() method.

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

To set the value of a textarea we use the val() method and pass the value that we want to set.

In the following example we are setting the value of the textarea having id "sample-textarea1" to "Hello World".

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

Checkbox

To get the value of the selected checkboxes we use the each() method to loop and then get the value.

In the following example we have some checkboxes having name="sample-checkbox1". We are going to prepare an array containing the value of the selected checkboxes.

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

To check if a given checkbox having id "sample-checkbox" is checked we use the following code.

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

To uncheck all the checkbox we use the following code.

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

Radio

We use the val() method to get the value of the selected radio button.

In the following example we have some radio button having name="sample-radio1".

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

To uncheck all the radio we use the following code.

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

Sample

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@example.com");
  
  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!");
  
});