Select option by value and change attribute of a selected option

Select option by value and change attribute of a selected option - javascript

So what I want is to automatically select options in SELECT_1 and SELECT_2 by clicking radio (Yes or No) and set the selected attribute to those options in SELECT_1 and SELECT_2
What I have is:
function selectThis (){
var crytRadioYes = document.getElementById("cryteria_yes");
var crytRadioNo = document.getElementById("cryteria_no");
var selects = document.getElementById("slctbox");
if (crytRadioYes.checked == true){
selects.value = "Good";
} else {
selects.value = "Bad";
}
if (crytRadioNo.checked == true){
selects.value = "Bad";
} else {
selects.value = "Good";
}
}
<table>
<!-- choose -->
<tr>
<td style="width: 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_yes" onclick="selectThis()" />Yes</label></td>
<td style="width: 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_no" onclick="selectThis()" />No</label></td>
</tr>
</table>
<table>
<!-- SELECT_1 -->
<tr>
<td>Cryteria 1</td>
<td>
<select id="slctbox">
<option value="-">-</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
</td>
</tr>
<!-- SELECT_2 -->
<tr>
<td>Cryteria 2</td>
<td>
<select id="slctbox">
<option value="-">-</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
</td>
</tr>
</table>
As u see it changes value of SELECT_1 by clicking radio, but does not change the value in SELECT_2.
I also dont know how to set attribute "selected"
please help :(

By definition, id attribute needs to be unique.
Simple workaround is to use class attribute and loop over elements having the specified class.
Use querySelectorAll to get the list of the document's elements that match the specified group of selectors.
function selectThis() {
var crytRadioYes = document.getElementById("cryteria_yes");
var crytRadioNo = document.getElementById("cryteria_no");
var selects = document.querySelectorAll(".slctbox");
if (crytRadioYes.checked == true) {
selects.forEach(sel => sel.value = "Good");
} else {
selects.forEach(sel => sel.value = "Bad");
}
if (crytRadioNo.checked == true) {
selects.forEach(sel => sel.value = "Bad");
} else {
selects.forEach(sel => sel.value = "Good");
}
}
<table>
<!-- choose -->
<tr>
<td style="width: 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_yes" onclick="selectThis()" />Yes</label></td>
<td style="width: 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_no" onclick="selectThis()" />No</label></td>
</tr>
</table>
<table>
<!-- SELECT_1 -->
<tr>
<td>Cryteria 1</td>
<td>
<select class="slctbox">
<option value="-">-</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
</td>
</tr>
<!-- SELECT_2 -->
<tr>
<td>Cryteria 2</td>
<td>
<select class="slctbox">
<option value="-">-</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
</td>
</tr>
</table>

Related

Enable/disable dropdowns when checkbox checked/unchecked

I'm creating a web app using Java servlets and JSP. I have a table which contains songs. Every song has its own checkbox and drop-down. like this:
You can see that taken songs have their checkbox and drop-down disabled and that's how I want it.
What I want is when the page loads all the drop-downs will be disabled, and when I check one of the available checkboxes the drop-down that is in the same line will be enabled and when I uncheck that checkbox the dropdown will be disabled again.
Here is the JSP code:
<table id="myTable">
<tr>
<th>Songs</th>
<th>Selected</th>
<th>#</th>
<th>Available/Taken</th>
</tr>
<c:forEach items="${Entities}" varStatus="loop">
<tr>
<td><c:out value="${Entities[loop.index]}"/></td>
<td><input id="checkbox1" type="checkbox" name="selected" value=" ${Entities[loop.index]}" ${checkboxDis[loop.index]} ><br></td>
<td>
<select name="myselect" id="drop" disabled >
<option selected disabled>#</option>
<option>Cmaj</option><option>Gmaj</option>
<option>Dmaj</option><option>Amaj</option>
<option>Emaj</option><option>Bmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>Gb_maj</option>
<option>Amin</option><option>Emin</option>
<option>Bmin</option><option>F#min</option>
<option>C#_min</option><option>G#_min</option>
<option>D#_min</option><option>Cb_maj</option>
<option>Gmaj</option><option>Dmaj</option>
<option>F#maj</option><option>Cmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>A#</option>
</select>
</td>
<td>
<c:choose>
<c:when test="${checkboxDis[loop.index].equals('disabled')}">
<i class="fa fa-ban" style="color:red;"></i>
</c:when>
<c:when test="${checkboxDis[loop.index].equals('')}">
<i class="fa fa-check-circle" style="color:green;"></i>
</c:when>
</c:choose>
</td>
</tr>
</c:forEach>
</table>
The jQuery code I've done so far:
var selected1 = new Array();
$(document).ready(function() {
$("input[type='checkbox']").on('change', function() {
if ($(this).is(":checked")) {
selected1.push($(this).val());
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
$('#drop')[i].prop("disabled", false);
}
}
} else {
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
selected1.splice(i, 1);
$('#drop')[i].prop("disabled", true);
}
}
}
});
});
The code isn't working because I don't know how to handle the drop-downs since they have the same names and ids.

