Pass extra variable when submitting a form using jQuery

Question

I have a form in which the Submit button does not sit within the

tags. The submit button has an click handler to submit the form via jQuer

Answer 1

One thing you could do is use the onsubmit attribute to have javascript inject a post field into the form with the value of the submit button right as it is submitted. You'd have to do this with a hidden input field, but you'd only add the input field right after the user clicked the submit button -- so the input field wouldn't exist there from the beginning (hopefully this satisfies your requirements). So something like:

 function submitHandler()
 {
     submitVal = $('#submitButton').val();
     $('#myForm').append("<input type='hidden' name='submitValue' value='"+
                         submitVal+"' />");
     return true;
 }

Which would stick in the extra value right as the button was clicked.

Answer 2

If you wanted to do it straight from an element which was changed without writing a submit handler, this works:

<script>
$(function() {
  $( ".datePicker" ).datepicker({ 
      dateFormat: 'dd-M-yy',
      onSelect: function (date) {   
        $('#dateChanger').append("<input type='hidden' name='changed_" + $(this).attr("name") + "' value='" + $(this).attr("value") + "' />");    
        $("#dateChanger").submit();
  }
  });
});
</script>

Answer 3

On jquery 1.11.1

I've managed it like that:

$(yourForm).on('submit',{'yourExtraData':extraData},function(event){
        alert('your extra data ' + event.data['yourExtraData'] + ' went thru');
});

Check also: https://api.jquery.com/event.data/

Answer 4

This seems to be an old question, but since I just ran into a similar issue and found a good solution (for me), I thought I'd post it:

 $('#admin_form').trigger('submit', [ { 'variable_name': true } ]);

or

$('#admin_form').trigger('submit', [ 'variable_name', 'true' ]);

depending on whether you want to pass a variable called variable_name with value true or you want to pass 2 separate variables.

And just to be clear, this will not of course automatically submit variable_name with the rest of the form fields, but if you have a submit handler, as I do in jQuery, the variables will be passed as arguments, after the event.

Answer 5

Jesse's answer is the only way to accomplish this via POST. You could also append the variable to the form's action value, but that would be passing that param via GET instead of POST. Without a hidden input appended to the form prior to allowing the default browser "submit" action, there is no way to access the raw post data of the HTTP request before it's been submitted - it's a chicken before the egg dilemma - what you're intending to do is change the HTTP POST data/headers that get sent to the next page, but the only way that data exists prior to the browser posting the data to the next page is by having the input tags embedded within the form element.

An alternative solution you could go with would be to use the $.post() function to send whatever data you want via post during the onsubmit handler, and in the success handler redirect to the page you want. I know this doesn't go according to the rules above, but is another possible solution to a problem none the less.

If you want to get real crazy though and follow all your rules, you could also:

1. "clone" a hidden version the form to the DOM
2. inject the submit button into the form
3. trigger a click event on the injected submit button in the cloned form.