How to get input value in javascript

In front-end development, in order to process the data entered by the user, it is usually necessary to obtain the input value of the form element. JavaScript provides some methods to get input values, let’s take a look.

1. Get the input value of the text box

The text box is one of the most common form elements. When getting its input value, you can use the value attribute. We can get the text box element through the getElementById method, and then use the value attribute to get the entered value.

Sample code:

<input type="text" id="myText">
<script>
    var inputVal = document.getElementById("myText").value;
    console.log(inputVal);
</script>

In the above code, we first define a text box element, then use JavaScript to get its input value, and finally output the value to the console.

2. Get the input value of the multi-select box

The multi-select box is usually used to select one or more options. We can get its input value by looping through all the selections. We first need to get all the options of the multi-select box, then iterate through all options and get the status of the options through the checked attribute.

Sample code:

<input type="checkbox" class="checkbox" value="apple">
<input type="checkbox" class="checkbox" value="orange">
<input type="checkbox" class="checkbox" value="banana">
<script>
    var checkboxes = document.getElementsByClassName("checkbox");
    var checkedVal = [];
    for(var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
            checkedVal.push(checkboxes[i].value);
        }
    }
    console.log(checkedVal);
</script>

In the above code, we first define several multi-select box elements and obtain all the multi-select box elements through the getElementsByClassName method. Then, we obtain the status of each option by traversing and store the selected option value in an array.

3. Get the input value of the radio button box

Getting the input value of the radio button box is similar to the multi-select box. It also requires traversing the radio button box elements to obtain the option status. But the difference is that since the radio button can only select one option at a time, we can usually use the name attribute to group the radio button elements, which makes it easier to traverse all the options.

Sample code:

<input type="radio" name="fruit" value="apple">
<input type="radio" name="fruit" value="orange">
<input type="radio" name="fruit" value="banana">
<script>
    var radios = document.getElementsByName("fruit");
    var checkedVal = null;
    for(var i = 0; i < radios.length; i++){
        if(radios[i].checked){
            checkedVal = radios[i].value;
            break;
        }
    }
    console.log(checkedVal);
</script>

In the above code, we first define several radio button elements and group them by the name attribute. Then, we get the status of the current selection through traversal. If the option is selected, we store its value in the checkedVal variable.

Summary:

The above is the method of obtaining the input value of the form element. The methods of obtaining the text box, multi-select box and radio button are different, but they are all by traversing the elements and then passing A specific attribute to get the input value. Regardless of the method, getting the input value of the form element is a necessary step in processing user input data.

The above is the detailed content of How to get input value in javascript. For more information, please follow other related articles on the PHP Chinese website!