Create a form dynamically with jquery and submit

Question

I am trying to create a form dynamically via jquery and submit it to a PHP file. This creates the form but nothing happens when i click the submit button. What is going wrong here ?

Method i am using to create a form dynamically is :-

    $('#share').append("<form action='sharer.php' method='POST'/>");
    $('#share').append("<div class= 'appm'>Save this/div/>");
    $('#share').append("<input type='text' placeholder='Name' name='routename' id='rname'/>");
    $('#share').append("<input type='text' placeholder='description' id='rdescription' name='routedescription' class= 'address'/>");
    $('#share').append("<input type='text' placeholder='tags' id='tags' name='routetags'  />");
    $('#share').append("<br><input type='submit' id='savebutton' value = 'Save' />");
    $('#share').append("</form>");

Answer 1

Solution

You are appending all the content that you add to the parent element, so they won't get inside the form itself. Way to fix this:

   $("#share").append('<form action="sharer.php" method="POST">');
   $("#share form").append('<div class="appm">Save this</div>');
   $("#share form").append('<input type="text" placeholder="Name" name="routename" id="rname"/>');
   $("#share form").append('<input type="text" placeholder="description" id="rdescription" name="routedescription" class="address"/>');
   $("#share form").append('<input type="text" placeholder="tags" id="tags" name="routetags"/>');
   $("#share form").append('<br><input type="submit" id="savebutton" value="Save" />');

You don't need to append a closing tag for the form after that.

Working Fiddle

---

Performance-wise: Pure JavaScript

(jsperf link up there)

If you really want a good performance solution, go for pure JavaScript code:

var div = document.getElementById('share');
var form = document.createElement('form');
form.setAttribute('action', 'sharer.php');
form.setAttribute('method', 'POST');
/*-----------*/
var appm = document.createElement('div');
appm.appendChild(document.createTextNode('Save This'));
appm.setAttribute('class', 'appm');
/*-----------*/

var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('placeholder', 'Name');
input1.setAttribute('name', 'routename');
input1.setAttribute('id', 'rname');

var input2 = document.createElement('input');
input2.setAttribute('type', 'text');
input2.setAttribute('placeholder', 'description');
input2.setAttribute('name', 'routedescription');
input2.setAttribute('id', 'rdescription');
input2.setAttribute('class', 'address');

var tags = document.createElement('input');
tags.setAttribute('type', 'text');
tags.setAttribute('placeholder', 'tags');
tags.setAttribute('name', 'routetags');
tags.setAttribute('id', 'tags');

var submit = document.createElement('input');
submit.setAttribute('type', 'submit');
submit.setAttribute("value", "Save");
submit.setAttribute('id', 'savebutton');

form.appendChild(input1);
form.appendChild(input2);
form.appendChild(tags);
form.appendChild(submit);

div.appendChild(form);

Answer 2

JQuery will never allow you to put a tag without closing it. So now, your code create a form and appen elements after the form (not inside).

But you can create a form, save it in a var and append your things into the var.

var form = $('<form/>', {action : 'sharer.php', method : 'POST'}).appendTo('#share');
form.append("<div class= 'appm'>Save this</div>");
form.append("<input type='text' placeholder='Name' name='routename' id='rname'/>");
form.append("<input type='text' placeholder='description' id='rdescription' name='routedescription' class= 'address'/>");
form.append("<input type='text' placeholder='tags' id='tags' name='routetags'  />");
form.append("<br/><input type='submit' id='savebutton' value='Save' />");

This is also optimal since you are caching the form, not creating a jQuery object for each append!

Working fiddle : http://jsfiddle.net/Lb8BY/ (append to body)