Javascript How to use Confirm Dialog Box onSubmit with two submit buttons on JSP

Question

My form currently has two submit buttons. One for Search and the other for a Mark Complete function. I need to show a confirm dialog box ONLY when the "Mark Complete" button is clicked to submit the form with that validation is passed. Is it possible to identify this? I currently have the below confirmComplete function:

function confirmComplete() {
alert("confirmComplete");
var answer=confirm("Are you sure you want to continue");
if (answer==true)
  {
    return true;
  }
else
  {
    return false;
  }
}

Any help would be appreciated!

Sivan

You can use only javascript - set the submits button to be regular buttons type="button" set each one onclick to a different function and if you want to submit the form just use javascript: [form_element].submit(); – Bergstein

I have to keep them as type="submit" due to other functionality that has been put into place. – Sivan

Answer 1

Set the onclick attribute of the "Mark Complete" button to this

 onclick="return confirm('Are you sure you want to continue')" 

and remove the confirmComplete function from the form

Ozonosphere

Answer 2

You can. You can put your buttons like this

<input type="submit" value="Search" />
<input type="submit" value="Mark Complete" onclick="{return confirmComplete();}" />

When Mark Complete button is clicked then the confirmComplete function will be called and when user says OK in the confirm dialog then only the form will be submitted.

Stemson

Answer 3

You need to do the event from the click on the button and not the form submission. There is no crossbrowser way to know what submitted the form.

Raeleneraf

Answer 4

So here is a bypass solution:

<form id="frm" action="page.php" method="post" onsubmit="return onSubmit();">
    <input />
    <input type="submit" value="sub1" onclick="sub1();" />
    <input type="submit" value="sub2" onclick="sub1();" />
</form>
 <script type="text/javascript">
<!--
var frm = document.getElementById('frm');
function onSubmit(){
    return false;
}

function sub1(){
    alert('s1');
    frm.submit();
}

function sub2(){
    alert('s2');

}
 //-->
 </script>

Bergstein

Interesting solution. The return confirm method shown below is the simplest way to do this. – Sivan

Answer 5

when you call "confirm()" javascript pop up function , like onclick="return confirm('Are you sure to proceed?')" ,confirm box get appear with message 'Are you sure to proceed?' with two options 'ok' and 'cancel'.when you click ok it return true and proceed further execution of web page or if you click cancel it will return false and stop further execution of web page.

Thegn

Answer 6

I don't know for an input tag, but it didn't worked for me with the click event directly on a button. In my case, the form was posted right away.

Here's a possible solution for a form with many buttons (for which only one of them must display the confirmation message)

In the view:

<FORM name="F_DESTINATION_DB" id="F_DESTINATION_DB" method="POST" onsubmit="return popConfirmationBox('<?php echo LanguageControler::getGeneralTranslation("DELETE_CONFIRMATION_MESSAGE", "Deleting is an irreversible action. Are you sure that you want to proceed to the deleting?");?> ','DELETE_DB_BUTTON')">

Javascript (in external file for code reuse):

/**
* Display a confirmation message box to validate if we must post the page or not.
*
* @param message String to display
* @param tagId String id of the tag that must display the message.
*
* @return Boolean (confirmation)
*/  
function popConfirmationBox(message, tagId){

    var confirmation = true;

    if (typeof tagId === 'string' && document.activeElement.id.toUpperCase() === tagId.toUpperCase()) {

        if (typeof message === 'string' && message.length > 0) {

            confirmation = window.confirm(message);
        }
    }

    return confirmation;
}

I had quite a hard time to achieve this (needed lot of research and testing), but the resulting code is pretty simple.

By default, I assume that the confirmation is yes (in case the clicked button is not the one meant to display the message or if the user doesn't supply a valid message string).

Additional note: Of course, this code won't do the trick if the user browser block client side code.

I hope it will help someone,

Jonathan Parent-Lévesque from Montreal

Uncoil