We help IT Professionals succeed at work.

customized confirmation message box

I have a customized confirmation message box that pops up when a cfform is submitted.  My code is below.  My problem is the code doesn't wait for the user to confirm the submission.  The message box pops up temporarily and then the form is submitted without the user selecting a button.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<script  type="text/javascript">
    //Function to show results of other message boxes.
    var showResult2 = function(btn){
            if (btn == 'yes'){
        alert("You clicked Agree button: "+btn);
            }
            else{
        alert("You clicked Cancel button: "+btn);
            }
    }
 
    //The button onClick handler displays the message boxes.
    function showMB(mbox)  {
        ColdFusion.MessageBox.show(mbox);
    }
</script>
</head>
 
<body>
<cfform name="dg" action="test.cfm">
    <p>Click a button display the corresponding message box.</p>
    <cfinput name="Prompt" type="submit" value="Submit" onclick="showMB('mymessagebox02')">
</cfform>
 
<!--- Code to define the message boxes. --->                    
<cfmessagebox name="mymessagebox02" bodystyle="font-family: Arial, Helvetica, sans-serif" type="confirm" title="Warning:"  
        message="Are you sure you want to proceed?"  
        labelNO="Cancel" labelYES="Agree"
        callbackhandler="showResult2"/>
 
     
</body>
</html>
Comment
Watch Question

CERTIFIED EXPERT

Commented:
The problem is that you are actually submiting the form with your input tag called "Prompt".. that should be changed from type submit to type button.

Then in your pop up message, when the user agrees, that button press action should submit the form..

Author

Commented:
Changing the input type to button instead of submit stopped the form from submitting, but now how do I submit the form?  Currently I see my temporary alert that tells me what button was pressed.  What should I replace the alert with to submit the form?
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
(no points...)

Like gd mentioned, change your callback function to submit the form. So replace the temporary alter with something like

var showResult2 = function(btn){
          if (btn == 'yes'){
               // note, I added an "ID" to your cfform
               document.getElementById('yourFormID').submit();
          }
}

<cfform id="yourFormID" name="dg" action="test.cfm">
     ....

Author

Commented:
Thank you, that worked perfectly.
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
curtis247 - I appreciate the points, but in fairness I think it should at least be a split since gd correctly explained why it wasn't working and how to fix it. I just provided a code snippet to illustrate his explanation.  If you're amenable, you can use the request attention and ask a moderator to reopen the question so you can reallocate.

Author

Commented:
I agree. Sorry for the mistake.  I will correct as soon as possible.
CERTIFIED EXPERT

Commented:
Thanks to both of you !
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Thanks curtis!