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
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
- Set hidden field value by Id in jQuery
- 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 alert(getValue);
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.
#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 alert(getValue);
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.
You can also check these articles:
- Preview Image before uploads it with jQuery in Asp.net.
- How to get the filename, size, type count in jQuery [input file, File Api].
- Create a dynamic HTML table using jquery.
- How to remove table row tr in jquery on button click.
- 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