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>
Related
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>
I want to hide the table row if one of the <span> tags has the class from the value variable.
The variable val comes from a select box.
$(".hostgroup").change(function(event) {
var val = $(this).val();
console.log(val);
$("#groups > span").each(function() {
$(this).closest("tr").show();
$(this).removeClass("hd");
});
$("#groups > span").each(function() {
if ($(this).hasClass(val)) {} else {
$(this).closest("tr").hide();
$(this).closest("tr").addClass("hd");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="hostgroup" data-placeholder="Choose a hostgroup...">
<option value="delete">delete</option>
<option value="add">add</option>
<option value="OS">OS</option>>
</select>
<tr>
<td id="groups">
<span class="add">add,</span>
<span class="OS">OS,</span>
</td>
</tr>
<tr>
<td id="groups">
<span class="delete">delete,</span>
<span class="OS">OS,</span>
</td>
</tr>
For example: I select delete and it should only display table rows that not have got a <span> with the delete class. But now it will hide all results.
$("span.delete").parent().parent().hide()
will hide entire rows with spans in them with "delete" class. Swap the class to the value of your choosing in the "change" event.
Edit:
It should be like this:
$(".hostgroup").change(function(event) {
var val = $(this).val();
console.log(val);
$("span."+val).parent().parent().hide()
});
You could search for the class based on the tr, see the working example below :
$(".hostgroup").change(function(event) {
var val = $(this).val();
$("tr").each(function() {
if ( $(this).find('.' + val).length ) {
$(this).closest("tr").addClass("hd");
} else {
$(this).closest("tr").removeClass("hd");
}
});
});
.hd {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="hostgroup">
<option></option>
<option>add</option>
<option>OS</option>
<option>delete</option>
</select>
<table>
<tr>
<td class="groups">
<span class="add">add,</span>
<span class="OS">OS,</span>
</td>
</tr>
<tr>
<td class="groups">
<span class="delete">delete,</span>
<span class="OS">OS,</span>
</td>
</tr>
</table>
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/
I have the following table
<table id="table_device">
<tr>
<td> First td </td>
<td> Second td </td>
<td>
<select class="base_MD">
<option>A value</option>
<option>Another value</option>
<option>And another one</option>
...
</select>
</td>
<td> The value </td>
</tr>
<tr></tr>
<tr></tr>
...
</table>
How do I set the <select> where the <option> matches with the 4th child (named 'The value') for each <tr> tag?
EDIT
I tried the following
$('#table_device').find('tr').each(function()
{
var value = $(this).find(':nth-child(4)').html();
$('select').each(function()
{
if($(this).text() == value)
{
var id = $(this).val();
}
$(this).eq(id).prop('selected', true);
})
});
But it did not work ...
I'm sure it's not that complicated but my head will explode soon
You can iterate over each select element. get the text from next td and use it to set option by text. Like this:
$('#table_device select').each(function(){
var nexttdtext = $(this).parent().next('td').text();
$(this).find("option").filter(function() {
return this.text == nexttdtext;
}).attr('selected', true);
});
Working Demo
Bind an onchange event to the list. Find the selected option and the text inside it. And put it in the first row, last cell...
$(function() {
$('.base_MD').on('change', function() {
var value = $(this).find(':selected').text();
$('#table_device tr:first-child td:last-child').text( value );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_device">
<tr>
<td> First td </td>
<td> Second td </td>
<td>
<select class="base_MD">
<option>A value</option>
<option>Another value</option>
<option>And another one</option>
...
</select>
</td>
<td> The value </td>
</tr>
<tr></tr>
<tr></tr>
...
</table>
So far my code works fine but when I select empty select option, all the rows in my table should be visible (in other words reset the table to initial state) again. How do I do it?
I've seen this (JQuery Selector for table with hidden row - alternate row colouring) but couldn't apply to my structure.
Thanks
JQUERY:
$(document).ready(function()
{
$("#cars").change(function()
{
var selected = $(this).val();
if (selected != '')
{
var values = $.map($('#cars>option'), function(e) { return e.value; });
values.forEach(function(item)
{
if (item != '')
{
if (selected == item)
{
$('.' + item).show();
}
else
{
$('.' + item).hide();
}
}
else
{
//Show all rows
}
});
}
});
});
HTML:
<table border="1">
<tr id="header">
<td>1</td>
<td><select id="cars">
<option value=""></option>
<option value="bmw">BMW</option>
<option value="audi">AUDI</option>
<option value="mercedes">MERCEDES</option>
</select></td>
</tr>
<tr class="bmw">
<td>3.16</td>
<td>BMW</td>
</tr>
<tr class="bmw">
<td>3.18</td>
<td>BMW</td>
</tr>
<tr class="bmw">
<td>3.00</td>
<td>BMW</td>
</tr>
<tr class="audi">
<td>A1</td>
<td>AUDI</td>
</tr>
<tr class="audi">
<td>A3</td>
<td>AUDI</td>
</tr>
<tr class="mercedes">
<td>300sel</td>
<td>MERCEDES</td>
</tr>
</table>
Working Fiddle
Add this else part in your code
else {
$('table tr').show();
}
just place this:
$(this).closest('table').find('tr:hidden').show();
Although you can simplify your code like this:
$("#cars").change(function(){
$(this).closest('table').find('tr:gt(0)').hide();
this.value !== '' ? $('.'+this.value).show() : $(this).closest('table').find('tr:hidden').show();
});
Your code is unnecessarily complex. You don't need map, foreach, etc.
$("#cars").change(function()
{
$('tr[id!=header]').hide()
if (this.value)
$('.' + this.value).show()
else
$('tr').show()
}
)