当我单击添加新列按钮时，表单会自动提交

Form getting auto submit when i click add new column button

本文关键字：表单 提交 单击 添加 新列 按钮      更新时间：2023-09-26

我正在研究一个用于保存费用记录的表单，使用连接到数据库的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);
            });
        });

这是表格
法典

如果将

<button>元素更改为<button type="button">元素，则解决方案可以正常工作。

JSFiddle

<button>元素的默认类型是Submit，因此这就是它导致表单提交的原因。

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

在点击结束功能中添加"返回假"

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

使用e.preventDefault();

我认为您应该实施@Nunners解决方案。B'coz 它的干净代码。

相关文章：