Your IDs need to be unique - in this case not needed at all for enabling the select
$(function() {
$("input[type='checkbox']").on('change', function() {
$(this).closest("tr").find("select[name=myselect]").prop("disabled", !this.checked)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input id="checkbox_1" type="checkbox" name="selected" value="1"></td>
<td>
<select name="myselect" id="drop_1" disabled>
<option selected disabled>#</option>
<option>Cmaj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>Amaj</option>
<option>Emaj</option>
<option>Bmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>Gb_maj</option>
<option>Amin</option>
<option>Emin</option>
<option>Bmin</option>
<option>F#min</option>
<option>C#_min</option>
<option>G#_min</option>
<option>D#_min</option>
<option>Cb_maj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>F#maj</option>
<option>Cmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>A#</option>
</select>
</td>
</tr>
<tr>
<td><input id="checkbox_2" type="checkbox" name="selected" value="2"></td>
<td>
<select name="myselect" id="drop_2" disabled>
<option selected disabled>#</option>
<option>Cmaj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>Amaj</option>
<option>Emaj</option>
<option>Bmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>Gb_maj</option>
<option>Amin</option>
<option>Emin</option>
<option>Bmin</option>
<option>F#min</option>
<option>C#_min</option>
<option>G#_min</option>
<option>D#_min</option>
<option>Cb_maj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>F#maj</option>
<option>Cmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>A#</option>
</select>
</td>
</tr>
</table>

Change your JSP to this:
<td><input id="checkbox_${checkboxDis[loop.index]}" type="checkbox" name="selected" value="${Entities[loop.index]}"><br></td>
<td>
<select name="myselect" id="drop_${checkboxDis[loop.index]}" disabled >
<option selected disabled>#</option>
<option>Cmaj</option><option>Gmaj</option>
<option>Dmaj</option><option>Amaj</option>
<option>Emaj</option><option>Bmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>Gb_maj</option>
<option>Amin</option><option>Emin</option>
<option>Bmin</option><option>F#min</option>
<option>C#_min</option><option>G#_min</option>
<option>D#_min</option><option>Cb_maj</option>
<option>Gmaj</option><option>Dmaj</option>
<option>F#maj</option><option>Cmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>A#</option>
</select>
</td>
Now your checkboxes and dropdowns have corresponding IDs which you can then use with jQuery:
var selected1 = new Array();
$(document).ready(function() {
$("input[type='checkbox']").on('change', function() {
if ($(this).is(":checked")) {
selected1.push($(this).val());
$('#drop_' + $(this).val()).prop("disabled", false);
} else {
$('#drop_' + $(this).val()).prop("disabled", true);
// Instead of a for-loop for removing the unchecked song,
// you can also use Array.filter():
selected1 = selected1.filter(song_id => song_id !== $(this).val());
/*
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
selected1.splice(i, 1);
}
}
*/
}
});
});

Convert Html Table to Json when the column has input fields, linput text or select

How to convert HTML table to Javascript Object with jQuery
An extension of this question.
My table is dynamic its cells has Html content like Input to enter descritpion and Select for dropdown selection.
So to get that html content to json object created this answered question.

A simple changing in the code and you can:
//
// for each table row in table body
//
var tbl = $('#students tbody tr').map(function (idxRow, ele) {
//
// start building the retVal object
//
var retVal = {id: ++idxRow};
//
// for each cell
//
var $td = $(ele).find('td').map(function (idxCell, ele) {
var input = $(ele).find(':input');
//
// if cell contains an input or select....
//
if (input.length == 1) {
var attr = $('#students thead tr th').eq(idxCell).text();
retVal[attr] = input.val();
} else {
var attr = $('#students thead tr th').eq(idxCell).text();
retVal[attr] = $(ele).text();
}
});
return retVal;
}).get();
console.log(tbl);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="students" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr class="student">
<td>Oscar</td>
<td><select>
<option value="21">21</option>
<option value="23" selected>23</option>
<option value="32">32</option>
</select></td>
<td><input type="text" value="16.5"></td>
</tr>
<tr class="student">
<td>Antonio</td>
<td><select>
<option value="21">19</option>
<option value="23">23</option>
<option value="32" selected>32</option>
</select></td>
<td><input type="text" value="14"></td>
</tr>
<tr class="student">
<td>Jessica</td>
<td><select>
<option value="21" selected>21</option>
<option value="23">23</option>
<option value="32">32</option>
</select></td>
<td><input type="text" value="19"></td>
</tr>
</tbody>
</table>

How to toggle text when a specific value in drop-down AND checkbox is checked

So right now, I have:
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</br>
<div id=outprint style="display:none">
<tr>
<td class="label">Out of Print?</td>
<td><input type="checkbox" name="outOfPrint" id="chk"/></td>
</tr>
</div>
<div id="showthis" style="display:none">
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td><input type="checkbox" name="removeAndNotify"/></td>
</tr>
</div>
and my script as:
$('#status').change(function () {
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
Basically I am looking for the hidden texts to pop up
When the drop-down menu is changed AND when it's set to Disabled
and you check the checkbox, the last checkbox appears.
The problems I am having are:
1) When I click on Disabled and check the checkbox, and then I change the Disabled to another option, the hidden text still pops up.
2) You click on any option other than the default one, then you click on the checkbox first before you change the option from the drop-down menu to Disabled -> the hidden text does not show up.
How would I approach this?
Fiddle

Changes made: Invalid htmls fixed, Improper event bindings fixed.
Your HTML:
<table>
<tbody>
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</tbody>
</table>
<table id=outprint style="display:none">
<tbody>
<tr>
<td class="label">Out of Print?</td>
<td>
<input type="checkbox" name="outOfPrint" id="chk" />
</td>
</tr>
</tbody>
</table>
<table id="showthis" style="display:none">
<tbody>
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td>
<input type="checkbox" name="removeAndNotify" />
</td>
</tr>
</tbody>
</table>
Javascript:
var show;
$('#status').change(function() {
show = $(this).val();
if (show != "-1") {
$('#outprint').show();
} else {
$('#outprint').hide();
$('#showthis').hide();
}
});
$('#chk').change(function() {
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
} else {
$('#showthis').hide();
}
});
DEMO

I guess you just need to reset the state of your hidden controls to default once you change the options from the dropdown and then iterate through the logic.
$('#status').change(function () {
ResetState();
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
function ResetState()
{
$('#outprint').hide();
$('#showthis').hide();
$('#chk').prop("checked", false);
}
Example : https://jsfiddle.net/DinoMyte/up4j39qr/4/

Add rows to table which it contains a text box and an image in a same column and onclick that image calender must opens

Am new to javascript .... Here am trying to add or remove extra rows for the given input box,and a calendar image ... When clicking the calender image the calender must opens ... and after selecting the date it automatically fills the input box ... how to do that ... Please help me...
<html>
<head>
<script language="javaScript" type="text/javascript" src="calendar.js"></script>
<link href="calendar.css" rel="stylesheet" type="text/css">
<script>
function addRowToTable()
{
var tbl = document.getElementById('tblsample');
var name=document.getElementById('accounthead1');
var lastRow = tbl.rows.length;
var iteration = lastRow-1;
var row = tbl.insertRow(lastRow);
function addImageRolled(src) {
var img = document.createElement("img");
img.src = src;
img.onclick= setYears('2010', '2025').showCalender(this, 'billdate');
}
var cellRight = row.insertCell(1);
var e2 = document.createElement('input');
e2.type = 'text';
e2.readOnly = true;
e2.name = 'billdate' + iteration;
e2.id = 'billdate' + iteration;
e2.size = 8;
// e2.onkeyup = keyPressTest;
// e1.value=iteration;
cellRight.appendChild(e2).appendChild(addImageRolled('calender.png'));
}
function removeRow()
{
var tbl=document.getElementById("tblsample");
var lastRow=tbl.rows.length-1;
if (lastRow > 2) tbl.deleteRow(lastRow);
}
</script>
</head>
<table id="tblsample" width="100" height="100"><tr>
<td>
<input type="text" name="billdate" readonly="" id="billdate" size="8"><a href="#" onClick="setYears(2010, 2025);
showCalender(this, 'billdate');">
<img src="calender.png"></a></td></tr></table>
<table align="right">
<tr><th colspan="1"><input type="button" value=" + " style="background-color:#cacc82" onclick="addRowToTable();" /><input type="button" value=" - " style="background-color:#cacc82" onclick="removeRow();" /></th></tr>
</table>
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));" id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
</select>
</td>
<td align="center">
<font color="#003333" size="+1">X</font>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>
</html>

Change and Update parameter value when Onchange combobox triggered

I have a problem to change url parameter when event onchange triggered in combobox.
Here is the preview :
My default url like this :
http://reserv_book.php?id=1 the number id is according to row (from database).
When i select in Cart combobox i want to add parameter cart=standard or cart=extra according to combobox value.
So URL update like this :
http://reserv_book.php?id=1&cart=standard
When i select in Caddy combobox i want to add parameter caddy=standard or caddy=extra according to combobox value.
So URL update like this :
http://reserv_book.php?id=1&cart=standard&caddy=standard
Here is my function that called when onChange event in combobox triggered.
function changeValue(type, id) {
var valCart = document.getElementById("cart").value;
var valCaddy = document.getElementById("caddy").value;
if (type == "cart") {
//alert("Cart : "+val+" , "+id);
$("a.book").each(function() {
var link = "reserv_book.php?id="+id+"&caddy="+ valCaddy +"&cart=";
if (valCart == "standard") {
$(this).attr("href", link + 'standard');
} else {
$(this).attr("href", link + 'extra');
}
});
} else {
//alert("Caddy : "+val+" , "+id);
$("a.book").each(function() {
var link = "reserv_book.php?id="+id+"&cart="+ valCart +"&caddy=";
if (valCaddy == "standard") {
$(this).attr("href", link + 'standard');
} else {
$(this).attr("href", link + 'extra');
}
});
}
}
And this is html file in combobox :
<table width="100%" class="ry-table-gold" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>No.</th>
<th>Date</th>
<th>Time</th>
<th>Player(s)</th>
<th>Price</th>
<th>Caddy</th>
<th>Cart</th>
<th> </th>
</tr>
<tr>
<td>1</td>
<td>Oct 28 2013</td>
<td>14:50</td>
<td>3</td>
<td>IDR 450,000.0</td>
<td>
<select id="caddy" onchange="changeValue('caddy',1)">
<option value="standard">Standard</option>
<option value="extra">Extra</option>
</select>
</td>
<td>
<select id="cart" onchange="changeValue('cart',1)">
<option value="standard">Standard</option>
<option value="extra">Extra</option>
</select>
</td>
<td>
Book Now
</td>
</tr>
<tr>
<td>2</td>
<td>Oct 10 2013</td>
<td>14:00</td>
<td>3</td>
<td>IDR 700,000.0</td>
<td>
<select id="caddy" onchange="changeValue('caddy',2)">
<option value="standard">Standard</option>
<option value="extra">Extra</option>
</select>
</td>
<td>
<select id="cart" onchange="changeValue('cart',2)">
<option value="standard">Standard</option>
<option value="extra">Extra</option>
</select>
</td>
<td>
Book Now
</td>
</tr>
</tbody>
</table>
Another problem is, if the data cart and caddy in first row changed. It affect to another row.

You need to find closest tr and search for links inside the table row. Since you are using inline handlers you need to pass additional argument.
function changeValue(type, id, element) {
var valCart = $("#cart").val(); //use val to get the value of select.
var valCaddy = $("#caddy").val();
if (type == "cart") {
//alert("Cart : "+val+" , "+id);
$(element).closest("tr").find("a.book").each(function() {
var link = "reserv_book.php?id="+id+"&caddy="+ valCaddy +"&cart=";
if (valCart == "standard") {
$(this).attr("href", link + 'standard');
} else {
$(this).attr("href", link + 'extra');
}
});
} else {
...
//same here
}
}
HTML
<select id="cart" onchange="changeValue('cart',1, this)">
<option value="standard">Standard</option>
<option value="extra">Extra</option>
</select>

Develop Reference

JavaScript is the programming language of the Web.

Select option by value and change attribute of a selected option - javascript

Related

Enable/disable dropdowns when checkbox checked/unchecked

Convert Html Table to Json when the column has input fields, linput text or select

How to toggle text when a specific value in drop-down AND checkbox is checked

Add rows to table which it contains a text box and an image in a same column and onclick that image calender must opens

Change and Update parameter value when Onchange combobox triggered

Categories

Resources