单击不同的图像按钮提交表单

Question

我遇到了一个非常奇怪的问题。我有一个带有 3 个图像按钮的 html.beginform：

• 2 个按钮用于添加和删除字段
• 1 提交表格

按钮与 javascript 事件挂钩。现在的问题是，每当我单击添加/删除按钮时，它都会添加/删除一个字段，然后立即提交表单并转到下一页。但是当我使用常规按钮进行添加/删除时，一切正常。

这就像图像按钮执行 javascript 事件，与单击的按钮无关。

Javascript 代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedInput').length; 
        var numCheck = $('.clonedInputCheck').length;
        var newNum = new Number(num + 1);      


        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
        var newElemCheck = $('#inputCheck' + num).clone().attr('id', 'inputCheck' + newNum);

        newElem.children(':eq(0)').attr('id', 'extra' + newNum).attr('name', 'extra' + newNum).val('');
        newElemCheck.children(':eq(1)').attr('id', 'checkVerplicht' + newNum).attr('name', 'checkVerplicht' + newNum).val('');

        if (newNum <= 5) {
            $('#input' + num).after(newElem);
            $('#inputCheck' + num).after(newElemCheck);
        }


        $('#btnDel').attr('disabled', false);
        $('#btnDel').show();

    });

    $('#btnDel').click(function () {
        var num = $('.clonedInput').length; 
        var priceNum = $('.clonedInput').length;
        $('#input' + num).remove();     
        $('#inputCheck' + num).remove();


        $('#btnAdd').attr('disabled', false);


        if (num - 1 == 1) {
            $('#btnDel').attr('disabled', true);
            $('#btnDel').hide();
        }
    });

    $('#btnDel').attr('disabled', true);
    $('#btnDel').hide();

    $("#btnSubmit").click(function () {
        $("#veldenForm").submit();
    });
});

HTML 代码：

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "veldenForm" }))
{
@Html.ValidationSummary(true)


@section Top {
    <h2>1. Kies de nodige velden</h2>
}
<div class="tabel-container">
    <div class="inter-div">
        <div class="velden-tabel">
            <table class="velden">

                @foreach (string var in data)
                {

                    <tr>
                        <td>
                            @Html.CheckBox(var)
                            <label for="Naam">@var</label>
                        </td>
                        <td>
                            @Html.CheckBox("Verplicht" + @var)
                            <label for="Verlpicht">Verplicht veld</label>
                        </td>
                    </tr>

                }

                <tr>
                    <td>
                        <div id="input1" class="clonedInput">

                            @Html.TextBox("extra1")
                        </div>

                    </td>

                    <td>
                        <div id="inputCheck1" class="clonedInputCheck">
                            @Html.CheckBox("checkVerplicht1")

                            <label for="checkVerplicht1" id="labelVerplicht1">Verplicht veld</label>
                        </div>

                    </td>
                </tr>

            </table>
        </div>
    </div>
</div>



<div>
    <input type="image" id="btnAdd" src="~/Images/button_add.png" />
    <input type="image" id="btnDel" src="~/Images/button_remove.png" />
</div>

@section Bottom{

    <input id="btnSubmit" type="image" src="~/Images/navigation_right_button.png" />
}


}

编辑

即使我删除了 javascript 代码，因此添加/删除按钮没有附加任何操作，当单击它们时，它们仍会导航到下一页。

Answer 1

具有图像类型的输入功能类似于提交按钮。您需要取消活动。将您的 javascript 更改为以下内容：

$('#btnAdd').click(function (e) {
    //all the other stuff you were doing here...
    e.preventDefault();
    return false;    
});

对删除按钮单击处理程序进行类似的修改。

Answer 2

你尝试过添加

OnClientClick="return false;"

到你不想回发的两个输入类型的图像。