jQuery val() Method

The jQuery val() method is used to interact with form input elements, such as text fields, radio buttons, checkboxes, and dropdowns. It allows you to retrieve and set the values of these input elements. Here are examples illustrating the usage of the val() method:

Getting Input Value

Consider an HTML form with an input field:

<input type="text" id="myInput" value="Initial Value">

To retrieve the value of the input field using jQuery:

var inputValue = $("#myInput").val(); console.log(inputValue); // Output: "Initial Value"

Setting Input Value

You can also use the val() method to set the value of an input element:

$("#myInput").val("New Value");

After executing this code, the value of the input field will change to "New Value."

Workign Examples:

Get the Values of Text Fields with val() method

var content = $("#getVal").val(); alert(content);
<input id="getVal" type = "text" value = "Textbox 1 Value"/>

Set the Values of Text Fields with val() method

$("#btnSet").click(function(){ $("#setVal").val("New Text added here..."); });
<input id="setVal" type = "text" value = "Textbox 2 Value"/>
run this source code Browser View


Full Source
<html> <head> <title>jQuery val() method example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnGet").click(function(){ var content = $("#getVal").val(); alert(content); }); $("#btnSet").click(function(){ $("#setVal").val("New Text added here..."); }); }); </script> </head> <body> <button id="btnGet">Get Val</button> <button id="btnSet">Set Val</button></br> <input id="getVal" type = "text" value = "Textbox 1 Value"/><br/> <input id="setVal" type = "text" value = "Textbox 2 Value"/> </body> </html>

Working with Dropdowns

For dropdowns, the val() method retrieves or sets the value of the selected option:

<select id="mySelect"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> var selectedValue = $("#mySelect").val(); // Gets the value of the selected option $("#mySelect").val("2"); // Sets the value of the dropdown to "Option 2"

In this example, the dropdown will be updated to display "Option 2" as the selected value.

When do I use .val() vs .html?

Use the .val() method when you want to interact specifically with form input elements, such as text fields, checkboxes, radio buttons, and dropdowns. It allows you to get or set the values of these input elements, which is especially handy for handling user input and form submissions. On the other hand, you use the .html() method when you need to manipulate the HTML content within elements, including tags and nested elements. It's suitable for scenarios where you want to dynamically change or update the entire HTML structure of an element, such as working with paragraphs, headings, and divs.

Conclusion

The val() method is particularly useful when working with form elements and collecting or setting user input data. It simplifies the process of extracting values from input elements or populating them with predefined values.






Related Topics
  1. jQuery DOM Traversing
  2. jQuery text() Method
  3. jQuery HTML Method
  4. jQuery attr() Method
  1. jQuery Get and Set CSS Properties
  2. jquery append() and prepend() methods
  3. jQuery before() and after() methods
  4. jQuery :prepend(), append(), before() , after()
  5. jQuery remove() and empty() methods