jQuery: How to set input hidden field value by Id, and by name


jQuery Set or Change Input Hidden Field Value: Here in this tutorial will learn how we can set the value to the input hidden field.  With the jQuery library, we can manipulate HTML DOM  as well as event handling, and animate easily. In jQuery to set a hidden field value, we use.val() method. 

The jQuery .val() method is used to get or set the values of form elements such as input, select, textarea. You can also check our previous article on how to get the value of the hidden field in jQuery.

2 ways set Hidden Field Value in jQuery

  1. Set hidden field value by Id in jQuery
  2. Set hidden field value by name in jQuery

Add HTML Markup

Here 1st we add a textbox, where the user enters any value, and then we set this textbox value to our input hidden field.

<input id="txtName" value="" type="text"/>
<input id="myInputHidden" name="myInputName" type="hidden" value="Codepedia" />

Here we added one textbox and one hidden field.

#1 jQuery Code to set hidden field value by ID

var getTxtValue = $("#txtName").val(); // this gives textbox value   
$("#myInputHidden").val(getTxtValue); // this will set hidden field value

Above jQuery code will take textbox value into the variable getTxtValue  and using .val() set its value to our hidden field. By this we able to update hidden field value dynamically whatever value we entered into the textbox.

View Demo

#2 jQuery Code to set hidden field value by name

var getTxtValue = $("#txtName").val(); // this gives textbox value   
$("input[name=myInputName]").val(getTxtValue); // this will set hidden field value

View Demo

Conclusion: Using jQuery .val() method we are able to add or modify the value of the input hidden field by its ID and by its name in jQuery. Here in the demo example on button click, we assign value what we entered in our textbox. i.e we add our textbox value to the hidden field.

Other Reference

You can also check these articles:

  1. Preview Image before uploads it with jQuery in Asp.net.
  2. How to get the filename, size, type count in jQuery [input file, File Api].
  3. Create a dynamic HTML table using jquery.
  4. How to remove table row tr in jquery on button click.
  5. Jquery: How to disable Button, Div, Anchor tag.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

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

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

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