Question

我正在使用表格来记录费用，使用连接到数据库的HTML和jQuery。

问题是当我点击“添加”按钮时，它应该添加新列，而是自动提交表单。

HTML

<form name="myForm" action="mysql_connection.php" method="post">
    <table>
        <tr>
            <td>Expense     &#160&#160&#160&#160&#160&#160
                            &#160&#160&#160&#160&#160&#160
                            &#160&#160&#160&#160&#160&#160
                            &#160&#160&#160&#160&#160&#160 
                Amount
                <br/>
                <input type="text" name="expense" id="expense" />
                <input type="text" name="amount" id="amount" />
                <br/>

            </td>
            </td>
            <td>
                <button class="add">Add</button>
            </td>
        </tr>
    </table>
    <input type="submit" value="Submit" />
</form>

的jQuery

        $(document).ready(

        function() {
            $('button.add').live('click',

            function() {
                $(this)
                    .closest('tr')
                    .clone()
                    .appendTo('table');
                $(this)
                    .text('Remove')
                    .removeClass('add')
                    .addClass('remove');
            });
            $('button.remove').live('click',

            function() {
                $(this)
                    .closest('tr')
                    .remove();
            });
            $('input:text').each(

            function() {
                var thisName = $(this).attr('name'),
                    thisRrow = $(this)
                        .closest('tr')
                        .index();
                $(this).attr('name', 'row' + thisRow + thisName);
                $(this).attr('id', 'row' + thisRow + thisName);
            });
        });

这是形式
CODE

Answer 1

如果您将<button>元素更改为<button type="button">元素，那么您的解决方案可以正常运行。

JSFiddle

default type for a <button> element is Submit这就是导致表单提交的原因。

Answer 2

            $('button.add').live('click',

            function() {
                $(this)
                    .closest('tr')
                    .clone()
                    .appendTo('table');
                $(this)
                    .text('Remove')
                    .removeClass('add')
                    .addClass('remove');
                return false;
            });

将“return false”添加到点击功能结束

Answer 3

检查链接http://jsfiddle.net/J89TF/1/

使用e.preventDefault();

我认为你应该实施@Nunners解决方案。 B'coz清洁代码。

单击“添加新列”按钮时，表单将自动提交

3 个答案: