Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Learning to Use JavaScript in HTML FORMs Instructor: Joseph DiVerdi, Ph.D., MBA

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Controlling FORM Submission Using JavaScript It Is Possible to Control Whether or Not a FORM Is Actually Submitted When a Viewer Presses a Submit Button –Good for Teaching How to Use JavaScript –Great for Verifying FORM Contents

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Basic FORM Example Create a New File Named alert.html –See the Next Slide for Its Contents

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Basic HTML FORM Disk Cleaning Example

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Alert Window Example Displaying an Alert Window –Is a Defined Function In JavaScript Add Alert Window Code to Example –It Is Tightly Integrated into HTML Uses HTML Event Handler ONCLICK –Executed When Viewer Presses a Button Use This Code on Your Site Now –See the Next Slide

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Alert Window Example Disk Cleaning Example <INPUT TYPE=BUTTON VALUE="Erase Your Hard Disk" ONCLICK="window.alert('You are pretty brave.')" >

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Alert Window Example Notice The Lack of the Use of a Contraction in the Alert Window String window.alert('You are pretty brave.') Using a Contraction Requires an Apostrophe –Which Screws up the String Container window.alert('You're pretty brave.') Use an Escaped Apostrophe to Include It –Escape It Using a Preceding Backslash window.alert('You\'re pretty brave.') Use This Code on Your Site Now –Modify alert.html With This Snappy Addition

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Alert Window Example Disk Cleaning Example <INPUT TYPE=BUTTON VALUE="Erase Your Hard Disk" ONCLICK="window.alert('You\'re pretty brave.')" >

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Confirm Window Example Another Helpful Defined Function Is –Confirm Window Provides the User With Choice of Answers –OK & Cancel Uses HTML Event Handler ONCLICK Use This Code on Your Site Now –Create a new file named confirm.html –Copy alert.html To confirm.html & Modify It –See the Next Slide

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Confirm Window Example Disk Cleaning Example <INPUT TYPE=BUTTON VALUE="Erase Your Hard Disk" ONCLICK="window.confirm('You\'re pretty brave.')" >

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Useful Confirm Window Example Doesn't Utilize Viewer's Response –Nice of Us to Ask Anyway Let's Set Up To Make Use Of The Response Use This Code on Your Site Now –Create a new file named use_confirm.html –See the Next Slide

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Useful Confirm Window Send Example Test This With Your Browser –You Should See A Security-Minded Pop-Up Window –Don't Send The

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Useful Confirm Window Now Add Event Handler & JavaScript To Control Browser Use This Code on Your Site Now –Use use_confirm.html –See the Next Slide

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Useful Confirm Window Send Example <FORM ONSUBMIT="return false"> Test This With Your Browser –It Should Never Send

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Useful Confirm Window Send Example <FORM ONSUBMIT="return true"> Test This With Your Browser –It Should Always Send –Don't Send The

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Confirm Window Example window.confirm Function Returns a Value –Dependent on Viewer's Response OK returns true Cancel returns false Use Function Result To Control Browser Use This Code on Your Site Now –Use use_confirm.html –See the Next Slide

Using JavaScript in FORMs Fort Collins, CO Copyright © XTR Systems, LLC Useful Confirm Window Send Example <FORM ONSUBMIT="return window.confirm('Are you sure?')" >