Dynamically create and submit form

Question

Is there a way in jQuery to create and submit a form on the fly   Something like below    lt html gt       lt head gt       lt title gt  Title Text Goes Here  lt  title gt       lt script src  http   code jquery com jquery-1 7 js  gt  lt  script gt       lt script gt            document  ready function   alert  hi                  lt form  gt    attr  action   form2 html   submit         lt  script gt       lt  head gt       lt body gt           Content Area       lt  body gt       lt  html gt    Is this supposed to work or there is a different way to do this

User · Answer

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();

User · Answer

Like Purmou  but removing the form when submit will done     function            lt form action  form2 html  gt  lt  form gt    appendTo  body   submit   remove

User · Answer

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            lt form action  form2 html  gt  lt  form gt    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

User · Answer

Yes  it is possible  One of the solutions is below  jsfiddle as a proof    HTML    lt a id  fire  href     title  submit form  gt Submit form lt  a gt     see  above there is no form   JavaScript   jQuery   fire   click function event       event preventDefault        var newForm   jQuery   lt form gt               action    http   www google com search            target     top         append jQuery   lt input gt               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

User · Answer

Steps to take   First you need to create the form element  With the form you have to pass the URL to which you wants to navigate  Specify the method type for the form  Add the form body  Finally call the submit   method on the form   Code  var Form   document createElement  quot form quot    Form action     DashboardModule DevicesInfo RedirectToView TerminalId   marker data  Form method    quot post quot   var formToSubmit   document body appendChild Form   formToSubmit submit

User · Answer

Yes  you just forgot the quotes          lt form  gt    attr  action   form2 html   submit

User · Answer

Using Jquery     lt form  gt      action  url  method   POST     append          lt input gt     type   hidden   id   id field 1   name   name field 1   value  val field 1            lt input gt     type   hidden   id   id field 2   name   name field 2   value  val field 2      appendTo  body   submit

User · Answer

Why don t you   post or   get directly   GET requests     get url  data  callback     POST requests     post url  data  callback     Then you don t need a form  just send the data in your data object     post  form2 html    myField   some value    function      alert  done

User · Answer

Assuming you want create a form with some parameters and make a POST call    var param1   10       lt form action    your target html  method  POST  gt       lt input type  hidden  name  param  value      param        gt       lt  form gt    appendTo  body   submit      You could also do it all on one line if you so wish  -

User · Answer

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

User · Answer

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       lt input gt    attr  type    hidden   attr  name    mydata   val  bla          form  append   input          form  submit

[javascript] Dynamically create and submit form

Examples related to javascript

Examples related to jquery

Examples related to forms

Examples related to submit