Javascript jQuery-动态表单_Javascript_Jquery_Html

Javascript jQuery-动态表单

javascript jquery html

Javascript jQuery-动态表单,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试构建一个包含以下内容的HTML表单： 1.文本框 2.选择 3.复选框 4.按钮将1-3添加为另一个表行，请参见我的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

我的代码：

<!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.从该表发送数据的最佳方式是什么？

由于按钮位于表单中，它默认为提交按钮，因此您需要在单击处理程序中返回false或使用preventDefault函数，其中任何一个都将阻止触发元素的默认操作

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

如果需要通过.ajax发送数据，只需使用jQuery即可

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

或者，要使用javascript中的字段（如$formId input和$formId select）来捕获所有输入，请选择元素。

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

因此，您必须将type=按钮添加到类似于

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

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

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