UPDATE: so more accurately it seems the table cell appears and immediately disappears again?
UPDATE UPDATE: it works if I use onmousedown instead of onclick? But of course the second I release the mouse button it disappears again so that won't work either.
So I've searched around and can't seem to make this work. I'm simply trying to make a function so that when I click a button it changes the default display style for a table cell from none to show the cell.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="buildform.js" defer></script>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="buildform.css" />
</head>
<body>
<form id="buildForm">
<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tr>
<td colspan="3">Custom Computers Order Form</td>
</tr>
<tr>
<td><label>Operating System</label></td>
<td>
<select id="operatingSys" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="w7h" value="w7h">Windows 7 Home</option>
<option name="w7p" value="w7p">Windows 7 Professional</option>
<option name="w10h" value="w10h">Windows 10 Home</option>
<option name="w10p" value="w10p">Windows 10 Professional</option>
</select>
</td>
<td rowspan=2><label name="displayPrice" id="displayPrice">Display</label></td>
</tr>
<tr>
<td><label>Processor</label></td>
<td>
<select id="processors" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td><label>Motherboard</label></td>
<td>
<select id="motherboards" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="a" value="a">Motherboard a</option>
<option name="b" value="b">Motherboard a</option>
<option name="c" value="c">Motherboard a</option>
</select>
</td>
</tr>
<tr>
<td rowspan=4><label>RAM</label></td>
<td>
<select id="ram1" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
<button onclick="add()">Add More?</button>
</td>
</tr>
<tr>
<td id="hiddenRam1">
<select id="ram2" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td id="hiddenRam2">
<select id="ram3" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td id="hiddenRam3">
<select id="ram4" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ii3" value="i3">Intel i3</option>
<option name="ii5" value="i5">Intel i5</option>
<option name="ii7" value="i7">Intel i7</option>
</select>
</td>
</tr>
<tr>
<td><label>Hard Drive</label></td>
<td>
<select id="hardrives" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="ssd128gb" value="ssd128gb">128 GB Corsair SSD</option>
<option name="ssd256gb" value="ssd256gb">256 GB Corsair SSD</option>
<option name="hdd500gb" value="hdd500gb">500 GB Western Digital HDD</option>
<option name="hdd1tb" value="hdd1tb">1 TB Western Digital HDD</option>
</select>
</td>
</tr>
<tr>
<td><label>Power Supply</label></td>
<td>
<select id="psus" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="300watt" value="300watt">300 Watt P/S</option>
<option name="400watt" value="400watt">400 Watt P/S</option>
<option name="500watt" value="500watt">500 Watt P/S</option>
<option name="600watt" value="600watt">600 Watt P/S</option>
<option name="700watt" value="700watt">700 Watt P/S</option>
</select>
</td>
</tr>
<tr>
<td><label>Case</label></td>
<td>
<select id="processors" onchange="buildTotal()">
<option name="none" value="none" selected>Select One</option>
<option name="case1" value="case1">Case 1</option>
<option name="case2" value="case2">Case 2</option>
<option name="case3" value="case3">Case 3</option>
</select>
</td>
</tr>
</table>
The javascript
function add() {
var x = document.getElementById("hidden");
x.style.display = "table-cell";
}
When someone clicks the 'Add More' button, the second select with options should show up. I have no idea what I'm doing wrong.
Nothing at all happens.
Try the following:
x.style.display = "table-cell"
Related
Following is my code :
<tr class = "dynamicRow">
<td class="dynamicStu"><b><bean:message key="label.student.code" />:</b>
</td><td >
<logic:present name="studentList">
<html:select property="dgList[0].stuCreate"
styleId="stuselect" onchange="setStudentLimit(this);">
<html:option value="">
<bean:message key="label.student.code" />
</html:option>
<html:optionsCollection name="masStudentForm"
property="studentList" label="label" value="value" />
</html:select>
</logic:present>
</td>
</div>
....
</tr>
At the end of the row I have an add button where this dropdown will be added dynamically.Along with this dropdown many other textfields are present.
My Requirement : When user selects the same option in the dropdown the valuesmore than 5 times the values should get disabled. Should happen on Onchange() of this dropdown. Kindly help.
You first need to get value of your selects using .val() then you need to iterate through all selects in your tables to see how many times that value is selected . If the value matches then increment the count and at the end you can check if the count value is > 5 then show alert or disable that option.
Demo Code ( with dummy datas) :
function setStudentLimit(el) {
var intKeyCount = 0;
var value = $(el).val(); //get that value
//iterate through all selects
$('.dynamicRow select').each(function() {
//if value matches
if ($(this).val() === value) {
intKeyCount++; //increment
}
});
if (intKeyCount > 5) {
alert("you cannot choose again");
//or disable that option
//$(el).find("option:selected").prop('disabled',true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
<tr>
<th>Selects</th>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
<tr class="dynamicRow">
<td>
<select onchange="setStudentLimit(this);">
<option value="">--Select---</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</td>
</tr>
</table>
I have a function for a registration page where if the data required isn't entered by the user then it alerts the user to fill it in. The form still submits the information though so not sure what I'm doing wrong. I want it to not submit until all data is submitted and correct.
function checkdetails()
{
if (document.form1.txtname.value == "")
{alert("Please fiill in your forename.");
}
if (document.form1.txtsurname.value == "")
{alert("Please fill in your surname.");
}
if (document.form1.txtusername == "")
{alert("Please create a username.");
}
if (document.form1.DOBDay.selectedIndex == 0)
{alert("Please select the day you were born.");
}
if (document.form1.DOBMonth.selectedIndex == 0)
{ alert("Please select the month you were born");
}
if (document.form1.DOBYear.selectedIndex == 0)
{alert("Please fill in the year you were born.");
}
if (document.form1.txtemail.value == "")
{alert("Please enter your e-mail address.");
}
if (document.form1.terms.checked == false)
{alert("Please tick that you have read the Terms and Conditions.");
}
}
<form action="Home.html" method="post" name="form1" onsubmit="Display()">
<table bgcolor="white" width="700" border="0" align="center">
<col width="200">
<col width="200">
<tr>
<th colspan = "2" align = "center" bgcolor="grey"> Fill the form to sign up. </th>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2" style="font-size:12px">Fields marked with * are mandatory</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Forename*</td>
<td>Surname*</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtname" id="txtname" class="info" />
<td><label>
<input type="text" name="txtsurname" id="txtsurname" class="info" />
</label></td>
</tr>
<tr>
<td> Create Username*</td>
<td> Birthday</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtusername" id="txtusername" class="info"/>
</label></td>
<td><select name="DOBMonth">
<option> Month </option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="DOBDay">
<option> 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="DOBYear">
<option> Year </option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1998</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
<tr>
<td>Email*</td>
<td>Confirm Email*</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtemail" id="txtemail" class="info" onchange="ValidateEmail(txtemail)" />
<td><label>
<input type="text" name="txtemail2" id="txtemail2" class="info" onchange="ValidateEmail2(txtemail2)"/>
</label></td>
</tr>
<tr>
<td>Password*</td>
<td>Confirm Pasword*</td>
</tr>
<tr>
<td><label>
<input type="password" name="txtpassword" id="txtpassword" class="info"/>
<td><label>
<input type="password" name="txtpassword2" id="txtpassword2" class="info"/>
</label></td>
</tr>
<td colspan="2" style="font-size:12px">**Passwords must be at least 8 characters in lenght.</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">
<label>
<input type="checkbox" name="terms" value="terms" id="terms" />
I agree to the Terms and Conditions</label>
</td></tr>
<br><br><br>
<tr>
<td colspan="2"><label>
<input type="checkbox" name="notify" value="notify" id="notify" />
I want to receive notifications by text/email about new products in stock.</label>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="Login" id="Login" value="Login" onclick="checkdetails()" />
</label></td>
<td><label>
<input type="reset" name="Reset" id="Reset" value="Reset" />
</label></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
it's better to use html5 attribute required !
<input type="text" name="input" required >
return false; should prevent it from performing it's action.
<form name="testForm" onsubmit="return validate();">
<script type="text/javascript">
function validate()
{
if(check if your conditions are not satisfying)
{
alert("validation failed false");
returnToPreviousPage();
return false;
}
alert("validations passed");
return true;
}
</script>
However, as stated in answer above, html5 required attribute is best practice. You will need to consider more than just empty fields though. For example, will need to regex check your email field, etc.
http://www.html5-tutorials.org/form-validation/validating-email/
I need to make my drop down menu a required field when signing up for a page. I done the same to my drop down menu that I done for text boxes and a check box which are all working so cant understand why the drop down isn't. This is the whole form I have with the others done. Thanks
<form action="Home.html" method="post" name="form1" onsubmit="Display()">
<table bgcolor="white" width="700" border="0" align="center">
<col width="200">
<col width="200">
<tr>
<th colspan = "2" align = "center" bgcolor="grey"> Fill the form to sign up. </th>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2" style="font-size:12px">Fields marked with * are mandatory</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Forename*</td>
<td>Surname*</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtname" id="txtname" class="info" required>
<td><label>
<input type="text" name="txtsurname" id="txtsurname" class="info" required />
</label></td>
</tr>
<tr>
<td> Create Username*</td>
<td> Birthday</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtusername" id="txtusername" class="info" required/>
</label></td>
<td><select name="DOBMonth" required>
<option> Month </option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="DOBDay" required>
<option> 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="DOBYear" required>
<option> Year </option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1998</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
<tr>
<td>Email*</td>
<td>Confirm Email*</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtemail" id="txtemail" class="info" onchange="ValidateEmail(txtemail)" required />
<td><label>
<input type="text" name="txtemail2" id="txtemail2" class="info" onchange="ValidateEmail2(txtemail2)" required/>
</label></td>
</tr>
<tr>
<td>Password*</td>
<td>Confirm Pasword*</td>
</tr>
<tr>
<td><label>
<input type="password" name="txtpassword" id="txtpassword" class="info" required/>
<td><label>
<input type="password" name="txtpassword2" id="txtpassword2" class="info" required/>
</label></td>
</tr>
<td colspan="2" style="font-size:12px">**Passwords must be at least 8 characters in lenght.</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">
<label>
<input type="checkbox" name="terms" value="terms" id="terms" required/>
I agree to the Terms and Conditions</label>
</td></tr>
<br><br><br>
<tr>
<td colspan="2"><label>
<input type="checkbox" name="notify" value="notify" id="notify" />
I want to receive notifications by text/email about new products in stock.</label>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="Login" id="Login" value="Login" onclick="checkdetails() " />
</label></td>
<td><label>
<input type="reset" name="Reset" id="Reset" value="Reset" />
</label></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
It seems you need to add the value="" to your default answers. For example, this should do the trick for your "DOBMonth" dropdown:
<select name="DOBMonth" required>
<option value=""> Month </option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
So im trying to finish off my registration site and require two passwords like any other site. My verification wont work though. Ideally what I want is to have an alert when you change the second password saying they aren't the same or to continue if they are. I thought this function would have worked when i enter onchange="checkpass()" on the password2 input but nothing happens.
function checkpass(pass1,pass2)
{
pass1=document.txtpassword.value
pass2=document.txtpassword2.value
if (pass1 != pass2)
{
alert ("Passwords must match")
}
}
<form action="Home.html" method="post" name="form1" onsubmit="Display()">
<table bgcolor="white" width="700" border="0" align="center">
<col width="200">
<col width="200">
<tr>
<th colspan = "2" align = "center" bgcolor="grey"> Fill the form to sign up. </th>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Forename</td>
<td>Surname</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtname" id="txtname" class="info" required>
<td><label>
<input type="text" name="txtsurname" id="txtsurname" class="info" required />
</label></td>
</tr>
<tr>
<td> Create Username</td>
<td> Birthday</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtusername" id="txtusername" class="info" required/>
</label></td>
<td><select name="DOBMonth" required>
<option value=""> Month </option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="DOBDay" required>
<option value=""> 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="DOBYear" required>
<option value=""> Year </option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1998</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
<tr>
<td>Email</td>
<td>Confirm Email</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtemail" id="txtemail" class="info" onchange="ValidateEmail(txtemail)" required />
<td><label>
<input type="text" name="txtemail2" id="txtemail2" class="info" onchange="ValidateEmail2(txtemail2)" required/>
</label></td>
</tr>
<tr>
<td>Password</td>
<td>Confirm Pasword</td>
</tr>
<tr>
<td><label>
<input type="password" name="txtpassword" id="txtpassword" class="info" required/>
<td><label>
<input type="password" name="txtpassword2" id="txtpassword2" class="info" required/ onchange="checkpass(txtpassword,txtpassword2)">
</label></td>
</tr>
<td colspan="2" style="font-size:12px">**Passwords must be at least 8 characters in length.</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">
<label>
<input type="checkbox" name="terms" value="terms" id="terms" required/>
I agree to the Terms and Conditions</label>
</td></tr>
<br><br><br>
<tr>
<td colspan="2"><label>
<input type="checkbox" name="notify" value="notify" id="notify" />
I want to receive notifications by text/email about new products in stock.</label>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="Login" id="Login" value="Login"/>
</label></td>
<td><label>
<input type="reset" name="Reset" id="Reset" value="Reset" />
</label></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
In your checkPass function, these objects are both undefined:
document.txtpassword
document.txtpassword2
When your function is run, the undefined objects will cause an error, which will be reported in the console. However, from the perspective of the UI, it will appear like nothing happened. Try this instead:
pass1=document.getElementById("txtpassword").value;
pass2=document.getElementById("txtpassword2").value;
For more information on getElementById: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
I want to iterate through multiple select options in a specific div via Jquery each function. And after that if there is atleast one empty field, the loop breaks and set 0 to reqCourseFlag variable.My implementation is below but it does not looping through
HTML:
<div id="IENG349ReqCourses" class="reqCourses">
<center>
<table>
<caption style="color:#f00;">Please select your grades for required courses.</caption>
<tr>
<td valign="middle">
<label>IENG 102 - Intro to IE:</label>
</td>
<td>
<select id="intershipTypeBox" name="IENG102Grade">
<option value="">--select--</option>
<option value="NOT TAKEN">NOT TAKEN</option>
<option value="TAKING">TAKING</option>
<option value="A">A</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B">B</option>
<option value="B-">B-</option>
<option value="C+">C+</option>
<option value="C">C</option>
<option value="F">F</option>
</select>
</td>
</tr>
<tr>
<td valign="middle">
<label>IENG104 - Comp. Aided Drawing:</label>
</td>
<td>
<select id="intershipTypeBox" name="IENG104Grade">
<option value="">--select--</option>
<option value="NOT TAKEN">NOT TAKEN</option>
<option value="TAKING">TAKING</option>
<option value="A">A</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B">B</option>
<option value="B-">B-</option>
<option value="C+">C+</option>
<option value="C">C</option>
<option value="F">F</option>
</select>
</td>
</tr>
<tr>
<td valign="middle">
<label>IENG 211 - Prob. In Eng.:</label>
</td>
<td>
<select id="intershipTypeBox" name="IENG211Grade">
<option value="">--select--</option>
<option value="NOT TAKEN">NOT TAKEN</option>
<option value="TAKING">TAKING</option>
<option value="A">A</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B">B</option>
<option value="B-">B-</option>
<option value="C+">C+</option>
<option value="C">C</option>
<option value="F">F</option>
</select>
</td>
</tr>
<tr>
<td valign="middle">
<label>IENG 212 - Eng. Statistics:</label>
</td>
<td>
<select id="intershipTypeBox" name="IENG212Grade">
<option value="">--select--</option>
<option value="NOT TAKEN">NOT TAKEN</option>
<option value="TAKING">TAKING</option>
<option value="A">A</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B">B</option>
<option value="B-">B-</option>
<option value="C+">C+</option>
<option value="C">C</option>
<option value="F">F</option>
</select>
</td>
</tr>
<tr>
<td valign="middle">
<label>IENG 221 - Work Syst. Analysis and Design:</label>
</td>
<td>
<select id="intershipTypeBox" name="IENG221Grade">
<option value="">--select--</option>
<option value="NOT TAKEN">NOT TAKEN</option>
<option value="TAKING">TAKING</option>
<option value="A">A</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B">B</option>
<option value="B-">B-</option>
<option value="C+">C+</option>
<option value="C">C</option>
<option value="F">F</option>
</select>
</td>
</tr>
</table>
</center>
</div>
$('div.#IENG349ReqCourses: select> option:selected').each(function() {
var value = $(this).val();
if(value === ""){
reqCourseFlag = 0;
return false;
}
});
Any help would be appriciated.
Your selector is incorrect, you don't need the . or the :
$('div#IENG349ReqCourses select> option:selected').each(function () {
demo http://jsfiddle.net/Xr5LL/