JavaScript, Third Edition 1 SELECTION LIST Demo

JavaScript, Third Edition 2 Description This web page will edit the slection to ensure an option was chosen. If not, the an alert box will be displayed, otherwise the form will be submitted. This demo shows the following: –The proper coding of the tag –The proper coding of the formfield (in this case, the button) –The capturing of the submit buttons click event –The definition of a function –The execution of the function

JavaScript, Third Edition 3 <!-- HTML COMMENT WILL HIDE FROM INCOMPATIBLE BROWSERS function editFormData() { } // STOP HIDING FROM INCOMPATIBLE BROWSERS --> Create the structural code for the function inside the script tag. Name the function :

JavaScript, Third Edition 4 function editFormData() { if (document.forms[0].lstPet.selectedIndex < 1) { window.alert("Please check which pet you would like to have!") return false; } else { if (document.forms[0].lstPet.options[1].selected == true) { window.alert ("You have a dog!"); return true; } else { window.alert ("You have a cat!"); return true; } The logic in the function to verify a selection was made

JavaScript, Third Edition 5 <!-- HTML COMMENT WILL HIDE FROM INCOMPATIBLE BROWSERS function editFormData () { ….. // STOP HIDING FROM INCOMPATIBLE BROWSERS --> Add an HTML form tag pair the web page.

JavaScript, Third Edition 6 <!-- HTML COMMENT WILL HIDE FROM INCOMPATIBLE BROWSERS function editFormData () { … } // STOP HIDING FROM INCOMPATIBLE BROWSERS --> Pick your pet Select a Pet Dog Cat Add an HTML SUBMIT button to the web page. When its onclick event occurs, execute the function editFormData()

JavaScript, Third Edition 7 How it works… From formProcessor.html when form is submitted If cat selected If dog selected

JavaScript, Third Edition 8 CODE Select function editFormData() { if (document.forms[0].lstPet.selectedIndex == 0) { alert("Please check which pet you have or would like to have!") return false; } else { if (document.forms[0].lstPet.options[1].selected == true) { alert ("You have a dog!"); return true; } else { alert ("You have a cat!"); return true; } CONTINUED ON NEXT SLIDE

JavaScript, Third Edition 9 CODE Editing a Select Pick your pet Select a Pet Dog Cat