Loading Profile...
Help with Javascript Task - DOM
I am not very proficient in Javascript but I need to create a cross-browser (works in Firefox and MS IE) input screen that takes in a user’s information for an order via the following:
Full Name (text field)
Address (textarea)
Gender (radio button)
Date of birth (three dropdown lists – day, month, year)
“Send me newsletter” (checkbox)
Hidden total value for order (hidden field)
“Submit Order” button (button).
When the user is done inputting the info, I need to validate using the rules below:
At least 3 characters required in name
Must be over 18 years old
Gender must be selected
If validation passes, show the information in an alert box and write ‘Your order has been submitted’. Otherwise, alert the user with the appropriate validation error and set focus on the input field that failed validation.
I have a script that I've been working with all week and weekend and I am truly frustrated. My script is quite lengthy but if you would take a look and see where I'm going wrong I would truly appreciate it.
Jus
/* <html>
<head>
<title>Practice Script</title>
<3><radios></head>
<body>
<h2>Practice Script</h2>
<form name="form1">
<table>
<tr><td>Full Name:</td>
<td><input name="name" type="text" /></td></tr>
<tr><td>Address:</td>
<td><textarea name="address"></textarea></td></tr>
<tr><td>Gender:</td>
<td>
<input name="radioGroup" type="radio" value="first" />Male
<input name="radioGroup" type="radio" value="second" />Female
</td></tr>
<tr><td>Date of Birth:</td>
<td><select name="birthDate">
<option value="Day">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="birthMonth">
<option value="Month">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="birthYear">
<option value="Year">Year</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
</td></tr>
<tr><td>Send me newsletter</td>
<td><input name="news" type="checkbox" value="yes" /></td></tr>
</table></form>
<form name="order">
<input type="hidden" value="order" />
</form>
<tr>
<td>
<input name="order_button" type="button" value="Submit Order" />
</td>
</tr>
</body>
</html> */
Full Name (text field)
Address (textarea)
Gender (radio button)
Date of birth (three dropdown lists – day, month, year)
“Send me newsletter” (checkbox)
Hidden total value for order (hidden field)
“Submit Order” button (button).
When the user is done inputting the info, I need to validate using the rules below:
At least 3 characters required in name
Must be over 18 years old
Gender must be selected
If validation passes, show the information in an alert box and write ‘Your order has been submitted’. Otherwise, alert the user with the appropriate validation error and set focus on the input field that failed validation.
I have a script that I've been working with all week and weekend and I am truly frustrated. My script is quite lengthy but if you would take a look and see where I'm going wrong I would truly appreciate it.
Jus
/* <html>
<head>
<title>Practice Script</title>
<3><radios></head>
<body>
<h2>Practice Script</h2>
<form name="form1">
<table>
<tr><td>Full Name:</td>
<td><input name="name" type="text" /></td></tr>
<tr><td>Address:</td>
<td><textarea name="address"></textarea></td></tr>
<tr><td>Gender:</td>
<td>
<input name="radioGroup" type="radio" value="first" />Male
<input name="radioGroup" type="radio" value="second" />Female
</td></tr>
<tr><td>Date of Birth:</td>
<td><select name="birthDate">
<option value="Day">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="birthMonth">
<option value="Month">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select name="birthYear">
<option value="Year">Year</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
</td></tr>
<tr><td>Send me newsletter</td>
<td><input name="news" type="checkbox" value="yes" /></td></tr>
</table></form>
<form name="order">
<input type="hidden" value="order" />
</form>
<tr>
<td>
<input name="order_button" type="button" value="Submit Order" />
</td>
</tr>
</body>
</html> */
2
people have this problem
I have this problem, too!
Tell me when someone solves it.
The more people who report this problem, the more it gets noticed.
The more people who report this problem, the more it gets noticed.
-
Inappropriate?While I'm not proficient in JavaScript at all, it's worthwhile to point out that you still need to validate at the server's end - no matter how well you validate at the client's end, the user can outright bypass that validation, and even the form itself, and send you whatever data they like.
