Menu
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?
437
Approach 1: Use document. createElement() to create the new elements and use setAttribute() method to set the attributes of elements. Append these elements to the <form> element by appendChild() method. Finally append the <form> element to the <body> element of the document.
In the body tag, created an HTML form and specify the id, method, and action of the form. In the form, specify an anchor tag with an event onclick. Create a function for JavaScript that will get executed when the link is clicked. When we click on the link, the function submitForm() will get executed.
There were two things wrong with your code. The first one is that you included the $(document).ready(); but didn't wrap the jQuery object that's creating the element with it.
The second was the method you were using. jQuery will create any element when the selector (or where you would usually put the selector) is replaced with the element you wish to create. Then you just append it to the body and submit it.
$(document).ready(function(){ $('<form action="form2.html"></form>').appendTo('body').submit(); }); Here's the code in action. In this example, it doesn't auto submit, just to prove that it would add the form element.
Here's the code with auto submit. It works out fine. Jsfiddle takes you to a 404 page because "form2.html" doesn't exist on its server, obviously.
126
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
