如何根据按钮单击的条件弹出一个消息框？

Question

有一个包含两个按钮的表单。 然后，我想当我单击不同的按钮时，将弹出一个相关的消息框。 单击该按钮后，将触发称为“批准”的其他操作。

但是，在当前情况下，警报框仅显示一种状态。 我知道当前状态正在获取相同的ID，这是错误的操作。 但是我现在不知道解决方案。 有人可以帮我吗？

我调查了这个参考： Form onSubmit确定按下了哪个提交按钮 ，但不太了解解决方案提供的概念。

<script type="text/javascript" language="javascript"> 

function ConfirmOnDelete() {

    var a = document.getElementById('a_action').value; //I want to change this
    if (a == "Approve")
    {
        if (confirm("Are you sure to approve?") == true)
            return true;
        else
            return false;
    }
    else
    {
        if (confirm("Are you sure to delete?") == true)
            return true;
        else
            return false;
    }
}
</script>
<form id="Batch" action="Approval" method="post" onsubmit="return ConfirmOnDelete();">      
        @<text>               


            @If ViewBag.unapprovedCount > 0 Then
                @<div style="float: left;">
                    <br />                       
                    <input type="hidden" name="batch_action" value="Delete" />
                    <input type="hidden" id="a_action" name="additional_action" value="Delete" />
                    <input type="submit" id="submit4" name="submit" class="button" value="Delete" style="width:100px;">
                </div>
            End If


            @If ViewBag.unapprovedCount > 0 Then                
                @<div style="float: right;">
                    <br />                       
                    <input type="hidden" name="batch_action" value="Approve" />
                    <input type="hidden" id="a_action2" name="additional_action" value="Approve" />
                    <input type="submit" id="submit3" name="submit" class="button" value="@ViewBag.batch_action" style="width:100px;">
                </div>
            End If

        </text>        
</form>

Answer 1

注意您的代码中添加了{和} 。 这是javascript if语句的正确语法。

更新

您希望根据提交来自哪个按钮ConfirmOnDelete()批准或删除ConfirmOnDelete()来调用ConfirmOnDelete() 。 原谅我使用jQuery

 $("#Batch").on("submit", function() { // Does the element have focus: var hasApproveFocus = $("input[id='submit3']").is(':focus'); var hasDeleteFocus = $("input[id='submit4']").is(':focus'); //checking which of the submit button has focus to determine which was click on submit if (hasApproveFocus == true) { if (confirm("Are you sure to approve?") == true) { return true; } else { return false; } } else if (hasDeleteFocus == true){ if (confirm("Are you sure to delete?") == true) { return true; } else { return false; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <form id="Batch" action="Approval" method="post"> <div style="float: left;"> <input type="submit" id="submit4" name="submit" class="button" value="Delete" style="width:100px;"> </div> <div style="float: right;"> <br /> <input type="submit" id="submit3" name="submit" class="button" value="Approve" style="width:100px;"> </div> </form> 

Answer 2

之所以只得到一种状态，是因为var a = document.getElementById('a_action').value; //get by Button click var a = document.getElementById('a_action').value; //get by Button click获取，将根据ID检索值。 ID应该是唯一的，但是您的两个输入都具有id a_action 。 因此， getElementById仅返回第一个值，在本例中为Delete 。

您可以执行以下操作

您可以在按钮上进行绑定，然后将操作作为参数传递，而不是在表单上绑定“ ConfirmOnDelete”。

看到这个小提琴https://jsfiddle.net/j3rvter5/1/

Answer 3

在您的#a_action元素上，您可以添加data-*属性并做一些魔术 。

<input type="hidden" id="a_action" name="additional_action" value="Delete" data-value="Approve" />

注意最后它说data-value="Approve" 。 现在，您可以像这样获取该值：

var a = document.getElementById('a_action').getAttribute('data-value');

并检查该值是否等于某个值，就像您的示例一样。

if (a == "Approve") {
    //This would be true in this example, as data-value == "Approve"
}

这是您要找的吗？

Answer 4

这是我实现的解决方案。

<script type="text/javascript">
function question_submit(input) {

    if (input == 1)
    {
        if (confirm('Are you sure you want to delete?')) {
            document.getElementById("action").value = "Delete";

            $('#Batch').submit();
        }
        else {
            alert('You have not submitted this form');
        }
    }
    else {
        if (confirm('Are you sure you want to approve?')) {
            document.getElementById("action").value = "Approve";
            $('#Batch').submit();
        }
        else {
            alert('You have not submitted this form');
        }
    }
}
</script>

<form id="Batch" name="myform" action="BatchApproval" method="post" >
    <input id="action" type="hidden" name="batch_action" /> 
    <div style="float: left;">
    <br />                      
    <input type="button" id="submit4" name="submit4" class="button" value="Delete" style="width:100px;" onclick="question_submit(1)">
                </div>

   <div style="float: right;">
   <br />                                  
   <input type="button" id="submit3" name="submit3" class="button" value="Approve" style="width:100px;" onclick="question_submit(2)">
   </div>

</form>