Create a form dynamically with jquery and submit
First of all, There is way easier way to write that. Second, you're not appending anything to the form. I would rewrite that one of 2 ways.
Example 1
<script type="text/javascript">
$(function() {
$('#share').append(
$('<form />', { action: 'sharer.php', method: 'POST' }).append(
$('<div />', { class: 'appm', text: 'Save this' }),
$('<input />', { id: 'rname', name: 'routename', placeholder: 'Name', type: 'text' }),
$('<input />', { class: 'address', id: 'rdescription', name: 'routedescription', placeholder: 'description', type: 'text' }),
$('<input />', { id: 'tags', name: 'routetags', placeholder: 'tags', type: 'text' }),
$('<br />'),
$('<input />', { id: 'savebutton', type: 'submit', value: 'Save' })
)
)
})
</script>
With Example 1, you may need to asign events
dynamically. Such as:
<script type="text/javascript">
$(function() {
$(document).on('click', '#share form input[type=submit]', function(e) {
e.preventDefault();
/* do work */
})
})
</script>
Example 2
<script type="text/javascript">
$(function() {
var $form = $('<form />', { action: 'sharer.php', method: 'POST' }),
frmSave = $('<div />', { class: 'appm', text: 'Save this' }),
frmRName = $('<input />', { id: 'rname', name: 'routename', placeholder: 'Name', type: 'text' }),
frmRDesc = $('<input />', { class: 'address', id: 'rdescription', name: 'routedescription', placeholder: 'description', type: 'text' }),
frmRTags = $('<input />', { id: 'tags', name: 'routetags', placeholder: 'tags', type: 'text' }),
frmButton = $('<input />', { id: 'savebutton', type: 'submit', value: 'Save' });
$form.append(frmSave, frmRName, frmRDesc, frmRTags, $('<br />'), frmButton).appendTo($('#share'));
})
</script>
With example 2, you can make later use of the variables (even make them global if needed) and make changes using variables, such as:
<script type="text/javascript">
$(function() {
frmButton.on('click', function(e) {
e.preventDefault();
/* do work */
})
})
</script>
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);