jQuery output all input values in a form

This concise jQuery code snippet demonstrates how to get the values ​​of all input elements in the form with a specified ID. You can get both the attribute name and the value.

console.log("----------------------------------");
$('#form-id > input,#form-id > textarea').each(function(index) {
    console.log($(this).attr('name') + " = " + $(this).val());
});
console.log("----------------------------------");

Note: The console.log() command is only applicable to browser debugging tools such as Firebug.

jQuery Get form input value FAQ

How to use jQuery to get the value of a text input box?

Use jQuery's .val() method to get the value of the text input box. This method returns the value of the selected element. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});

After clicking the button, the value of the input element with ID "test" will pop up.

How to set the value of a text input box using jQuery?

Same use the .val() method to set the value of the text input box. This method is used to set the values ​​of all matching elements. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    $("#test").val("Hello World");
  });
});

After clicking the button, the value of the input element with ID "test" will be set to "Hello World".

How to use jQuery to get all input values ​​in a specific form?

Use the .serialize() method to get all input values ​​in a specific form. This method creates a URL-encoded text string containing the value of the form. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    alert($("form").serialize());
  });
});

After clicking the button, the values ​​of all elements in the form will be popped up, rendered as a URL-encoded text string.

How to use jQuery to output input values ​​to the console?

Combining the .val() method and the console.log() method can output the input value to the console. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    console.log($("#test").val());
  });
});

After clicking the button, the value of the input element with ID "test" will be recorded to the console.

How to use jQuery to get the selected value in the drop-down list?

Use the .val() method to get the selected value in the drop-down list. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    alert($("#mySelect").val());
  });
});

After clicking the button, the selected value in the drop-down list with ID "mySelect" will pop up.

How to use jQuery to set the selected value in the drop-down list?

Also use the .val() method to set the value selected in the drop-down list. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    $("#mySelect").val("Option2");
  });
});

After clicking the button, the selected value in the drop-down list with ID "mySelect" will be set to "Option2".

How to use jQuery to get the value of a checkbox?

Use the .prop() method and .val() method to get the value of the check box. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    if($("#myCheck").prop("checked")){
      alert($("#myCheck").val());
    }
  });
});

After clicking the button, if the check box with ID "myCheck" is selected, its value will pop up.

How to set the value of a checkbox using jQuery?

Use the .prop() method to set the value of the check box. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    $("#myCheck").prop("checked", true);
  });
});

After clicking the button, the check box with ID "myCheck" will be selected.

How to use jQuery to get the value of a radio button?

Use the :checkedSelector and .val() methods to get the value of the radio button. Examples are as follows:

console.log("----------------------------------");
$('#form-id > input,#form-id > textarea').each(function(index) {
    console.log($(this).attr('name') + " = " + $(this).val());
});
console.log("----------------------------------");

After clicking the button, the value of the selected radio button named "myRadio" will pop up.

How to set the value of a radio button using jQuery?

Use the .prop() method to set the value of the radio button. Examples are as follows:

$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});

After clicking the button, a radio button named "myRadio" will be selected. (Note: This selects the first matching radio button, and if a specific value needs to be selected, a more accurate selector is required.)

The above is the detailed content of jQuery output all input values in a form. For more information, please follow other related articles on the PHP Chinese website!