jQuery Get and Set Input Value By Name, Id

jQuery Get and Set Input Value By Name, Id

jQuery set and get input box value; In this tutorial, you will learn how to set & get input box value by id, name and class using jQuery val () method.

This tutorial will take some examples using the val () method such as you can get selected box value using on jquery change. After get the value of selected box you can easily set the value of any input of text box using jquery val().

How to Get and Set Input Value By Name, Id in jQuery

There are uses of the jQuery val() method.

  • The jQuery val() method is used to get the value of the first element in the set of matching elements.
  • This is also used to set the value of each matching element.

Syntax jQuery val() Method

$(selector).val()  

It can use to get value.

$(selector).val(content)  

It can use to set value.

$(selector).val(function (index, currentcontent))  

This can use to set value using function.

Parameters of jQuery val() Method

ParameterDescription
ValueThis is a mandatory parameter. This is used specify the value of the attribute.
Function (index, currentvalue)This is an optional parameter. This is used to specify a function that returns the value to set.

Example1 – jQuery Set Input Value By Id

This val() method is work for to set a string of text, a number, an array of strings corresponding to the value of each matched element. It method lets you set the value by passing in the val() function.

<!DOCTYPE html>  
<html>  
<title>Learn Jquery val Method</title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#btn_click").click(function(){  
        $("#first").val("Hello there, this is example");  
    });  
});  
</script>  
</head>  
<body>  
<input type="text" id="first"> 
<br><br>  
<button id="btn_click">Click here to change the content</button>
</body>  
</html>  

Output

Learn Jquery value Method

Example2 – jQuery Get Input Value By Id

The val () method is mainly used to obtain the values ​​of form elements. In the below example, When we select a give select value then get the value of selected box and put the value of input box

<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head>  
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script> 
$(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
});  
</script>    
</head>  
<body>  
<select id="select">
    <option value="">Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>  

Output

Learn Jquery value Method

Recommended jQuery Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *