20

I have a form in which the Submit button does not sit within the <form> tags. The submit button has an click handler to submit the form via jQuery's submit() event. This works perfectly.

However, I need the value of the Submit button to be POST'ed as well. Since the button does not exist within the <form> tags, it is not included in the POST array. Therefore, I need to engineer a way to pass an extra variable when the form is submitted.

Some stipulations on what cannot happen to achieve this include:

  • The Submit button cannot be moved within the <form> tags.
  • It cannot use the jQuery ajax, post, or get methods.
  • It cannot have hidden input fields or submit buttons hidden by CSS.
  • The form must act exactly as if there was a normal Submit button in the form.

I envisioned something like, but obviously this does not work.

$('#admin_form').submit({'variable_name', 'true'});

Anybody have any ideas on how I could achieve this?

Improve this question

5 Answers 5

Reset to default
34

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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.

Improve this answer

5 Comments

I tried this exact syntax and the variable was not passed
Do you have a submit handler for the form? i.e. something like $('#admin_form').on('submit', function() { ... });
It works great, thanks! $(form_selector).trigger('submit', [{ 'show_again': true }]); /* -- */ $(form).submit(function (e, show_again) {});
am sorry i didn't get it for the submit handler. what those paramaters mean ? function (e, show_again) any live example please ?
@Amine if you have a submit handler on the form, e.g. like I wrote in my comment above, when you trigger the submit event as I wrote in my answer, the variables will be passed to your handler. I don't have a live example, sorry.
2

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.
Improve this answer

Comments

0

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>
Improve this answer

1 Comment

That would append a new input element every time a select happens. If someone changed the date several times (let's say 3 times), you'd have 3 extra hidden input elements inserted into the DOM which could set you up for more problems.
0

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/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.