Class Notes


Forms 2

  1. Getting data from a submitted form
  2. Getting form element values with Javascript

Javascript - getting <form> element values


First, lets create a form with all of the different form element types:

<form name="myForm">
      What is your name?<br />
      <input type="text" name="theName" value="" /><br /><br />

      Do you like pizza?<br />
      <input type="radio" name="pizza" value="yes" /> Yes<br />
      <input type="radio" name="pizza" value="no" /> No<br /><br />

      With what toppings?<br />
      <input type="checkbox" name="toppings" value="mushrooms" /> Mushrooms<br />
      <input type="checkbox" name="toppings" value="olives" /> Olives<br />
      <input type="checkbox" name="toppings" value="chicken" /> Chicken<br /><br />

      How many pizzas do you want?<br />
      <select name="numPizzas" ><br />
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="47">47</option>
      </select><br /><br />

       <input type="submit" name="submit" value="submit" />
</form>

<a href="javascript: alertText();">ALERT TEXT</a><br />
<a href="javascript: alertRadio();">ALERT RADIO BUTTONS</a><br />
<a href="javascript: alertCheckbox();">ALERT CHECK BOXES</a><br />
<a href="javascript: alertSelect();">ALERT SELECT</a><br />


Then, we add the javascript in the head:

<script type="text/javascript">
      function alertText() {
            var theValue = document.myForm.theName.value;
            alert(theValue);
      }

      function alertRadio() {
            for (var i=0; i < document.myForm.pizza.length; i++) {
                  if (document.myForm.pizza[i].checked) {
                        var theValue = document.myForm.pizza[i].value;
                  }
            }
            alert(theValue);
      }

      function alertCheckbox() {
            var theValue = "";
            for (var i=0; i < document.myForm.toppings.length; i++) {
                  if (document.myForm.toppings[i].checked) {
                        theValue = theValue + document.myForm.toppings[i].value + "\n";
                  }
            }
            alert(theValue);
      }

//the selectedIndex is the number of the item that is selected in the pulldown menu. You can also use select.text to get the actual text of the item in the list that was chosen.


      function alertSelect() {
            var select = document.myForm.numPizzas;
            var theValue = select.options[select.selectedIndex].value;
            alert(theValue);
      }

</script>

Instead of using alert to echo back the value, how else could you use the information?

 

Click for an example of the form in action


HOMEWORK DUE


HOMEWORK GIVEN: Proj 3: Concept - One page
Description:
Create a one-page document that has at minimum: One paragraph about the concept. One paragraph about the aesthetics/visuals. One paragraph about the interactivity.
DUE: Today

HOMEWORK GIVEN: Proj 3: Mockup
Description:
Create mockups (images) for three pages of your project. Save them as JPGs and upload them to the class folder - Project3/mockups PRIOR to class.
DUE: Today

HOMEWORK GIVEN: Proj 3: 75 percent done
Description: Upload your 75% completed project(all files, not including PSDS) into the Project3/75_percent folder in the class directory PRIOR to class.
DUE: Oct. 31