Basic JavaScript Form Validation with Dependencies and Checkbox Handling

1. Javascript Forms: Dependencies and Validation

2. Basic Form • Let’s start with a basic html form where a user: • Enters their name into a text box • Then clicks the submit button to proceed • We will gather their input then • We will make sure that it is not empty

3. Basic Form <form action="forms1.html" method="post“ onsubmit="checkForm()"> <h1>Enter your name</h1> <p>First Name: <input type="text" id=“first_name” name="first_name" /></p> <p><input type="submit" name="submit" value="click!" /></p> </form>

4. Basic Form <form action="forms1.html" method="post" onsubmit="checkForm()"> <h1>Enter your name</h1> <p>First Name: <input type="text“ id=“first_name” name=“first_name" /></p> <p><input type="submit" name="submit" value="click!" /></p> </form> <form action="forms1.html" method="post" onsubmit="checkForm()">

5. Basic Form action specifies the next page to go to if the form was properly validated <form action="forms1.html" method="post" onsubmit="checkForm()"> <h1>Enter your name</h1> <p>First Name: <input type="text“ id=“first_name” name=“first_name" /></p> <p><input type="submit" name="submit" value="click!" /></p> </form> <form action="forms1.html" method="post" onsubmit="checkForm()">

6. Basic Form This method is called when the submit button is clicked <form action="forms1.html" method="post" onsubmit="checkForm()"> <h1>Enter your name</h1> <p>First Name: <input type="text“ id=“first_name” name=“first_name" /></p> <p><input type="submit" name="submit" value="click!" /></p> </form> <form action="forms1.html" method="post" onsubmit="checkForm()">

7. Basic Form <form action="forms1.html" method="post" onsubmit="checkForm()"> <h1>Enter your name</h1> <p>First Name: <input type="text“ id=“first_name” name=“first_name" /></p> <p><input type="submit" name="submit" value="click!" /></p> </form> You need to give id’s to your variables because this is how we will access them on the client side You need to name your variables because this is how we will access them on the server side

8. First we create a checkForm Function <script type=“text/javascript”> function checkForm() { document.write(“in the check form function”); } </script> <form action="forms1.html" method="post" onsubmit="checkForm()"> <h1>Enter your name</h1> <p>First Name: <input type="text“ id=“first_name” name=“first_name" /></p> <p><input type="submit" name="submit" value="click!" /></p> </form>

9. Then we access the text box <script type=“text/javascript”> function checkForm() { firstName = document.getElementById(“first_name”).value; document.write(“first name is “ + firstName); } </script> <form action="forms1.html" method="post" onsubmit="checkForm()"> <h1>Enter your name</h1> <p>First Name: <input type="text" id=“first_name” name="first_name" /></p> <p><input type="submit" name="submit" value="click!" /></p> </form>

10. Now we make sure the name is valid <script type=“text/javascript”> function checkForm() { firstName = document.getElementById(“first_name”).value; if(firstName == null || firstName ==“”) { document.write(“invalid data!”); document.close(); return false; } else { document.write(“Welcome “ + firstName); document.close(); return true; } </script>

11. Checkboxes

12. Checkbox <form action="check_succeeded.html" method="post" onsubmit="checkForm()"> <h1>Do you agree?</h1> <input type="checkbox“ id=“terms” name="terms" /> I agree to the terms and conditions <p><input type="submit" name="submit" value="click me!" /></p> </form>

13. .checked • We use the ‘.checked’ property on the checkbox. • It returns true or false to indicate if the checkbox was checked or not. varagreeToTerms = document.getElementById(“terms”).checked; checkbox Id

14. Using the Checked Property function checkForm() { varagreeToTerms = document.getElementById(“terms”).checked; if(agreeToTerms){ return true; } else { document.write("You didn't agree to the terms and conditions"); document.close(); return false; } }

15. return true or false • Returning true from the click handling function makes the form take the action. Navigate to the success page. • Returning false makes the user stay on the same page.

16. Radio Buttons

17. Radio buttons in a form <form id=“radio_form” action="forms_radio.html" method="post" onsubmit="checkForm()"> <h1></h1>Choose your food:</h1><br/> <input type="radio" name="foods" value="ice cream" />Ice Cream <br /> <input type="radio" name="foods" value="strawberries" />Strawberries <br /> <input type="radio" name="foods" value="yogurt" />Yogurt <br /> <p><input type="submit" name="submit" value="click me!" /></p> </form> Notice all the buttons get the same name

18. checked property • The button that’s clicked will have the ‘checked’ property as true. • We will gather the array of items then check if one of them was checked var foods = document.getElementById(“radio_form”).foods; radio buttons name

19. function checkForm() { var foods = document.getElementById(“radio_form”).foods; if(foods[0].checked == false && foods[1].checked == false && foods[2].checked == false) { document.write("You didn't pick a food!"); document.close(); return false; } //now determine the choice and display a message accordingly if(foods[0].checked) { document.write("Ice Cream is a lovely choice"); } else if(foods[1].checked) { document.write("mmmmmmm.... strawberries"); } else { document.write("yogurt is full of bacteria!"); } document.close(); }

20. Dropdowns

21. DropDowns in a form <form action="forms_drop_down.html" method="post" onsubmit="checkForm()"> <select name="cities“ id=“cities”> <option>Select a City</option> <option>Seattle</option> <option>Olympia</option> <option>Tacoma</option> </select> <p><input type="submit" name="submit" value="click me!" /></p> </form>

22. Selected Index • Tells you the index of the selected item. • You can think of the options as array items and the index corresponds to it’s place in the list.

23. Let’s do it • So we’ll make a little program where if they selected the first option we will give them an error: • ‘please select a city’

24. <script type="text/javascript"> function checkForm() { if(document.getElementById(“cities”).selectedIndex== 0) { document.write("Please select a city!"); document.close(); } } </script> <form action="forms_drop_down.html" method="post" onsubmit="checkForm()"> <select name="cities“ id=“cities”> <option>Select a City</option> <option>Seattle</option> <option>Olympia</option> <option>Tachoma</option> </select> <p><input type="submit" name="submit" value="click me!" /></p> </form>

25. Disabling Elements

26. Disabling Elements • We can disable form elements simply by setting their ‘.disabled’ property to true: document.getElementById(“cities”).disabled = true;

27. OnChange Change the display when the state of an element changes

28. Calling function onChange <form action="dependent_forms.html" method="post"> <p>Select a State: <select name="states“ id=“states” onchange="changeCities(this.selectedIndex)"> <option>Washington</option> <option>Flordia</option> <option>Texas</option> </select> </p> <p>Select a City: <select name="cities“ id=“cities”> </select> </p> </form> Index of the selected option

29. Now populate cities dependent on state var cities = new Array(); cities[0] = new Array("Olympia", "Seattle", "Tachoma"); cities[1] = new Array("Miami", "Orlando", "Sarasota") cities[2] = new Array("Austin", "Dalas", "Houston"); /* * Update what is it the cities dropdown based on teh selected state */ function changeCities(index) { varstatesCities = cities[index]; for (i in statesCities) { document.getElementById(“cities”).options[i] = new Option(statesCities[i], i) } } Determine the index of the state we want to display cities of Populate the options

30. Put default in onLoad • Now when the form is loaded we will display the cities for the default state: window.onload= function(){ changeCities(0); };