How can I pop up a message box according to the button-clicked condition?

Question

There is a form containing two buttons. And then I suppose that when I click different buttons, a relevant message box will be popped up. Once the button is clicked, it will trigger a further action called "Approval".

However, at the current situation, the alert box only shows one status. I know the current status are getting the same ID and it is a wrong operation. But I don't know the solution now. Could anyone help me?

I looked into this ref: Form onSubmit determine which submit button was pressed, but could not quite understand the concept the solution provided.

<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

notice the addition of { and }in your code. that's the correct syntax for javascript if statement.

UPDATE

you want to call the ConfirmOnDelete()depending on which button the from was submitted with, either the approve or delete. forgive me for using 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

The reason you are only getting one status is because var a = document.getElementById('a_action').value; //get by Button click retrieves the value based on ID. ID should be unique, but both of your inputs have the id a_action. So the getElementById only returns the first value, in this case that is Delete.

What you can do is the following

Instead of binding `ConfirmOnDelete' on the form, you can bind in on the buttons and pass the action as an argument.

See this fiddle https://jsfiddle.net/j3rvter5/1/

Answer 3

On your #a_action element, you can add a data-* attribute and do some magic.

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

Notice at the end it says data-value="Approve". Now you can grab that value like this:

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

And check if the value is equal to something, just like in your example.

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

Was this was you were looking for?

Answer 4

This is the solution I achieved.

<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>