How can I create a confirmation box in ColdFusion?

[Haitashi]

I had the following code that would create a javascript confirmation page. This code lived inside a form which wouldn't submit until the user clicked the Ok button.

<input type="image" onclick="return confirm('You will not be able to change your answers if you submit now.\nAre you sure you want to submit this test?');" name="SubmitTestButton" src="images/submit_test.jpg" value="Submit Test" class="submit_test_button" />

I've bee trying to achieve the same effect using CFWINDOW. Only, once the window comes up the form automatically submits.

Current code:

        <form name="TestForm" [...]>
 [OTHER CODE]
 
                <p><input type="image" onclick="ColdFusion.Window.show('submitTest')" name="SubmitTestButton" src="images/submit_test.jpg" value="Submit Test" class="submit_test_button" /></p>
            </cfif>
        </form>
 
        <cfwindow name="submitTest"
            center="true"
            closable="true"
            draggable="false"
            height="200"
            width="200"
            initShow="false"
            modal="true"
            refreshOnShow="false"
            resizable="false">
                    <cfoutput>
                        <p>You will not be able to change your answers if you submit now. </p><p>Are you sure you want to submit this test?</p>
                        <input type="image" name="SubmitTestButton" src="images/submit_test.jpg" value="Yes, Please Sumbit" class="submit_test_button" /></p>
 
                    </cfoutput>
        </cfwindow>

I've been trying to figure out a way to create a coldfusion confirmation box, essentially. Any help or direction will be appreciated. I will post back the final code for reference.

[acoder]

If it's just an image button, why does it submit?

You need to return true or false to control the form submission, but cfwindow doesn't return anything, but what you can do is use the Coldfusion.Window.onHide function to define a function to run when the window is "closed".

[Haitashi]

What you're saying makes sense but what if after clicking submit, they get that box and they decide they don't want to submit after all - if they close the window then it would still submit, wouldn't it?

[acoder]

Not quite. If, for example, you return false when calling from onsubmit, the form will not submit.

[Haitashi]

Ok. I did something based off what you said. I did implement some javascript, though.

<form name="ParentForm" id="ParentForm" action="action.cfm" method="post">
 
    <input type="hidden" name="TestFormField" value="booyah" />
    <input type="submit" value="Submit the Parent Form" onclick="showCfWindowConfirm(); return false;" />
 
</form>
 
<script type="text/javascript">
    function showCfWindowConfirm() {
        ColdFusion.Window.show('cfwinconfirm');
    }
 
    function hideCfWindowConfirm() {
        ColdFusion.Window.hide('cfwinconfirm')
    }
 
    function hideAndSubmit(cfwindowname,formID) {
        ColdFusion.Window.hide(cfwindowname)
        document.getElementById(formID).submit();
    }
</script>
 
<cfwindow initShow="false" title="Confirm" name="cfwinconfirm" modal="true" center="true" source="confirm.cfm" width="300" height="150"/>

and in confirm.cfm:

<a href="" onclick="hideAndSubmit('cfwinconfirm','ParentForm'); return false;">Confirm</a>
<a href="" onclick="hideCfWindowConfirm(); return false;">Cancel</a>

Note: this is the the skeleton of what I did just for demonstration purposes. It does not reflect how the scripts and files were placed in my actual application.

As always, I really appreciate the help!

[acoder]

That seems about right.

If you wanted to really get fancy, you could try replacing the confirm dialog with a cfwindow dialog, though you may need to extend it to return values.

[Haitashi]

I am using cfwindow. =) This is the cfwindow code that I have in place of what is written at line 23 above.

         <cfajaximport cssSrc="styles/cfskins/" />        
        <cfwindow name="cfwinconfirm"
            center="true"
            closable="true"
            draggable="false"
            height="200"
            width="380"
            initShow="false"
            modal="true"
            resizable="false">
                <cfoutput>
                    <span class="test_confirmation_window">
                    <p>    You will not be able to change your answers if you submit now. </p><p>Are you sure you want to submit this test?</p>
                    <p>    <input type="image" onclick="hideAndSubmit('cfwinconfirm','TestForm'); return false;" name="confirmSubmit"  src="images/submit_button.gif" class="confirmation_test_button" />
                        <input type="image" onclick="hideCfWindowConfirm(); return false;" name="cancel" src="images/cancel_button.gif" class="confirmation_test_button" />
                    </p>
                    </span>
                </cfoutput>
        </cfwindow>

[acoder]

Nice. Thanks for posting and glad to see that you've got a working solution.