Jquery: How to disable siblings dropdown value across <TR> - javascript

i have a table like this:
<table class="mytable">
<tr>
<td>
<select class="go">
<option value="">--</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>
</select>
</td>
</tr>
<tr>
<td>
<select class="go">
<option value="">--</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>
</select>
</td>
</tr>
<tr>
<td>
<select class="go">
<option value="">--</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>
</select>
</td>
</tr>
<tr>
<td>
<select class="go">
<option value="">--</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>
</select>
</td>
</tr>
<tr>
<td>
<select class="go">
<option value="">--</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>
</select>
</td>
</tr>
</table>
and my jquery code like this:
$(".go").change(function(){
var selVal=[];
$(".go").each(function(){
selVal.push(this.value);
});
$(this).closest('tr').siblings(".go").find("option").removeAttr("disabled").filter(function(){
var a=$(this).parent("select").val();
return (($.inArray(this.value, selVal) > -1) && (this.value!=a))
}).attr("disabled","disabled");
});
My Fiddle
How do i disable siblings value if i select 1 on this dropdown, but i should not able to select the 1 on another dropdown again. Here is the working example that work perfectly without table/td/. My requirement come across to use table tr/td. I tried to use: $(this).closest('tr').siblings(".go")
but its not working. any idea?


Try passing tr to .siblings()
$(this).closest("tr").siblings("tr").find("option")
jsfiddle http://jsfiddle.net/ev5qvprv/122/


you can do this by finding the closest table first .. and then find ".go" except the current one


The selector you used is not correct.
$(this).closest('tr').siblings(".go").find("option")
This will give you nothing because tr doesn't have any sibling .go.
You have two solutions for the selector:
$(this).closest('tr').siblings("tr").find("option")
or
$('table.mytable').find("option")

Related

How to total up all drop down menu

I need help I'm new to this but I have 3 dropdown menus how would count them and total them all up to prompt the user if the total of the dropdowns is more then 10 in total:
I have added the code I'm using below:
<table align="center" width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" align="right">N1:</td>
<td width="270" align="right">
<select name="N1" id="N1">
<option value="0">0</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>
</select>
</td>
<td width="270" align="right">N2:</td>
<td width="270" align="right">
<select name="N2" id="N2">
<option value="0">0</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>
</select>
</td>
</tr>
<td width="370" align="right">N3:</td>
<td width="270" align="right">
<select name="N3" id="N3">
<option value="0">0</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>
</td>
</tr>
</table>

