Submitting form data through a jQuery command

Question

I have an MVC project I'm working on, and am creating a set of different submit buttons, each which pass a different value to the controller on submission.

In my current code, I have the call to the submit function first create hidden input elements to pass the data I want, something like this:

    $('#btnCreate').live('click', function () {
    $('#formIndex').submit(function (event) {
        $('#actions').append('<input type="hidden" name="objectId" value="' + $('input[name="objectList"]').val() + '" />');
        $('#actions').append('<input type="hidden" name="choice" value="create" />');
    });
});

I'm wondering if I can just pass the values of those hidden inputs as a set of parameters in the submit call, like you can do with the $.get, $.post, and $.ajax functions. I've experimented but haven't seemed to hit on the right formula yet.

Thanks for your help!

Are you looking for an ajax solution or a synchronous submit? — Mike G
– Mike G, Commented Oct 2, 2011 at 0:53
In this case I'm looking for synchronous. I want to submit and then redirect to another page. — ChemProfMatt
– ChemProfMatt, Commented Oct 2, 2011 at 4:42

Community · Accepted Answer · 2017-05-23 11:47:52Z

1

I think you are on the right track by adding hidden input parameters. I don't know of any other way to append data to your non-ajax form submit.

You might want to change a few things about your code though:

Build your hidden inputs using jquery (as seen here on SO)

var input = $("<input>").attr("type", "hidden").attr("name", "mydata").val("bla"); $('#form1').append($(input));
For better performance, use delegate() instead of live(). The performance benefit really depends on how deep your DOM is. However, delegate supports chaining where live does not. (In jquery 1.7, all these problems go away with the on() method...):

$('body').delegate('#btnCreate', 'click', function () { ... });

Note that instead of using body as the container element, you could instead use something lower in the DOM which wraps your btnCreate element.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Oct 3, 2011 at 13:49

Mike G

4,8032 gold badges30 silver badges31 bronze badges

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

Comments

Raghav · Accepted Answer · 2011-10-02 01:34:46Z

1

If you have to just submit data in the form to the backend, you can use serialize() function of jquery.

Usage:

      $('form').submit(function() {
         var yourdata = $(this).serialize();
        $.ajax({
                type: "POST",
                 url: "check.php",
                data: yourdata,
             success: function(msg){
                      alert( "Data Saved: " + msg );
               }
           });
      });

answered Oct 2, 2011 at 1:34

Raghav

1,0743 gold badges17 silver badges40 bronze badges

1 Comment

Mike G Over a year ago

This is asynchronous, he is looking for synchronous

Collectives™ on Stack Overflow

Submitting form data through a jQuery command

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related