How can 2 Html forms share 1 hidden field?

Question

I have a page with 2 forms and a hidden field that is outside of both of the forms.

How can the hidden field be submitted with either of the forms?

I thought about doing something like this with jQuery:

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            // do something to move or copy the
            // hidden field to the submitting form
        });
    });
</script>

Will this work? Any other ideas?

EDIT

The hidden field stores a serialized object graph that doesn't change. Both server methods require the object. The serialized object string can get pretty hefty, so I don't want this thing sent down from the server 2 times.

Answer 1

Append the field to both forms at page load:

$(function() {
    $('#form1, #form2').append($('input[name=fieldName]'));
});

Answer 2

Assuming you are doing a non ajax submit you could just append the field into the form being submitted. However if you need this info in both forms is it not better to store this value server side in a session store. This way any non js clients will also work!

 $(function() {
        $('form').submit(function() {
             $('input.yourhiddenSubmit').appendTo(this);
        });
    });

Answer 3

You can simply inject a copy of the element into each form right before submission. This way, you can have the option of having different information for each hidden form field without affecting the other.

---

Something like this:

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            $("#hidden_element").clone().appendTo(this);
        });
    });
</script>

If you want to use the exact same element for both forms without creating a fresh copy, just don't use clone()

---

See documentation for clone() and for appendTo()

EDIT:

If you don't want to send the hidden element with every request the form sends. Consider storing it in the database for that user for that time. You can submit its content once, and once only for every page reload, and then just send the database id of the hidden element with each form post.

On page load, something like this:

$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
  $("#hiddenfield").val(insertedID);
});

Then, in the server side code:

//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit

This way your js gets the callback.

Now, you can submit the form as you would, but this time, you're only sending the id (integer number) to the server. You can then simply delete the object from your server (run a cron to do it after X amount of time, or send another request to delete it.

Honestly, though, unless you object is HUGE(!!), I think storing it by submitting it only once is a lot more complex to execute than to simply send two requests to the server.

Let me know if you have any other questions...

Answer 4

The only way to pass the variable to the next form is to have that variable in the data that is passed when the form is submitted (either GET or POST), unless you want to use AJAX. Assuming you want to have the hidden variable outside of the actual form for a "good reason", I would recommend using jQuery to include the hidden input field into the form just before submission, like so:

<script type="text/javascript">
    $(function() {
        $('form').submit(function() {
            $(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
            return true;
        });
    });
</script>

Replace all the instances of "hiddenField" with the ID of your hidden field outside the form. This will create a new input inside of the form just before it is submitted with the value of the hidden field that is elsewhere on the page.

Beyond that, you'd have to be a bit more specific about what your exact problem was (and why the field isn't being included in the form) for me to help.

Note that the above code should work in theory, but I didn't have a chance to actually test it out myself.