[HTML+JS] Form Validation + Get Value

Admin Posts : 92 Join date : 09/04/2012

Code:: <html>
<head>
   <title>Lab 5A - JDA</title>

   <style>
      body{
         font-family: Arial;
      }
   </style>

</head>

<body>
   <h3>Tell me about my site! thanks..</h3>
   <br>
   <form onsubmit="submitx();" name="theForm">

   <script>
                  function submitx()
                  {
                     var t1 = document.getElementById('myname').value;
                     var t2 = document.getElementById('q6').value;
                     //var t12 = document.getElementById('password').value;
                     var e = document.getElementById("gender");
var strUser = e.options[e.selectedIndex].text;
                     alert(t1 + " " + getValueRadio('q3a') + "\n" + strUser+ "\n" +t2);

                  }


                  function getValueRadio(radioName){
                     var radios = document.getElementsByName(radioName);
                     for (var i = 0, length = radios.length; i < length; i++) {
                        if (radios[i].checked) {
                           // do whatever you want with the checked radio
                           //alert(radios[i].value);
                           return radios[i].value;
                           // only one radio can be logically checked, don't check the rest
                           break;
                        }
                     }
                  }
               </script>
      *Name: <input type="text" name="myname" id="myname" value="first/second name, last name"> <br >

      Gender:
      <select name="gender" id="gender">
         <option>F</option>
         <option>M</option>
      </select> <br>

      Country:
      <select>
         <option>-select one-</option>
         <option>Philippines</option>
      </select> <br>

      <em>*this field is required.</em> <br />

      How do you find my web page?
      <ol>
      <br>
         <li>
            How easy did you find it to navigate and find information? <br>

               <table border = "1">
                  <tr>
                     <td></td>
                     <td>Very Easy</td>
                     <td>Easy</td>
                     <td>Average</td>
                     <td>Hard</td>
                     <td>Very Hard</td>
                  </tr>
                  <tr>
                     <td align = "left">To navigate the site:</td>
                     <td align ="center"><input type = "radio" value="Very Easy" name="q3a"></td>
                     <td align ="center"><input type = "radio" value="Easy" name="q3a"></td>
                     <td align ="center"><input type = "radio" value="Average" name="q3a"></td>
                     <td align ="center"><input type = "radio" value="Hard" name="q3a"></td>
                     <td align ="center"><input type = "radio" value="Very Hard" name="q3a"></td>
                  </tr>
                  <tr>
                     <td align = "left">To find needed information:</td>
                     <td align ="center"><input type = "radio" value="Very Easy" name="q3b"></td>
                     <td align ="center"><input type = "radio" value="Easy" name="q3b"></td>
                     <td align ="center"><input type = "radio" value="Average" name="q3b"></td>
                     <td align ="center"><input type = "radio" value="Hard" name="q3b"></td>
                     <td align ="center"><input type = "radio" value="Very Hard" name="q3b"></td>
                  </tr>
               </table>
         </li>
      <br>
         <li>
            Overall, now would you rate the graphics and look of the site?<br>
            <input type="radio" value="Excellent" name="q4">Excellent<br>
            <input type="radio" value="Good" name="q4">Good<br>
            <input type="radio" value="Poor" name="q4">Poor<br>
            <input type="radio" value="Very Good" name="q4">Very Good<br>
            <input type="radio" value="Fair" name="q4">Fair<br>
         </li>
      <br>

         <li>
         What did you like about the site?<br>
         <textarea cols="150" rows="4" name="q6" id="q6"></textarea>
         </li>
      <br>

         <li>
            Your contact information. (optional)<br>
            Email Address: <input type="text" name="q8mail" > <br >
            Mobile Number: <input type="text" name="q8mobile" > <input type="button" value="Submit" onclick="submitx()">
         </li>
      </ol>
   </form>
</body>

</html>

» Drag Form without title bar
» [JS]Simple Javascript Form Alert
» Starting Up with HTML
» [HTML] Web Forms
» HTML Laboratory Activity [Table]