Cannot disable the same option already selected - javascript

Suppose I have two select. I'm trying to disable the options already selected in one of the select available with the class criterias, for achieve this I wrote the following code, but it didn't work, what I did wrong?
$('.criterias').on('change', function(event) {
var id = $(event.target).val();
$('#container').find('.criterias')
.siblings('.criterias')
.children('option[value=' + id + ']')
.attr('disabled', true)
.siblings().removeAttr('disabled');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<table>
<tr>
<td>
<select class="criterias form-control">
<option value="11">test1'</option>
<option value="12">test2</option>
<option value="13">test3</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="criterias form-control">
<option value="11">test1'</option>
<option value="12">test2</option>
<option value="13">test3</option>
</select>
</td>
</tr>
</table>


To achieve expected result, remove sibling method
$('.criterias').on('change', function(event) {
var id = $(event.target).val();
$('#container').find('.criterias')
.children('option[value=' + id + ']')
.attr('disabled', true)
.siblings().removeAttr('disabled');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="container">
<table>
<tr>
<td>
<select class="criterias form-control">
<option value="11">test1'</option>
<option value="12">test2</option>
<option value="13">test3</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="criterias form-control">
<option value="11">test1'</option>
<option value="12">test2</option>
<option value="13">test3</option>
</select>
</td>
</tr>
</table>
</div>
codepen - https://codepen.io/nagasai/pen/daXVLr

Related

How to remove table row if the form any of the input or select was empty?

I have a form as below, Here i am looking to remove tr row if the input text and select option was empty. and the show the table row if any of the input was not empty
As you can see the input was not empty, it was removing the entire row, it is possible check both are not empty then remove
By using Jquery
Note: table rows are dynamically adding
$(function(){
$("table#my_form tr td").each(function(){
$(this).find('input, select').each(function(){
if($(this).val()==""){
$(this).closest('tr.table_row').remove();
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
<table id="my_form">
<tr class="table_row">
<td>
<input type="text" name="company" value="TCS" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms" selected>Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="Deloite" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="GOOGLE" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess" selected>Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
</table>
</form>

To check all inputs, you could try something like this. As you mentioned, you are adding rows dynamically, so you would want some other event handler to check again for more bad rows. This code would run once on page load, and then again any time the '#removeBadRows' button is clicked.
$(function () {
removeBadRows();
$(document).on('click', '#removeBadRows', function () {
removeBadRows();
});
});
function removeBadRows() {
$("table#my_form tr").each(function () {
var badCount = 0;
var inputLength = $(this).find('input, select').length;
$(this).find('input, select').each(function () {
if ($(this).val() == "") {
badCount++;
}
});
if (badCount == inputLength) {
$(this).remove();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">
<table id="my_form">
<tr class="table_row">
<td>
<input type="text" name="company" value="test" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms" selected>Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="" selected>Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby">Ruby</option>
</select>
</td>
</tr>
<tr class="table_row">
<td>
<input type="text" name="company" value="GOOGLE" />
</td>
<td>
<select name="favorites" id="favorites">
<option value="">Select Favorites</option>
<option value="chess">Chess</option>
<option value="caroms">Caroms</option>
<option value="ruby" selected>Ruby</option>
</select>
</td>
</tr>
</table>
</form>

This could be the most simple method
$(function(){
$(document).on('change', '.table_row input', function(e) {
if($(this).val()==""){
$(this).closest('.table_row').remove();
}
});
});

Why onchange function is not calling for DropDownList using Jquery?

I want to call on change function for DropDownList when it change. This drop down is created dynamically,
Here is my code:
$('.chequeTable .selected .tbDDLReqNo').on('change', ':checkbox', function() {
alert('yessss');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="chequeTable">
<tr class="selected">
<td class="tdReqNo">
<select class="tbDDLReqNo">
<option></option>
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
<option value="4444">4444</option>
<option value="5555">5555</option>
</select>
</td>
</tr>
</table>

Just set the dropdown list change event using the class name .tbDDLReqNo as the selector. There is no checkbox so there is nothing to check.
$('.tbDDLReqNo').on('change', function () {
alert('yessss');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="chequeTable">
<tr class="selected">
<td class="tdReqNo">
<select class="tbDDLReqNo">
<option></option>
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
<option value="4444">4444</option>
<option value="5555">5555</option>
</select>
</td>
</tr>
</table>

The second parameter of on method is the selector. So, you have to use in the following way :
.on( events [, selector ] [, data ], handler )
$('.chequeTable').on('change','.tbDDLReqNo', function () {
alert('yessss');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="chequeTable">
<tr class="selected">
<td class="tdReqNo">
<select class="tbDDLReqNo">
<option></option>
<option value="1111">1111</option>
<option value="2222">2222</option>
<option value="3333">3333</option>
<option value="4444">4444</option>
<option value="5555">5555</option>
</select>
</td>
</tr>
</table>

You can use Jquery Selector like that also :
$( document ).ready(function() {
$('.tbDDLReqNo').on('change', function () {
alert('The value has been changed! , and you have been '+$(this).val()+ ' selected.');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="chequeTable">
<tr class="selected">
<td class="tdReqNo">
<select class="tbDDLReqNo">
<option></option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
</td>
</tr>
</table>

How to filter a table row using JQuery or Javascript

The scenario is , there is a table which contains dropdown selectbox in its 'td'. And, there is a dropdown selectbox outside which when selected filters table rows when values match in table's selectbox.
Here when selectFilter value is changed, it checks this value matches with the already 'selected' value in table.
Here some rows are hidden, so we need to filter the rows that is only visible .
Here is fiddle link: https://jsfiddle.net/manzer/8q7owxj5/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</head>
<body>
<select id="selectFilter">
<option>Select...</option>
<option value="cat">Cats</option>
<option value="dog">Dogs</option>
<option value="birds">Birds</option>
</select>
<br>
<br>
<table id="animals">
<tbody>
<tr >
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr >
<td>
<select>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="birds" selected>Birds</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="dog">Dog</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds</option>
</select>
</td>
</tr>
<tr style="display:none;">
<td>
<select>
<option value="dog">Dog<</option>
<option value="cat" selected>Cat</option>
<option value="birds">Birds<</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="dog" selected>Dog</option>
<option value="cat">Cat</option>
<option value="birds">Birds</option>
</select>
</td>
</tr>
</tbody>
</table>
<br>
<script>
//here when selectFilter value is changed, it checks
//this value matches with the already 'selected' value in table.
//here some rows are hidden, so we need to filter the rows that is //only visible .
//we need to filter visible rows when value matches from dropdown
$('#selectFilter').change(function() {
alert("hi")
});
</script>
</body>
</html>

Here is working code. However, I have to remove/edit the missing/extra html (tr> tags in your HTML
$(document).ready(function () {
$('#selectFilter').change(function () {
var selectedVal = $("#selectFilter option:selected").val();
alert(selectedVal);
$('#animals tbody tr:visible').each(function () {
var val = $(this).find('select option:selected').text();
if (selectedVal.toLowerCase() != val.toLowerCase()) {
$(this).hide();
}
else {
$(this).show();
}
});
});
});

change td background color based on the option value

I want to change the td background color based on the color value selected in dropdown.
HTML :
<table border="1">
<tr>
<th>Channel</th>
<th>Health</th>
</tr>
<tr>
<td>Mobile</td>
<td class="tdcolor">
<select >
<option value="0">Select</option>
<option value="1">Green</option>
<option value="2">Red</option>
<option value="3">Amber</option>
</select>
</td>
</tr>
</table>
jquery :
$(document).ready(function(){
$('td.tdcolor').change( function() {
$(this).css('background-color','green');
});
});
The above jquery is not highlighting the background color of td element holding tdcolor class.
If someone could help me how to change this using jquery, it would be great.
Many Thanks in advance.

You should use pseudo-class selector in order to get the selected text from your dropdown.
var text = $(this).find(':selected').text();
$(document).ready(function(){
$('td.tdcolor').change( function() {
$(this).css('background-color',$(this).find(':selected').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>Channel</th>
<th>Health</th>
</tr>
<tr>
<td>Mobile</td>
<td class="tdcolor">
<select >
<option value="0">Select</option>
<option value="1">Green</option>
<option value="2">Red</option>
<option value="3">Blue</option>
</select>
</td>
</tr>
</table>

$(document).ready(function() {
$('#color').change(function() {//add an id to html and use as selector
$(this).parent("td").css('background-color', $('option:selected', this).text());//use the text of selected option as parameter
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>Channel</th>
<th>Health</th>
</tr>
<tr>
<td>Mobile</td>
<td class="tdcolor">
<select id='color'>
<option value="0">Select</option>
<option value="1">Green</option>
<option value="2">Red</option>
<option value="3">Amber</option>
</select>
</td>
</tr>
</table>

$(document).ready(function(){
$('select').change( function() {
$(".tdcolor").css('background-color','green');
});
});
Should be .tdcolor not ddcolor
The event should be on select

Hide input boxes based on drop down selection

I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.
If the user selects 1, only 1 table shows
If the user selects 2, 2 tables show
I have added the code so hopefully it makes more sense
<body>
<p>Please select number of puppies:</p>
<p>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td>
<input name="PuppyMicrochipNum2" type="text"
id="PuppyMicrochipNum2" />
</td>
</tr>
</table>

jsFiddle: http://jsfiddle.net/h3XLP/
very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript
note: add the attribute style="display:none;" to the second table
var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
if(select.value=="2"){
document.getElementsByTagName("table")[1].style.display="inline";
}else{
document.getElementsByTagName("table")[1].style.display="none";
}
}
however you should alternatively use below, as you may have more select and table elements in your document
http://jsfiddle.net/h3XLP/1/
var select = document.getElementById("selectnopuppies");
select.onchange=function(){
if(select.value=="2"){
document.getElementById("secondpuppytable").style.display="inline";
}else{
document.getElementById("secondpuppytable").style.display="none";
}
}
<p>Please select number of puppies:</p>
<p>
<select id="selectnopuppies">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1:</p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName1" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour1" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td> </td>
</tr>
</table>
<div id="secondpuppytable" style="display:none;">
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName2" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour2" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td>
<input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
</div>

Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.
Try this:
$('#dropdown').change(function(){
var dropdown = $(this);
var tables = $('.tableSelector');
tables.hide();
tables.slice(0,dropdown.val()).show();
});
Working jsfiddle: http://jsfiddle.net/v5TTz/
I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.
However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.

I have modified your code... It's working now... try this...
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>
<body>
<p>Please select number of puppies:</p>
<p>
<select onchange = "go()" id="selCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0" id="Puppy1">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0" id="Puppy2">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
</tr>
</table>
</body>
</html>

You can do something like this:
When you select 1st option, it will show you firSt table and for 2nd it will show you both tables.
$("table").hide();
$("select option").change(function(){
Val = $(this).val();
If(Val ==1) {
$("table")[0].show();
$("table")[1].hide();
} else {
$("table").show();
}
});

A little bit of javascript:
<script>
function showtable(o){
if(o.value==2){document.getElementById('table2').style.display='block';}
else{document.getElementById('table2').style.display='none';}
}
</script>
<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<table id='table2' width="330" border="0" style="display:none">

HTML Changes
<select onchange="showForm(this.options[this.selectedIndex]);">
Why it's needed ?
For listening the select box value change .
<table width="330" border="0" class="puppy">
Added class=puppy attribute for readability . For hiding table element will be generic and error prone.
Javascript Changes
function showForm(option){
//option user has selected.
var val = parseInt(option.value);
//form elements in a document.
var forms = document.getElementsByClassName("puppy");
for(var i=0,total=forms.length;i<total;i++){
var form = forms[i];
var display = form.style.display;
if(i<val && display == "none"){
form.style.display = "block";
}else if(i >= val && display != "none"){
form.style.display = "none";
}
}
}
Live Demo # http://jsfiddle.net/A3eFz/31/

Please try with following example, hope this helps.
<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=0;i<number;i++){
group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
$('#groups').append(group);
$('#other').empty();
var other = '';
other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';
$('#other').append(other);
});
});
</script>

Categories

Resources