javascript - 使用jquery动态创建表单并提交

Question

我正在尝试通过 jquery 动态创建表单并将其提交到 PHP 文件。这会创建表单，但当我单击提交按钮时没有任何反应。这里出了什么问题？

我用来动态创建表单的方法是:-

    $('#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

解决方案

您正在附加所有内容您添加到父元素，因此它们不会进入表单本身。解决方法:

   $("#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" />');

之后您不需要为表单附加结束标记。

Working Fiddle

---

Performance-wise : 纯JavaScript

(上面有 jsperf 链接)

如果您真的想要一个好的性能解决方案，请选择纯 JavaScript 代码:

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