Question

我在HTML表单中有2个提交按钮。

我如何知道哪个提交按钮触发了JavaScript功能？

<script language="javascript" type="text/javascript">
    function verifyData(formdata) {

        // Here I want to know from which submit button this function is triggered

        // I can't use type button instead of submit

        // I can't use onclick handler

        //  I can't use JQuery.. I want to do only with                 javascript                        

    }
</script>

<form onsubmit="verifyData(this);" method="post">
    <input type="submit" value="submit1">
    <input type="submit" value="submit2">
</form>

<button value="delete row" id="but1" onclick="disps()">delete row</button>

我想根据点击的不同提交按钮执行不同的操作。

Answer 1

无法检查通过onsubmit事件单击的按钮。而是将调用移至verifyData()到每个按钮的onclick处理程序。如果return

返回false，请在onclick调用中使用verifyData()取消提交

<script language="javascript" type="text/javascript">
    function verifyData(button) {
        // validate
        switch (button.value) {
            case "submit1":
                // do somehting
                break;
            case "submit2":
                // do somehting
                break;

            // ...
        };

        // submit the form
        return true;
    }
</script>

<form method="post">
    <input type="submit" value="submit1" onclick="return verifyData(this);">
    <input type="submit" value="submit2" onclick="return verifyData(this);">
</form>

Answer 2

如何在两个按钮上放置onclick事件处理程序，这将设置一个变量来说明单击了哪个按钮？像这样：

<script language="javascript" type="text/javascript">
    function verifyData(formdata) {
        alert(btnClicked);
        // Here I want to know from which submit button this function is triggered

        // I can't use type button instead of submit

    }

    var btnClicked = 0;


    function setSubmit(which) {
        btnClicked = which;  return true;
    }
</script>

<form onsubmit="verifyData(this);" method="post">
    <input type="submit" value="submit1" onclick="return setSubmit(1);">
    <input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>

Answer 3

您是否可以使用jQuery库？

如果您可以使用此功能，则可以根据id轻松绑定到每个提交按钮。

例如：

<form id="form1" method="post">
    <input type="submit" value="submit1" id="submit1">
    <input type="submit" value="submit2" id="submit2" >
</form>

<script type="text/javascript">
    $("#submit1").click(function(e)
    {
     // Do stuff when 1 is clicked.
     $("#form1").submit();
    });
    $("#submit2").click(function(e)
    {
     // Do stuff when 2 is clicked.
     $("#form1").submit();
    });    
</script>

您还可以将按钮设置为button类型，以避免出现任何问题，但您应该只需return false;即可停止submit类型的按钮...提交

Answer 4

以下是我将如何做...首先我会使用jQuery，所以你必须在你的文档中包含这样的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

这也意味着您的HTML可以简化为：

<form method="post">
    <input type="submit" value="submit1"/>
    <input type="submit" value="submit2"/>
</form>

然后你可以使用jQuery：

<script>
    // When the document is ready
    $(function(){
        // Action performed when a submit button in the form is clicked
        $("form[type='submit']").click(function(e){

            // Get the value attribute
            var val = $(this).val(),
            validation_has_passed = false;

            // If it is submit1
            if(val == "submit1") {
                // Validate submit 1
                validation_has_passed = true;

            // If it is submit2
            } else if(val == "submit2") {
                // Validate submit 2
                validation_has_passed = true;

            }

            // If all validation is OK submit the form
            if(validation_has_passed === true) {
                $("form").submit();
            }

            // Ensure pressing these buttons doesn't submit the form
            e.preventDefault();

        });
    });
</script>

带有多个提交按钮的html表单

4 个答案: