Combine all TextBox values to a Hidden field using jQuery

One of my colleague asked me "He wants to add all the textbox value present on the page in a hidden field using jQuery and that hidden field value will be submitted to form using Ajax". He was knowing how to submit the values using Ajax but he was facing problem while adding all textbox values in the hidden field. So I have solved his problem using jQuery and also sharing the solution with you.

  • First declare an Array variable as this variable will be used to store the values.
//Code Starts
var txtData = [];
//Code Ends
  • Now loop through all the textboxes on the form and put their value in the array variable.
//Code Starts
$("form :input[type=text]").each(function() {
    txtData.push($(this).val());
});
//Code Ends
  • Now join all the elements of array to make a single string and assign it to hidden input element. I have used "$$$" as separator to separate the values in string.
//Code Starts
$("#hdnData").val(txtData.join("$$$"));
//Code Ends
So complete jQuery code is,
//Code Starts
$(document).ready(function() {
    $("#btnSubmit").click(function(e) {
        var txtData = [];
        $("form :input[type=text]").each(function() {
            txtData.push($(this).val());
        });
        $("#hdnData").val(txtData.join("$$$"));
        $('p').html($("#hdnData").val());
        e.preventDefault();
    });
});​
//Code Ends
See result below.



Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..