My html table have many rows.One checkbox and one combo box have contained per each row. When I select combo box and get one value then disable checkbox for relative row according to check combo box value.Here is my javascript method
function check(cbo) {
var chx = document.getElementsByTagName('input');
for ( var i = 0; i < chx.length; i++) {
if (chx[i].type == 'checkbox') {
chx[i].disabled = (cbo.value == 'D') ? true : false;
}
}
}
My requirement is when I select combo box and disable enable checkbox for each row.Please share me something.
Generate a dynamic id (number) and append id with your select and checkbox, as following:
<table width="100%" border="1">
<tr>
<td>Row - 1</td>
<td>
<select id="select1"
onchange="checkTheCheckbox('select1', 'check1');">
<option value="false" selected="true">Default</option>
<option value="true">Check</option>
<option value="false">Uncheck</option>
</select>
</td>
<td>
<input type="checkbox" name="check1" id="check1" />
</td>
</tr>
<tr>
<td>Row - 2</td>
<td>
<select id="select2"
onchange="checkTheCheckbox('select2', 'check2');">
<option value="true" selected="true">Default</option>
<option value="true">Check</option>
<option value="false">Uncheck</option>
</select>
</td>
<td>
<input type="checkbox" name="check2" id="check2" checked />
</td>
</tr>
</table>
Add following javascript method:
function checkTheCheckbox(selectId, checkId){
var ddl = document.getElementById(selectId);
for(var i= 0; i < ddl.length; i++){
if(ddl[i].selected){
var status = ddl[i].value === 'true' ? true : false;
document.getElementById(checkId).checked = status;
}
}
}
Working example: http://jsfiddle.net/gRAb6/
Using an object's parentNode, you can find a shared parent of both the checkbox and the combo box (probably the tr table-row element), and then select within that row for the element you want. Something like:
function check(cbo) {
var parent = cbo.parentNode;
var chx = parent.getElementByTagName('input');
...
}
it may make things a lot simpler for you to use some classes to make selection easier as well. For instance, giving all the checkboxes that you want to be able to be disabled the class of "checkbox_will_disable", say, will allow you to use the document.getElementsByClassName function, which means you don't need the if chx[i].type == "checkbox" any more.
the end function could become something like:
function check(cbo) {
var parent = cbo.parentNode;
var chx = parent.getElementByClassName('checkbox_will_disable');
for (var i=0; i < chx.length; i++) {
chx[i].disabled = (cbo.value == 'D') ? true : false;
}
}
if the parentNode of the cbo isn't far enough up the chain (say it's a td rather than the tr or something) you can keep on using it until you're far enough up:
var parent = cbo.parentNode.parentNode;
say. There are also more elegant ways to do these kinds of things, using jQuery, for instance. And if it becomes complex enough, you may find it easier switching to a javascript framework such as knockoutjs.
Good luck!
Related
I have a table that gets data from xml files. Three different options (files) that can be chosen from a drop down menu. When one option is chosen, the table gets the data, but when another option is chosen, the table displays both files data unless i refresh the page. right now it works if I refresh after choosing a new option.
I've tried different if and else statements to load the files when an option is chosen. And I have tried to have a default blank option chosen but it doesn't do much.
HTML
<div id="easy">Easy
<select name="easy" id="easyS" onclick="getNumbers()">
<option value="easy1">puzzle 1</option>
<option value="easy2">puzzle 2</option>
<option value="easy3">puzzle 3</option>
</select>
</div><br>
<table class="grid">
<tr id="1">
<td class="numer1"></td>
<td class="number"></td>
<td class="numer2"></td>
<td class="numer1"></td>
<td class="number"></td>
<td class="numer2"></td>
<td class="numer1"></td>
<td class="number"></td>
<td class="numer2"></td>
</tr>
JS
function getNumbers() {
//this sends a request for the local XML file.
var request = new XMLHttpRequest();
//if statement to get first puzzle mxl document.
if (document.getElementById("easyS").value == "easy1" ||
document.getElementById("hardS").value == "hard1"){
request.open("GET", "numbers.xml", false);
request.send(null);
//this gets information from the XML file using the tags.
var xmldoc = request.responseXML;
var numbers = xmldoc.getElementsByTagName("number");
//this will take the information in the tags and store it in an array
var numArray = [];
for(var i = 0; i < numbers.length; i++){
numArray.push(numbers[i].firstChild.data)
}
//here the class attribute will be used to display the information
//into the grid.
var printNum = document.getElementsByClassName("number");
x = printNum.length;
if (document.getElementById("easyS").value == "easy1"){
while(x--){
printNum[x].innerHTML = numArray[x];
var cells = document.getElementsByTagName('td');
for(var prop in cells){
if(cells[prop].innerHTML === ''){//this will only allow numbers in the text field, and a limit of one number at a time.
cells[prop].innerHTML += '<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" maxlength="1"/>'
}
}
}
I want to be able to choose one option and display the numbers in my table, then chose another option and have the information in the table gone and display the new information without having to refresh.
You can use the update panel it will help you to not reload the page again you have to place the updatepanel before the controler(eg:gridview,html table,dropdownlist..etc) i think it will help you.
when you append your numb array in Js, make sure you make it empty on every change of element. so that you have new records every time you change your dropdown value
Hello I have multiple select boxes which will be added dynamically.
I have 4 options under the selection boxes, each color coded. It works fine with one select box. If i have multiple select boxes then the color coding is not working. Please help!
Heres the fiddle
https://jsfiddle.net/p49g8p9h/
THE HTML
<tr>
<td class="tg-7khl">MAV_01</td>
<td class="tg-7khl">Maveric Poster</td>
<td class="tg-7khl">Maveric</td>
<td class="tg-7khl">PRE,VIN,MUK</td>
<td class="tg-7khl">14 Aug 2015</td>
<td class="tg-7khl">
<select id="stat" class="redText" style="padding: 3px; display:block;">
<option class="redText">Yet to start</option>
<option class="orangeText">In Progress</option>
<option class="blueText">Waiting</option>
<option class="greenText">To invoice</option>
</select>
</td>
<td class="tg-7khl red">from 12 Aug 2015</td>
</tr>
You have two issues in your code.
1) You have duplicate IDs for select element. IDs must be unique. You can rather use same class name. and target elements by classname instead.
2) You are using object of get elements in click handler. You should rather use current element context this in handler.
Full Snippet:
var selectele = document.getElementsByClassName('stat');
for(var i=0;i<selectele.length;i++)
selectele[i].onchange = function () {
this.className = this.options[this.selectedIndex].className;
}
}
Working Demo
check this working updated fiddle you have duplicating id so this was not working you can do it with class also
var select = document.getElementById('stat');
select.onchange = function () {
select.className = this.options[this.selectedIndex].className;
}
var select1 = document.getElementById('stat1');
select1.onchange = function () {
select1.className = this.options[this.selectedIndex].className;
}
var select2 = document.getElementById('stat2');
select2.onchange = function () {
select2.className = this.options[this.selectedIndex].className;
}
id should be unique for each elements. Use class redText instead id like following.
var select = document.getElementsByClassName('redText');
for (var i = 0; i < select.length; i++) {
select[i].onchange = function () {
this.className = this.options[this.selectedIndex].className;
}
}
DEMO
You are using same id for multiple elements which is the cause to fail getting all element by id.
change all id to class as shown below -
<select class="stat redText" style="padding: 3px; display:block;">
Use this.className so that it will take only current select box for which value changed
var select = document.getElementsByClassName('stat');
for(var i = 0; i < select.length; i++) {
select[i].onchange = function () {
this.className = this.options[this.selectedIndex].className;
}
}
JSFiddle Demo
I have the below code in my Velocity template:
<tr>
<td>
<input name ="questions" id = "quest" type = "text" value = "$!question.question" size="30" style="border: none" readonly/>
</td>
<td>
<select id="rate" name="rating" **onchange="myFunction()**">
#set ($values = [0..2])
#foreach ($value in $values)
#set ($optValue = $value)
#if ($optValue == 0)
<option value="$optValue" selected>$optValue</option>
#else
<option value="$optValue">$optValue</option>
#end
#end
</select>
</td>
</tr>
In my Javascript i am defining the function myFunction().
function myFunction()
{
var count = document.getElementsByName('rating').length;
var total = 0;
for(x=0;x<count;x++)
{
var formRating = document.getElementsByName('rating')[x].value;
var formWeightage = document.getElementsByName('weightage') [x].value;
total=formRating + formWeightage;
console.log(total);
}
return total;
};
The problem i face here is,
Consider the above velocity generates 5 rows and 5 selected boxes.
When i select first select option value as 1, the js function(myFunction) is called and all the remaining values of the select boxes() are also selected and displayed.
I want to get only the value of the select box i select. How to achieve this?
You could get all options with the selectedattribute like this:
function doSomethingWithSelectedOptions(){
var selectedElements = document.querySelectorAll("option[selected]");
// Iteration over all selected elements
for(var i=0; i<selectedElements.length; i++){
console.log("Selected element: "+selectedElements[i].innerHTML);
}
}
My task here is to change the content in the table whenever the select's options change.
The code below is my solution but I don't think that is good at all. What if when the options have more than 3 options... this might lead me to modify lots of in the if else condition. Thus, if you have others solution, please let me know that.
Might I set id="approve_2" as show default with my edited JSFIDDLE?
Demo
HTML:
<table>
<tr>
<td>
<select id="select_vehicle">
<option value="company_vehicle">Company Vehicle</option>
<option value="hiring_vehicle">Hiring Vehicle</option>
<option value="taxi">Taxi</option>
</select>
</td>
</tr>
<tr id="company_vehicle">
<td>Company Vehicle</td>
</tr>
<tr id="hiring_vehicle">
<td>Hiring Vehicle</td>
</tr>
<tr id="taxi">
<td>Taxi</td>
</tr>
</table>
Javascript:
var select_vehicle = $("#select_vehicle");
// Set selected item
var set_selected_item = $(select_vehicle).val("company_vehicle");
// Hide options "Hiring Vehicle" & "Taxi"
var company_vehicle = $("#company_vehicle"); // Get id "Company Vehicle"
var hiring_vehicle = $("#hiring_vehicle"); // Get id "Hiring Vehicle"
hiring_vehicle.hide();
var taxi = $("#taxi"); // Get id "Taxi"
taxi.hide();
$(select_vehicle).on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
if (valueSelected == "company_vehicle") {
company_vehicle.show();
hiring_vehicle.hide();
taxi.hide();
} else if (valueSelected == "hiring_vehicle") {
company_vehicle.hide();
hiring_vehicle.show();
taxi.hide();
} else {
company_vehicle.hide();
hiring_vehicle.hide();
taxi.show();
}
});
JSFIDDLE: http://jsfiddle.net/huydq91/7us66/3/
You can shorten your code without repetition like this:
$('table tr:gt(0)').hide();
$('#select_vehicle').change(function() {
var val = $(this).val();
$('#'+val).show().siblings('tr').not(':first').hide();
}).change();
Updated Fiddle
I have a table row which looks like
the HTML looks like
When the user changes the value of the Name field I pass the "select" to nameDropChanged function. After obtaining a reference to select I want to change the value of Number of Coupons select box. How can I obtain a reference to it using Jquery? Also there will be many such exact rows in the table.
Update : Here is the dummy HTML code and jsfiddle link
<table id="competitors_table" width="100%" style="border-bottom: #000000 solid 1px;">
<tbody>
<tr>
<td>Name:<select name="CompetitorIDs_Setting_[]" onchange="nameDropDownChanged(this);">
<option value="0">N/A</option><optgroup label="Similar Stores"></optgroup>
<optgroup label="Other Stores">
<option value="1">flipkart</option>
<option value="2">bigshoebazaar</option>
<option value="160">presto</option>
<option value="3">fabindia</option>
<option value="4">fashnvia</option>
</td>
<td>
<select name="Position_Setting_[]" onchange="dropDownChanged(this);">
<option value="1000">Top</option>
<option value="1001">Middle</option>
<option value="1002">Bottom</option>
<option value="">Enter Position</option>
</select>
<input type="text" name="PositionNumber_Setting_[]" size="3" style="display: none;">
</td>
<td>Number of Coupons:<select id="numberOfCoupons_Setting_[]"></select></td>
</tr>
</tbody>
</table>
Javascript code
function nameDropDownChanged(select)
{
var selectedIndex = select.selectedIndex;
var WebsiteName = select.options[selectedIndex].innerHTML;
var couponCount = <?php if(!empty($couponCount)){ echo json_encode($couponCount); }?>;
if(Object.keys(couponCount).length > 0)
{
var numberOfCoupons = couponCount[WebsiteName];
var numberOfCouponsDropDown = document.getElementById('numberOfCouponsSelect');
$("#numberOfCouponsSelect").empty();
if(numberOfCoupons > 0)
{
for(var i=1; i <= numberOfCoupons; i++)
{
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
numberOfCouponsDropDown.appendChild(option);
}
}
else
{
var option = document.createElement('option');
option.value=1;
option.innerHTML = "No Active Coupons";
numberOfCouponsDropDown.appendChild(option);
}
}
}
inside the nameDropChanged function ..
// considering 'parameter' is the variable to be passed as a parameter to nameDropChanged function
$numberSelect = $(parameter).parent().nextAll(':last').children('select');
// $numberSelect is now containing a reference to the numberOfCoupons_Setting_[ select]
You can do something like this
$('#Selector_ID1, #Selector_ID2, #Selector_ID3, ...').change(function() {
var parent = $(this).parents("tr");
var elm = $("td:last-child", parent).children("select");
//Do your operation with last Select Element here.
});
This helps in two ways
You need not to know exact parents and children, but just reverse
track for parent which is TR in first case and then last SELECT in
the parent.
In a single go you can handle multiple rows. You can
also use class selector here.