Learning 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.