jQuery - add additional parameters on submit (NOT ajax)

Question

Using jQuery's 'submit' - is there a way to pass additional parameters to a form? I am NOT looking to do this with Ajax - this is normal, refresh-typical form submission.

$('#submit').click(function () {
    $('#event').submit(function () {
        data: { 
        form['attendees'] = $('#attendance').sortable('toArray').toString();
    });
});

See my answer [here][1], which appends to a serialized form before submit. [1]: http://stackoverflow.com/questions/17809056/how-to-add-additional-fields-to-form-before-submit — Jeff Lowery, Sep 23 '15 at 21:10
Take a look at https://stackoverflow.com/questions/603924/submit-name-value-pair-from-javascript — LCJ, Jun 20 '17 at 23:06

score 402 · Accepted Answer · edited Sep 10 '18 at 06:56

402

This one did it for me:

var input = $("<input>")
               .attr("type", "hidden")
               .attr("name", "mydata").val("bla");
$('#form1').append(input);

is based on the Daff's answer, but added the NAME attribute to let it show in the form collection and changed VALUE to VAL Also checked the ID of the FORM (form1 in my case)

used the Firefox firebug to check whether the element was inserted.

Hidden elements do get posted back in the form collection, only read-only fields are discarded.

Michel

edited Sep 10 '18 at 06:56

tomloprod

7,472
6
48
66

answered Mar 27 '10 at 23:49

Michel

23,085
46
152
242

51

How do I sing 'you are my sunshine' in binary? Thank you so much. This solves so many things. – Ciel Mar 28 '10 at 01:09
40

You can slightly improve readability: var input = $("", { type: "hidden", name: "mydata", value: "bla" }); $('#form1').append($(input)); – Konstantine Kalbazov Apr 17 '13 at 14:24
2

$("").attr("type", "hidden").attr("name", "mydata").val("bla").appendTo('#form1'); is another way – kiev May 14 '14 at 16:05
6

I liked a combo of: $("", { type: "hidden", name: "mydata", value: "bla" }).appendTo("#form1"); – gabeio Feb 10 '16 at 04:48
Isn't there a limit on data size? I sent some big object using JSON.stringify(obj) and this method and it appeared to be truncated. – omikron Feb 26 '16 at 10:21
This worked for me. Don't forget to add the $('#form1').submit() after the append. – boilers222 Jun 08 '16 at 20:46

Daff · Answer 2 · 2013-03-27T01:17:34.190

28

In your case it should suffice to just add another hidden field to your form dynamically.

var input = $("<input>").attr("type", "hidden").val("Bla");
$('#form').append($(input));

edited Mar 27 '13 at 01:17

answered Mar 27 '10 at 19:33

Daff

43,734
9
106
120

The data I need to submit is not form-capable. It has to be captured and handled on the server side. – Ciel Mar 27 '10 at 19:34
What do you mean by "not form capable"? – Vincent Ramdhanie Mar 27 '10 at 19:36
Sorry - this didn't work at all. Even with just forced data, it doesn't inject it into the form. – Ciel Mar 27 '10 at 19:39
It cannot be placed in a form field. – Ciel Mar 27 '10 at 19:39
2

If its a string it can be put in a form field – PetersenDidIt Mar 27 '10 at 19:42
Alright, well... this technique didn't work. it doesn't inject the form element into the form. Putting it in a hidden form field might work, but the code given doesn't. – Ciel Mar 27 '10 at 19:44
I think you're just missing .name("name", yourName).val... where yourName is the name of the form value that you're inserting. See below for examples. – Hugh Seagraves Jul 20 '17 at 21:46

score 23 · Answer 3 · answered Sep 11 '12 at 07:11

23

You can even use this one. worked well for me

$("#registerform").attr("action", "register.php?btnsubmit=Save") 
$('#registerform').submit();

this will submit btnsubmit =Save as GET value to register.php form.

answered Sep 11 '12 at 07:11

Parag

4,754
9
33
50

1

This seems like a more elegant solution. Just remember to use `encodeURIComponent()` for the parameter value depending on the type of data. – Andres SK Nov 23 '18 at 16:55
1

This one is actually better when allow user submit form multiple times. The form won't get more than one hidden fields with different values. – Mellon Jun 06 '19 at 16:06

score 12 · Answer 4 · edited Feb 08 '14 at 16:10

12

You don't need to bind the submit event on the click of the submit button just bind the submit event and it will capture the submit event no mater how it gets triggered.

Think what you are wanting is to submit the sortable like you would via ajax. Try doing something like this:

var form = $('#event').submit(function () {
    $.each($('#attendance').sortable('toArray'),function(i, value){
        $("<input>").attr({
            'type':'hidden',
            'name':'attendace['+i+']'
        }).val(value).appendTo(form);
    });
});

edited Feb 08 '14 at 16:10

Jaco Pretorius

24,380
11
62
94

answered Mar 27 '10 at 19:51

PetersenDidIt

25,562
3
67
72

still not showing on the server side formcollection... is there somethign special I have to do to get a hidden field to show up on a server? It is going through C#/ASP.NET MVC using a FormCollection object. – Ciel Mar 27 '10 at 19:56
Updated my answer, think I undertand what you are trying to do. – PetersenDidIt Mar 27 '10 at 19:59
Are you adding a `name` attribute to the generated hidden form input? As per http://stackoverflow.com/questions/504681/formcollection-empty-on-form-post-in-asp-net-mvc it looks like FormCollection objects require all the `` elements to have names. – npdoty Mar 27 '10 at 20:02
Yes, I am trying to push a sortable into the formcollection as a string of comma separated values. I've tried your update and it still doesn't post. I'm not sure what I am doing wrong... I appreciate the help. – Ciel Mar 27 '10 at 20:08
Sounds like the problem isn't on the client side but the server side. – PetersenDidIt Mar 27 '10 at 20:09
Hrnm. It does sound that way. Here is my method signature. public ActionResult Design(EventViewModel model, FormCollection collection) – Ciel Mar 27 '10 at 20:11
Would there be a way to use $.post? I'm not aversed to it, but how do I get the original form data into it? – Ciel Mar 27 '10 at 20:46
You can serialize the form $("form").serialize(); – PetersenDidIt Mar 27 '10 at 20:59
So with .serialize, what kind of data on the server type do I expect? – Ciel Mar 27 '10 at 23:32

score 11 · Answer 5 · answered Mar 26 '13 at 11:24

11

You could write a jQuery function which allowed you to add hidden fields to a form:

// This must be applied to a form (or an object inside a form).
jQuery.fn.addHidden = function (name, value) {
    return this.each(function () {
        var input = $("<input>").attr("type", "hidden").attr("name", name).val(value);
        $(this).append($(input));
    });
};

And then add the hidden field before you submit:

var frm = $("#form").addHidden('SaveAndReturn', 'Save and Return')
                    .submit();

answered Mar 26 '13 at 11:24

Jonathan

25,873
13
66
85

1

See http://stackoverflow.com/questions/2601223/jquery-add-hidden-element-to-form-programmatically/16215385#16215385 for more advanced version of addHidden – Jonathan Apr 25 '13 at 12:59
1

I like the simplicity of this solution. It does not handle many cases but it nicely handle the case it does. – Phil Jun 27 '13 at 05:47

score 5 · Answer 6 · answered Sep 15 '15 at 00:46

Similar answer, but I just wanted to make it available for an easy/quick test.

var input = $("<input>")
               .attr("name", "mydata").val("go Rafa!");

$('#easy_test').append(input);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>



<form id="easy_test">
  
</form>

jQuery - add additional parameters on submit (NOT ajax)

6 Answers6

Linked