Question

我正在尝试构建一个包含以下内容的HTML表单：文本字段 2.选择 3.复选框 4.按钮将1-3添加为另一个表格行，请参阅jFiddle

我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>
        td {
            padding: 10px;
            margin-left:auto;
            margin-right:auto;
        }
    </style>

    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#first").clone(false).removeAttr("id").appendTo($("table"));
            });
        });

    </script>
</head>
<body>
    <div id="wrapper">
        <form>
            <div class="field-section">
                <table>
                    <tr>
                        <th>Field name</th>
                        <th>Field type</th>
                        <th>Required</th>
                    </tr>
                    <tr id="first">
                        <td><input type="text"/></td>
                        <td>
                            <select>
                                <option>Text</option>
                                <option>Email</option>
                            </select>
                        </td>
                        <td><input type="checkbox"></td>
                    </tr>
                </table>
                <button>+</button>
            </div>
            <input type="submit" value="create">
        </form>
    </div>
</body>
</html>

似乎每次点击都会提交表单的问题：
1.如何解决这个问题？
2.从该表发送数据的最佳方法是什么？

Answer 1

由于按钮位于表单内，因此默认为提交按钮，您需要return false或使用点击处理程序中的preventDefault()功能，其中任何一个都会阻止默认操作要触发的元素。

$(document).ready(function(){
    $("button").click(function(){
        $("#first").clone(false).removeAttr("id").appendTo($("table"));
        return false;
    });
});

JSFiddle

要收集数据，只需使用jQuery的serialize()，如果需要通过.ajax发送。

var data = $("#formID").serialize()

serialize将为您提供所有元素的名称 - 值对字符串。

或者使用javascript使用中的字段$("#formId input")和$("#formId select")来捕获所有输入，选择元素。

Answer 2

当按钮处于表单状态时，其默认行为是提交

所以你必须将type="button"添加到按钮

 <button type="button" >+</button>

DEMO

或者

您需要使用return false或使用preventDefault()

$(document).ready(function(){
    $("button").click(function(){
        $("#first").clone(false).removeAttr("id").appendTo($("table"));
        return false;
    });
});

DEMO

jQuery - 动态表单

2 个答案:

或者