Question

I have a form where I’m using Jquery to submit the form to create a preview output on the right-hand side of my screen (I have some complex inputs and want to use ruby to process them to create the preview).

After the user has completed the form and presses the submit button, I want the form to submit normally (i.e., as if Jquery is not being used). Is there any way of doing this?

I feel like the answer to this is probably really simple and I’m just completely missing something.

Here’s how I’m submitting a select button (for validation)

$('#body_message select').change(function() {
        $('form').submit();
      });

Here’s my current code for handling the submit button. When the user clicks the submit button, I change the value of a hidden field with id “message_submit_button” so this submit will be handled differently from the validation submits.

$('#body_message input[type="submit"]').click(function() {
        $('#body_message #message_submit_button').val("1");
        $('form').submit(function(){
            $.ajax({
              type: 'POST',
              url: $(this).attr('action'),
              data: $(this).serialize(),
              success: XMLHttpRequest.getResponseHeader("Location"),
              dataType: "html"
            });
            return false;   
        });

  });

EDITED:
Using the first part of the answer, I’ve changed the Jquery on my submit button to the following, and it works as desired:

$('#body_message input[type="submit"]').click(function() {
      $('#message_submit_button').val("1");
      $('form')[0].submit();    
});

Answer 1

You can bypass the jQuery .submit() handler by calling the native form.submit() function, like this:

$('form')[0].submit();

I would change it like this:

$('#body_message input[type="submit"]').click(function() {
  $('#message_submit_button').val("1");
  var form = $(this).closest("form")
  $.ajax({
    type: 'POST',
    url: form.attr('action'),
    data: form.serialize(),
    success: XMLHttpRequest.getResponseHeader("Location"),
    dataType: "html"
  });
  return false;   
});

Then in your other buttons when submitting…just do nothing and it’ll submit normally, that way this handler handles only this submit button, not the other that should do a normal submission.