Is there a way in jQuery to create and submit a form on the fly.
Something like below.
<html>
<head>
<title> Title Text Goes Here </title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).ready(function(){alert('hi')});
$('<form/>').attr('action','form2.html').submit();
</script>
</head>
<body>
Content Area
</body>
</html>
Is this supposed to work or there is a different way to do this?
This question is related to
javascript
jquery
forms
submit
Yes, it is possible. One of the solutions is below (jsfiddle as a proof).
HTML:
<a id="fire" href="#" title="submit form">Submit form</a>
(see, above there is no form)
JavaScript:
jQuery('#fire').click(function(event){
event.preventDefault();
var newForm = jQuery('<form>', {
'action': 'http://www.google.com/search',
'target': '_top'
}).append(jQuery('<input>', {
'name': 'q',
'value': 'stack overflow',
'type': 'hidden'
}));
newForm.submit();
});
The above example shows you how to create form, how to add inputs and how to submit. Sometimes display of the result is forbidden by X-Frame-Options, so I have set target to _top, which replaces the main window's content. Alternatively if you set _blank, it can show within new window / tab.
Try with this code -
It is a totally dynamic solution:
var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");
var input = $("<input>").attr("type", "hidden").attr("name", "mydata").val("bla");
$(form).append($(input));
$(form).submit();
Yes, you just forgot the quotes ...
$('<form/>').attr('action','form2.html').submit();
Assuming you want create a form with some parameters and make a POST call
var param1 = 10;
$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').submit();
You could also do it all on one line if you so wish :-)
Its My version without jQuery, simple function can be used on fly
Function:
function post_to_url(path, params, method) {
method = method || "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
Usage:
post_to_url('fullurlpath', {
field1:'value1',
field2:'value2'
}, 'post');
Josepmra example works well for what i need. But i had to add the line
form.appendTo( document.body )
for it to work.
var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");
var input = $("<input>")
.attr("type", "hidden")
.attr("name", "mydata")
.val("bla" );
$(form).append($(input));
form.appendTo( document.body )
$(form).submit();
Like Purmou, but removing the form when submit will done.
$(function() {
$('<form action="form2.html"></form>').appendTo('body').submit().remove();
});
Using Jquery
$('<form/>', { action: url, method: 'POST' }).append(
$('<input>', {type: 'hidden', id: 'id_field_1', name: 'name_field_1', value: val_field_1}),
$('<input>', {type: 'hidden', id: 'id_field_2', name: 'name_field_2', value: val_field_2}),
).appendTo('body').submit();
Steps to take:
method type for the form.submit() method on the form.Code:
var Form = document.createElement("form");
Form.action = '/DashboardModule/DevicesInfo/RedirectToView?TerminalId='+marker.data;
Form.method = "post";
var formToSubmit = document.body.appendChild(Form);
formToSubmit.submit();
Source: Stackoverflow.com