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>
$('#form').append('<input type="text" value="'+yourValue+'" />');
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;
}
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").
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;
});
Try this:
$('#form').submit(function(eventObj) {
$(this).append('<input type="hidden" name="field_name" value="value" /> ');
return true;
});
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")
}
});
Source: Stackoverflow.com