jquery sets value to form

If you are developing a website or application, you may want to insert some default values ​​into the form. This might be because you want the user to see some sample input before completing the form, or because you want to reuse previous input.

Whatever your reason is, it's easy to set values ​​for your forms using jQuery. In this article, we will show you how to set form values ​​using jQuery and provide you with some practical examples.

1. Get the form element

Before you start setting the value of the form, first you need to get the form element whose value you want to set. You can use jQuery selectors to get them. For example, if you want to set the value of a form input, you can get it by selecting the ID attribute of the form element:

var input = $('#my-input');

Alternatively, you can select all form elements:

var allInputs = $('input');

2. Set the value of the form

Once you obtain the form element that needs to be set, you can use the .val() method to insert a value into the form element. For example, if you want to set the default value for an input box to "Hello World", you can use the following code:

$(document).ready(function(){
    $('#my-input').val('Hello World');
});

In this example, we use the document.ready() function to ensure that the page Run the code after loading is complete. We then selected the ID of the form input element and set a default value to it using the .val() method.

3. Set the value of text boxes, drop-down boxes and radio buttons

You can use the .val() method to set values ​​for most types of forms, including text boxes , drop-down boxes and radio button boxes. The following is some example code:

$(document).ready(function(){
    // 设置文本框的值
    $('#my-textbox').val('Some default text');
    
    // 设置下拉框的值
    $('#my-dropdown').val('Option 2');
    
    // 设置单选框的值
    $('input[name=my-radio]').filter('[value=2]').prop('checked', true);
});

In this example, we selected the elements with the ID #my-textbox, the ID #my-dropdown and the name my-radio respectively, and set the default settings for them. value.

Note that when setting the value of a radio button, we need to use the .filter() function to select the specified option and the .prop() method to select it.

4. Set the value of the multi-select box

Unlike the radio button, setting the default value for the multi-select box is a little more troublesome because the value must be set to an array . The following is an example of setting a default value for a multi-select box:

$(document).ready(function(){
    // 设置多选框的值
    var myValues = ['2', '3'];
    $('#my-checkbox').val(myValues);
});

In this example, we create an array containing the values ​​to be selected and then pass it to the multi-select box using the .val() method element.

5. Summary

In this article, we showed you how to set the default value of a form using jQuery. Whether you are setting a text box, drop-down box, radio button, or multi-select box, you can easily set a default value using the .val() method.

This mechanism can provide users with a better user experience and provide easier reusability for your applications. Using these tips, you can quickly set default form values ​​to make it easier for your users to input and interact.

The above is the detailed content of jquery sets value to form. For more information, please follow other related articles on the PHP Chinese website!