Adding POST parameters before submit

Question

I've this simple form:

<form id="commentForm" method="POST" action="api/comment">
    <input type="text" name="name" title="Your name"/>
    <textarea  cols="40" rows="10" name="comment" title="Enter a comment">
    </textarea>
    <input type="submit" value="Post"/>
    <input type="reset" value="Reset"/>
</form>

I need to add two POST parameters before send to the server:

var params = [
               {
                 name: "url",
                 value: window.location.pathname
               },
               {
                  name: "time",
                  value: new Date().getTime()
               }
             ];

without modifying the form, please.

Just a side note: Relying on the user to supply a valid time and url could lead to problems. — merkuro, Jun 14 '09 at 21:52

score 98 · Accepted Answer · edited Jun 14 '09 at 22:26

98

To add that using Jquery:

$('#commentForm').submit(function(){ //listen for submit event
    $.each(params, function(i,param){
        $('<input />').attr('type', 'hidden')
            .attr('name', param.name)
            .attr('value', param.value)
            .appendTo('#commentForm');
    });

    return true;
});

edited Jun 14 '09 at 22:26

dfa

111,277
30
187
226

answered Jun 14 '09 at 22:13

Pim Jager

31,469
16
71
98

18

Thats modifying the form – Hontoni Apr 02 '15 at 14:31
@Hontoni We can check if the parameter item exists in the form before we append it to the form, that can make the parameter item be appended only once. – guogangj Jan 04 '17 at 06:40
1

Do you can use `myInput = document.createElement('input')` and then set the attributes as object, like this: `myInput.type = 'text'; myInput.name = 'name'` – Alex May 19 '17 at 22:40
That's modifying the form. This is the solution IMO: https://stackoverflow.com/a/34566506/9258504 – SamBerk Jun 22 '21 at 15:42

Luca C. · Answer 2 · 2019-11-18T11:25:13.420

you can do this without jQuery:

    var form=document.getElementById('form-id');//retrieve the form as a DOM element

    var input = document.createElement('input');//prepare a new input DOM element
    input.setAttribute('name', inputName);//set the param name
    input.setAttribute('value', inputValue);//set the value
    input.setAttribute('type', inputType)//set the type, like "hidden" or other

    form.appendChild(input);//append the input to the form

    form.submit();//send with added input

sonnenhaft · Answer 3 · 2017-11-29T14:13:24.413

25

Previous answer can be shortened and be more readable.

$('#commentForm').submit(function () {
    $(this).append($.map(params, function (param) {
        return   $('<input>', {
            type: 'hidden',
            name: param.name,
            value: param.value
        })
    }))
});

edited Nov 29 '17 at 14:13

answered Jan 22 '14 at 13:33

sonnenhaft

1,630
1
13
15

score 18 · Answer 4 · answered Jan 02 '16 at 13:39

18

If you want to add parameters without modifying the form, you have to serialize the form, add your parameters and send it with AJAX:

var formData = $("#commentForm").serializeArray();
formData.push({name: "url", value: window.location.pathname});
formData.push({name: "time", value: new Date().getTime()});

$.post("api/comment", formData, function(data) {
  // request has finished, check for errors
  // and then for example redirect to another page
});

See .serializeArray() and $.post() documentation.

answered Jan 02 '16 at 13:39

Michał Perłakowski

80,501
25
149
167

1

@MonneratRJ disagree as the user never specified they wanted to use ajax. i for one came across this same question because i didn't want to use ajax. – Alex Jun 24 '19 at 07:28
@Alex ok makes sense... Pim Jager's answer fits the requirements then... – MonneratRJ Jun 26 '19 at 15:23
1

@Alex The OP said that they don't want to modify the form. – Michał Perłakowski Jun 26 '19 at 17:39
@MichałPerłakowski one of those cases of taking something too literally. – Alex Jun 27 '19 at 06:21
1

"If you want to add parameters without modifying the form" I've been looking for this for a while! – dangel Jul 14 '19 at 00:53

score 2 · Answer 5 · answered Sep 23 '15 at 21:13

You can do a form.serializeArray(), then add name-value pairs before posting:

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")
    } 
});

score 0 · Answer 6 · answered Feb 19 '16 at 14:08

PURE JavaScript:

Creating the XMLHttpRequest:

function getHTTPObject() {
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, 
       por lo que se puede copiar tal como esta aqui */
    var xmlhttp = false;
    /* No mas soporte para Internet Explorer
    try { // Creacion del objeto AJAX para navegadores no IE
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(nIE) {
        try { // Creacion del objet AJAX para IE
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(IE) {
            if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
                xmlhttp = new XMLHttpRequest();
        }
    }
    */
    xmlhttp = new XMLHttpRequest();
    return xmlhttp; 
}

JavaScript function to Send the info via POST:

function sendInfo() {
    var URL = "somepage.html"; //depends on you
    var Params = encodeURI("var1="+val1+"var2="+val2+"var3="+val3);
    console.log(Params);
    var ajax = getHTTPObject();     
    ajax.open("POST", URL, true); //True:Sync - False:ASync
    ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    ajax.setRequestHeader("Content-length", Params.length);
    ajax.setRequestHeader("Connection", "close");
    ajax.onreadystatechange = function() { 
        if (ajax.readyState == 4 && ajax.status == 200) {
            alert(ajax.responseText);
        } 
    }
    ajax.send(Params);
}

Beefjeff · Answer 7 · 2017-03-01T17:56:37.780

-1

You could do an ajax call.

That way, you would be able to populate the POST array yourself through the ajax 'data: ' parameter

var params = {
  url: window.location.pathname,
  time: new Date().getTime(), 
};


$.ajax({
  method: "POST",
  url: "your/script.php",
  data: params
});

edited Mar 01 '17 at 17:56

answered Mar 01 '17 at 13:18

Beefjeff

361
4
11

You should show an example.You can use the embedded snippets of SO to do so easily – Mawcel Mar 01 '17 at 13:40

Adding POST parameters before submit

7 Answers7

Linked

Related