Attach the change event to all the three select's, then on change loop through the select's you've and calculate the total sum of the selected value, like :
$('select').each(function() {
total += Number($(this).val());
});
Code:
$('select').on('change', function() {
var total = 0;
$('select').each(function() {
total += Number($(this).val());
});
console.log(total);
if (total > 10) {
console.log('Alert user');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270" align="right">N1:</td>
<td width="270" align="right">
<select name="N1" id="N1">
<option value="0">0</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>
</select>
</td>
<td width="270" align="right">N2:</td>
<td width="270" align="right">
<select name="N2" id="N2">
<option value="0">0</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>
</select>
</td>
<td width="370" align="right">N3:</td>
<td width="270" align="right">
<select name="N3" id="N3">
<option value="0">0</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>
</select>
</td>
</tr>
</table>

Don't submit unless all data is entered

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/

How to get Dropdownlist value on HTML Table Cell in a Row using javascript

I have a problem in getting the value of dropdownlist on HTML table. Below is my sample html and javascript.
<table>
<tr>
<td>
<select id="select1" onchange="getValue(this.value)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-1"></td>
</tr>
<tr>
<td>
<select id="select2" onchange="getValue(this.value)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-2"></td>
</tr>
</table>
<script type="text/javascript">
function getValue(data)
{
var myDiv = document.getElementById( "row-1" );
myDiv.innerHTML = data;
}
</script>
Each row has a unique td id. example:row-1, row-2 .. and so on.
When selecting an item on the dropdown, I want to display the dropdown value in each row inside the row cell. How can I do that? Please help.

Is this what you want?
<html>
<head></head>
<body>
<table>
<tr>
<td>
<select id="select1" onchange="getValue(this)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="select1-value"></td>
</tr>
<tr>
<td>
<select id="select2" onchange="getValue(this)">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="select2-value"></td>
</tr>
</table>
<script type="text/javascript">
function getValue(data)
{
var myDiv = document.getElementById( data.id + '-value' );
myDiv.innerHTML = data.value;
}
</script>
</body>
</html>

You can try this:
<table>
<tr>
<td>
<select id="select1">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-1"></td>
</tr>
<tr>
<td>
<select id="select2">
<option value="$">--Please Select--</option>
<option value="val1">value 1</option>
<option value="val2">value 2</option>
<option value="val3">value 3</option>
</select>
</td>
<td id="row-2"></td>
</tr>
</table>
$('select').change(function() {
var $this = $(this);
$this.parent().siblings('td[id^=row-]').html($this.val());
});
Here is the DEMO.

Pass the object:
onchange="getValue(this)"
Then, source.parentNode is the <td>, and source.parentNode.nextSibling is the adjacent <td>
function getValue(source) {
source.parentNode.nextSibling.innerHTML = this.value;
}

Jquery loop through table select box

I have a table that shows some information of tickets
check this for the html of table. Check this jsfiddle
how can I loop through each select box click?, select box i.e rows will varies.
please give me some hints.
thank you...
<table id="tableTickets" class="table table-striped custab">
<thead>
<tr>
<th> Ticket Type </th>
<th> REMAINING </th>
<th> Price </th>
<th> Quantity </th>
</tr>
</thead>
<tbody>
<tr id="ticketRow1">
<td id="tdTicketName1">
<input type="hidden" id="ticketId" name="ticketId" value="1">
<h4 class="heading1">Name1</h4>
</td>
<td id="tdTicketQuantity1">
100 </td>
<td id="tdTicketPrice1">
<div id="divTicketPrice1">12.30</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty1" style="height:30px;">
<option value="0">0</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>
</select>
</td>
</tr>
<tr id="ticketRow2">
<td id="tdTicketName2">
<input type="hidden" id="ticketId" name="ticketId" value="2">
<h4 class="heading1">Name2</h4>
</td>
<td id="tdTicketQuantity2">
200 </td>
<td id="tdTicketPrice2">
<div id="divTicketPrice2">12.34</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty2" style="height:30px;">
<option value="0">0</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>
</select>
</td>
</tr>
<tr id="ticketRow3">
<td id="tdTicketName3">
<input type="hidden" id="ticketId" name="ticketId" value="3">
<h4 class="heading1">Name1</h4>
</td>
<td id="tdTicketQuantity3">
100 </td>
<td id="tdTicketPrice3">
<div id="divTicketPrice3">23.52</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty3" style="height:30px;">
<option value="0">0</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>
</select>
</td>
</tr>
<tr id="ticketRow4">
<td id="tdTicketName4">
<input type="hidden" id="ticketId" name="ticketId" value="4">
<h4 class="heading1">Name2</h4>
</td>
<td id="tdTicketQuantity4">
200 </td>
<td id="tdTicketPrice4">
<div id="divTicketPrice4">15.41</div>
</td>
<td>
<select class="form-control" name="ticketQty" id="ticketQty4" style="height:30px;">
<option value="0">0</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>
</select>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:right;">
<h4 class="heading1">Total <div id="ticketPriceTotal" class="col-sm-12">000</div></h4>
</td>
</tr>
</tbody>
</table>

first give class to to price <div class="price"></div> and then write code given bellow,
$(document).on("change",".form-control",function(){
var total=0;
$("tbody tr").each(function(){
var price=$(this).find(".price").text();
var tickets=$(this).find(".form-control").val();
total=parseFloat(total)+(parseFloat(price)*parseFloat(tickets));
})
alert(total);
});

Check code on fiddle. with below code you can get each select box "onchange" or "onclick" event.
jsfiddle
$(document).ready(function(){
$('select').on('change',function(){
alert($(this).val())
})
})

Jquery iterate through multiple select options in a specific div

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/

Categories

Resources