Question

我对JS和JQuery的理解很少我正在尝试使用jquery动态创建表单（指http://www.joshuascottmccullough.com/index.php/2012/07/creating-submitting-a-form-on-the-fly/）但是，我在添加多个输入时遇到问题：以下代码有效：

   var form = $('<form>').attr('action', '/login').attr('method', 'post')
        .append($('<input>').attr('type', 'hidden').attr('name', 'username').attr('value', 'test')
        );
    $('body').append(form);
    form.submit();

然而，当我再添加1个输入时，它不会：

var form = $('<form>').attr('action', '/login').attr('method', 'post')
.append($('<input>').attr('type', 'hidden').attr('name', 'username').attr('value', 'test')
.append($('<input>').attr('type', 'hidden').attr('name', 'password').attr('value', 'password')
);
$('body').append(form);
form.submit();

我在这里做错了什么？如何向表单添加多个输入？

谢谢！

Answer 1

你的代码错了。你没有关闭)追加。

var form = $('<form>').attr('action', '/login').attr('method', 'post')
    .append($('<input>').attr('type', 'text').attr('name', 'username').attr('value', 'test'))
    .append($('<input>').attr('type', 'text').attr('name', 'username').attr('value', 'test'));
    $('body').append(form);

Answer 2

这种情况正在发生，因为您现在正在向输入添加输入。在每次追加后关闭括号或创建表单，然后向其添加输入。

var form = $('<form>').attr('action', '/login').attr('method', 'post');
form.append($('<input>').attr('type', 'hidden').attr('name', 'username').attr('value', 'test'));
form.append($('<input>').attr('type', 'hidden').attr('name', 'password').attr('value', 'password'));
$('body').append(form);
form.submit();

Answer 3

您尝试将第二个输入附加到第一个输入，因为括号错误。而且它们是隐藏的，所以我们暂时将它们改为文本。

var form = $('<form>').attr('action', '/login').attr('method', 'post')
    .append($('<input>').attr('type', 'text').attr('name', 'username').attr('value', 'test'))
    .append($('<input>').attr('type', 'text').attr('name', 'password').attr('value', 'password'));
    $('body').append(form);

但你做的方式并不是特别容易阅读......

$('<form>', {
    'action': '/login',
    'method': 'post'
})
.append($('<input>', {
    'name': 'username',
    'type': 'hidden',
    'value': 'test'
}))
.append($('<input>', {
    'name': 'password',
    'type': 'hidden',
    'value': 'password'
}))
.appendTo('body');

http://jsfiddle.net/gczunre5/

动态jquery表单（添加多个输入）

3 个答案: