Question

My page has 2 forms say form1 and form2. now when form one is submitted, then I am setting the value of a hidden field in form 2:

$('#form1').submit(function (){
     $("#hiddenfield").val($(this).serialize()) ; 
     alert($("#hiddenfield").val());
    return true;
    });

$('#form2').submit(function (){
     alert($("#hiddenfield").val());
    return true;
    });

In the first alert the data is showing properly but when I am submitting the sencond form, the value is empty. What might be the issue?

Answer 1

The problem is probably that since your submit function return true, the browser will post the form, thus reloading your page. Therefore your second form is empty when you post it. If you don’t want the form to reload the page, your submit-function will have to return false, to stop the browser from posting the form the regular way. In that case you will of course have to post your form through ajax instead, as returning false from the submit-function will stop the form-posting all together.

You can try to see if this is the problem by replacing the code you posted with the code below, and then try to first submit the first form and then the second. If the second form submit then alerts the actual value instead of empty, you have found the source of your problem:

$('#form1').submit(function (){
     $("#hiddenfield").val($(this).serialize()) ; 
     alert($("#hiddenfield").val());
    return false;
    });

$('#form2').submit(function (){
     alert($("#hiddenfield").val());
    return false;
    });