jQuery Val method - .val() [Detail Guide]

↤ Previous Next ↦

Understanding of jQuery Val() method with an example: In the previous article, we learn in detail about the jQuery selector, and how to use it. Now here we see actual working with jquery by getting and setting the form fields. 

The jQuery Val() method is a very important method and we frequently use this method when we work with forms elements such as (textbox, textarea, dropdown list, checkbox etc). 

Now by answering the below question that comes into our minds, helps us to understand the jQuery val() method in detail.

  1. What is jQuery val() method?
  2. What is the use of  Val() method in jQuery? 

What is jQuery Val() Method?

The jQuery Val() method is the build-in jQuery method.

In jQuery the .val() method returns the value of selected element ( i.e textbox, select option, textarea).

The .val() method is also used to set the value of these selected elements (Forms fields).

What is the use of the Val() method in jQuery

In jQuery, the val() method is used to get the value of the form element. It is also used to set the value of the form element. To understand it more will see all possible scenarios of using the jquery val() method with examples as mention below.

  1. jQuery Get value of Textbox.
  2. jQuery Set value of the Textbox.
  3. jQuery Get Dropdown selected value (select option).
  4. jQuery Set Dropdown selected value (select option).
  5. jQuery Get Radio button value.
  6. jQuery Get Checkbox Checked value.

Syntax of jQuery val() method:

For Getting value: 

$("selector-element").val(); // this gives us the value of selected element.

For Setting value:

$("selector-element").val("Hello World"); // this set the value as Hello World

Let's check each example one by one.

Eg 1: jQuery get the value of input textbox by Id

In this example, we first add input textbox and gives id as myTextbox. On button click, we alert the textbox value.

<input id="myTextbox" type="text" value="Welcome to codepedia" />
<button id="btn1" class="btn btn-success">Get Textbox Value</button>
<script>
$("document").ready(function(){
  $("#btn1").on('click',function(){
    var getvalue=$("#myTextbox").val();// using jquery .val() method we get the textbox value.
    alert(getvalue);
  });  
});
</script>

Output

Explanation: Here in jquery to get textbox value, we used val() method and on button click, we select textbox by id and alert its value. 

Eg 2: jQuery Set the value of Textbox using .val() method

Here in this example, we add a button tag, and on button click, will set textbox value. Our jQuery code to set textbox value by id on button click.

<input id="myTextbox2" type="text" />
<button id="btn2" class="btn btn-success">Click to Set Textbox Value</button>
<script>
$("document").ready(function(){
  $("#btn2").on('click',function(){
     $("#myTextbox2").val("Hello World");// using jquery .val() method we set the textbox value.
   });  
});
</script>

Output


Note: You can also check How to set textbox value based on dropdown list selection in jQuery.

Eg 3: jQuery Get Dropdown list selected value using .val() method

Here in this example first we add a select option with some option list. Then on the button click will get the selected dropdown value.

<select id="ddlModel">
 <option value="">--Select--</option>
 <option value="Iphone">Iphone</option>
 <option value="Samsung">Samsung</option>
 <option value="Sony">Sony</option>
 <option value="Vivo">Vivo</option>
</select>
<button id="btn3" class="btn btn-success">Get Dropdown Selected value</button>

<script>
$(document).ready(function(){
  $("#btn3").on('click',function(){
    var GetDropdownValue=$("#ddlModel").val(); // this dropdown list value
    alert(GetDropdownValue); // alert msg
  });
});
</script>

Output

Here in the above code using the jQuery .val() method we get the dropdown list selected value successfully.

Eg 4: jQuery Set Dropdown selected value using .val() method

Here in example 4, we have a dropdown list with some option lists.  And on button click, with jQuery .val() method we set dropdown selected value as value sony.

Our final code is written below:

<select id="ddlModelSet">
 <option value="">--Select--</option>
 <option value="Iphone">Iphone</option>
 <option value="Samsung">Samsung</option>
 <option value="Sony">Sony</option>
 <option value="Vivo">Vivo</option>
</select>
<button id="btn4" class="btn btn-success">Set Dropdown Selected value</button>

<script>
$(document).ready(function(){
  $("#btn4").on('click',function(){
     $("#ddlModelSet").val("Sony"); // set dropdown list value as sony
  });
});
</script>

Output

Eg 5: jQuery Get Radio button checked value using .val() method

Here we have a radio button, and on button click, we alert select radio button value, using the jquery .val() method

<label><input type="radio" value="apple" name="fruit"> Apple</label>
<label><input type="radio" value="mango" name="fruit"> Mango</label>
<label><input type="radio" value="orange" name="fruit"> Orange</label>
<label><input type="radio" value="grapes" name="fruit"> Grapes</label>
<hr>
<button id="btn5" class="btn btn-success">Get Selected Radio Button Value</button>

<script>
$(document).ready(function(){
 $("#btn5").click(function(){           
    var GetRadioButtonValue=$("input[name='fruit']:checked").val();
    alert(GetRadioButtonValue);
 });
});
</script>

Output

Eg 6: jQuery Get Checkbox checked value using .val() method

Here we have checkboxes with name as electronics and button tags. On the button click, will get the value of selected checkboxes using the jQuery .val() method, and alert its values. 

Our jquery code is written below:

 <form>
   <label><input type="checkbox" value="laptop" name="electonics"> Laptop</label>
   <label><input type="checkbox" value="desktop" name="electonics"> Desktop</label>
   <label><input type="checkbox" value="printer" name="electonics"> Printer</label>
   <label><input type="checkbox" value="monitor" name="electonics"> Monitor</label>
   <label><input type="checkbox" value="harddisk" name="electonics"> Hard Disk</label> 
   <br/>
   <button id="btn6" type="button" class="btn btn-success">Get Checkbox Value</button>
   <button id="btn7" type="button" class="btn btn-success">Get All Checkbox Value</button>
</form>
<script>
   $(document).ready(function(){
    $("#btn6").click(function(){           
       var GetCheckBoxValue=$("input[name='electonics']:checked").val();
       alert(GetCheckBoxValue);
    });
   
    $("#btn7").click(function(){           
       var GetAllCheckBoxValue=$("input[name='electonics']:checked").serialize();
       alert(GetAllCheckBoxValue);
    });
   
   });
</script>

Output



Note: You can also check How to check if checkbox is checked or not in jQuery?

I hope now, you have a better understanding of the usage of the jQuery .val() method with these 6 examples. And how to get the form fields values using the .val() method. In the next chapter, will learn how to get the HTML content in jQuery.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

↤ Previous Next ↦
👳 Want to thank me? Buy Me a Coffee
↥