Question

在这里，我提交了两种表单：http://jsfiddle.net/sxGtM/4729/，当您提交表单时......数据更改为JSON

$(document).ready(function(){
$("#test").append("<form action='' method='post'> <br>");
$("#test").append("test <input type='radio' name='test' value='test'> <br>");
$("#test").append("<input type='submit'> <br>");
$("#test").append("</form>");
});

第一个是在html中创建的，它运行良好，但第二个是在javascript中创建的，带有追加，当你提交表单时...它什么都不做

你能查看我的代码并给我写一个正确的代码吗？

Answer 1

代码附加问题是将表单元素作为整体附加，即，其余元素将附加在表单元素之后。你得到的html结构是这样的。

<p id="test">
    <form action="" method="post"> <br>
    </form>
        test <input type="radio" name="test" value="test"> <br>
        <input type="submit"> <br>
</p>

因此，使用.html（）方法将html内容整体设置为如下所示。

$(document).ready(function(){
    $("#test").html("<form action='' method='post'> <br> test <input type='radio' name='test' value='test'> <br> <input type='submit'> <br></form>");
});

还有一件事是提交不能绑定到动态创建的元素。所以使用.on（）委托。

代码：

$('body').on('submit','form',function() {
        data = JSON.stringify($(this).serializeObject());
        $('#json').append(data);
        return false;
});

Fiddle

Answer 2

你有几件事情错了......

首先，你附加的html需要完整 - 通过单独附加开始和结束表单标签，dom会将其视为文本。你可能应该考虑立即附加整个表格或将其构建为单独的元素。

其次，在绑定submit方法后附加表单 - 在将表单添加到dom之后需要绑定submit方法 - 再次有很多方法可以执行此操作但是一种简单的方法是拥有一个可以调用来绑定表单的函数。

请参阅：

http://jsfiddle.net/w5anU/1/

$.fn.serializeObject = function(){
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
bindForms();
});

function bindForms() {
        $('form').submit(function() {
        data = JSON.stringify($('form').serializeObject());
        $('#json').append(data);
        return false;
    });
}

$(document).ready(function(){
$("#test").append("<form action='' method='post'> <br>test <input type='radio' name='test' value='test'> <br><input type='submit'> <br></form>");
bindForms();    
});

Answer 3

这是因为以下命令：

$("#test").append("<form action='' method='post'> <br>");

还会立即添加结束标记。

您应该创建一个标记，将其附加到#test，然后将所有其余元素附加到元素。（不是#test元素）

当附加表单提交不起作用

3 个答案: