Question

On my page I’m using a form which on submit should get some extra hidden fields. The problem however is that I can’t know the name/id of the form nor the submit button so I can’t use functions like onClick etc. Therefore I’m using the beforeunload event to trigger an event when the user tries to leave the page (this includes submitting a form). I’m using the document.activeElement to find out what triggered the event and if it’s a form/submit I’m adding the hidden fields to the form.

Stripping down the code it comes down to something like this:

var javascriptData = ['val1','val2','val3']; // usually gets values dynamically and can differ in size
$(window).bind('beforeunload', function(e) {
    var activeForm = document.activeElement.form;
    for(var i = 0; i < javascriptData.length; i++){
        $(activeForm).append('<input type="hidden" name="test-data[]" value="'+javascriptData[i]+'" />');
    }
    return false; // just for debug purposes.
}

The code works and the element is added to the form but it doesn’t show up in the $_POST on the next page. However, the final line of code (return false) creates a pop-up asking if I want to leave the page, if I stay on the page, press the submit button again and then leave the page and check $_POST, the field there. My guess is that the data for the $_POST is collected before the beforeunload function is triggered.

My question is: “Is there a way around this so I can add a hidden field to a form in the beforeunload event?”.

Help is much appreciated, thanks in advance.

Answer 1

Like the comments above mentioned, you can just hook onto the submit event.

$('form').submit(function() {
    for(var i = 0; i < javascriptData.length; i++){
        $(this).append('<input type="hidden" name="test-data[]" value="'+javascriptData[i]+'" />');
    }
}