JavaScript's confirm() Method and Forms 2: WebReference.com | WebReference

JavaScript's confirm() Method and Forms 2: WebReference.com


JavaScript's confirm() Method With Form Submission

Is That Your Final Answer?

Now, lets see how we can use the confirm() method to let our users decide whether they really wanted to submit that form, or if they would be wise to take one more look at what they entered.

In this example we use the confirm() method to display a dialog box to the user. If the user clicks 'Ok', the method returns true; if the user click 'Cancel', the method returns false. That functionality is built into JavaScript, and the browser takes care of popping up the dialog box, so it's really quite easy. You do get to decide what you ask the user; you don't get to decide what text the buttons have on them. 

<HTML>
<HEAD>
<TITLE>Confirm Dialog Test</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
function verify(){
    msg = "Are you absolutely sure that you want to submit this form?";
    //all we have to do is return the return value of the confirm() method
    return confirm(msg);
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="https://www.webreference.com" onSubmit="return verify()">
    Name: <INPUT TYPE=TEXT NAME="myName" size=30><BR>
          <INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
</BODY>
</HTML>

See the Example

Note that we hardly had to include any logic in the body of the validation function. The confirm() method returns true or false, based on the whether or not the user clicks 'OK'. Then we return whatever the confirm() method returns as the return value of the function. Recall from our first example that the 'return' keyword in the onSubmit event-handler places the submission of the form in the hands of the return value of the function.

Practically Done

In our final example, we'll try something a little more practical: displaying the contents of the form fields in the dialog box in order to give the user one last chance to inspect whatever he or she entered into the form. Many developers already do this with a separate confirmation page, displayed in HTML by the server. But JavaScript can do this much faster, as you'll soon see. 

<HTML>
<HEAD>
<TITLE>Confirm Dialog Test</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
function verify(){
       //we get the values in the form out of the 0 index in the forms[] array since it's the only form in the document
       msg = "Please Verify the Information you Entered: \n\n Name: " + document.forms[0].myName.value + "\n Age: " + document.forms[0].myAge.value + "\n\n If this information is correct, click 'OK'"
       return confirm(msg);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM ACTION="https://www.webreference.com" onSubmit="return verify()">
    Name: <INPUT TYPE=TEXT NAME="myName" size=30><BR>
    Age:  <INPUT TYPE=TEXT NAME="myAge" size=2><BR>
          <INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
</BODY>
</HTML>

See the Example

Here we display the value of the form contents by accessing the forms[] array of the document object (document.forms[0]), and the referring to the fields by their name attribute. We access the [0] index because it's the only form in the document. If you more than one, you would use the appropriate index.

If You Understand Now, Click OK

That's all there is to it! JavaScript provides a clean, easy, and fast way of interacting with the user and confirming the submission of the form, in addition to numerous other form-validation functions. JavaScript handles such functions so well, in fact, that you might begin to wonder if that's the very reason Netscape created it in the first place. Hmmm.

Previous Page: Submission Hold


https://www.internet.com

Comments are welcome
Written by Steve Mai and

Revised: December 7, 2000

URL: https://webreference.com/programming/javascript/confirm/2.html