How to add additional fields to form before submit?

Question

Is there a way to use javascript and JQuery to add some additional fields to be sent from a HTTP form using POST?

I mean:

<form action="somewhere" method="POST" id="form">
  <input type="submit" name="submit" value="Send" />
</form>

<script type="text/javascript">
  $("#form").submit( function(eventObj) {
    // I want to add a field "field" with value "value" here
    // to the POST data

    return true;
  });
</script>

possible duplicate of [jQuery - add additional parameters on submit (NOT ajax)](http://stackoverflow.com/questions/2530635/jquery-add-additional-parameters-on-submit-not-ajax) — Marijn, Mar 25 '14 at 13:01

score 208 · Accepted Answer · edited Jun 06 '19 at 20:57

208

Yes.You can try with some hidden params.

  $("#form").submit( function(eventObj) {
      $("<input />").attr("type", "hidden")
          .attr("name", "something")
          .attr("value", "something")
          .appendTo("#form");
      return true;
  });

edited Jun 06 '19 at 20:57

molasses

55
6

answered Jul 23 '13 at 11:36

Suresh Atta

120,458
37
198
307

45

`.appendTo(this)` would probably be better. – jcuenod Jun 12 '15 at 10:37
5

@jcuenod original `appendTo('#form')` is much better, because such approach allows submit another form with values from this one. – Andremoniy Oct 19 '15 at 14:39
10

You'll have to add some extra logic to avoid accumulating these input with each submit. – amos Nov 18 '16 at 14:09
3

You'll probably want to remove the input element before you add it in case it already exists `$(this).find("input[name="+"something"+"]").remove();` – K Vij Jun 04 '20 at 04:50
1

If it's not AJAX the form and the appended field is gone on submission. – ed22 Apr 08 '22 at 16:30

score 63 · Answer 2 · edited Sep 06 '15 at 03:33

63

Try this:

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="field_name" value="value" /> ');
    return true;
});

edited Sep 06 '15 at 03:33

user664833

18,397
19
91
140

answered Jul 23 '13 at 11:37

Khawer Zeshan

9,470
6
40
63

I need to add a file field dynamically. I tried having type=file, and the value also as the file (I'm using WebKitDirectory, so I actually get the file objects), however it never seems to pass it. The input text always gets passed though. Please help me out! – Swaathi Kakarla Apr 08 '15 at 10:40
1

My preferred answer due to using `this` instead of the redundant `#form` – rinogo Apr 30 '15 at 16:34

score 18 · Answer 3 · answered Jul 23 '13 at 11:38

18

$('#form').append('<input type="text" value="'+yourValue+'" />');

answered Jul 23 '13 at 11:38

de_nuit

650
7
13

score 13 · Answer 4 · edited Sep 06 '15 at 03:37

13

You can add a hidden input with whatever value you need to send:

$('#form').submit(function(eventObj) {
    $(this).append('<input type="hidden" name="someName" value="someValue">');
    return true;
});

edited Sep 06 '15 at 03:37

user664833

18,397
19
91
140

answered Jul 23 '13 at 11:37

Adil Shaikh

44,509
17
89
111

score 11 · Answer 5 · answered Sep 23 '15 at 21:08

11

This works:

var form = $(this).closest('form');

form = form.serializeArray();

form = form.concat([
    {name: "customer_id", value: window.username},
    {name: "post_action", value: "Update Information"}
]);

$.post('/change-user-details', form, function(d) {
    if (d.error) {
        alert("There was a problem updating your user details")
    } 
});

answered Sep 23 '15 at 21:08

Jeff Lowery

2,492
2
32
40

3

Yeah, but there is no redirect to result page. – omikron Feb 26 '16 at 10:24
3

this should work: `$('body').append(form); $(form).submit();` – Jeff Lowery Feb 26 '16 at 17:39
This was the most helpful to me, because I have a large number of generated fields and I don't want to create hidden fields for each. – Sprachprofi Jul 02 '20 at 10:15

Mohamed Allal · Answer 6 · 2019-09-03T15:45:51.293

May be useful for some:

(a function that allow you to add the data to the form using an object, with override for existing inputs, if there is) [pure js]

(form is a dom el, and not a jquery object [jqryobj.get(0) if you need])

function addDataToForm(form, data) {
    if(typeof form === 'string') {
        if(form[0] === '#') form = form.slice(1);
        form = document.getElementById(form);
    }

    var keys = Object.keys(data);
    var name;
    var value;
    var input;

    for (var i = 0; i < keys.length; i++) {
        name = keys[i];
        // removing the inputs with the name if already exists [overide]
        // console.log(form);
        Array.prototype.forEach.call(form.elements, function (inpt) {
             if(inpt.name === name) {
                 inpt.parentNode.removeChild(inpt);
             }
        });

        value = data[name];
        input = document.createElement('input');
        input.setAttribute('name', name);
        input.setAttribute('value', value);
        input.setAttribute('type', 'hidden');

        form.appendChild(input);
    }

    return form;
}

Use :

addDataToForm(form, {
    'uri': window.location.href,
     'kpi_val': 150,
     //...
});

you can use it like that too

var form = addDataToForm('myFormId', {
    'uri': window.location.href,
     'kpi_val': 150,
     //...
});

you can add # if you like too ("#myformid").

It is a timesaver. I checked it with a simple form. It works! — TuralAsgar, Feb 03 '22 at 14:04
Careful when removing inputs with the same name in a form with radios and checkboxes because uncecked fields may remove checked ones — xtian, Apr 30 '22 at 13:51

score -2 · Answer 7 · answered Oct 17 '21 at 00:24

-2

Expanding upon Khawer's answer, you could refrain from using jQuery - for consistency, eg.
<input type="hidden" name="field_name" value="value" />

answered Oct 17 '21 at 00:24

asciidude

272
1
3
19

How to add additional fields to form before submit?

7 Answers7

Use :

Linked