Putting input results in specific parts of a table using jquery - javascript

<div id="booking-details">
<label for="select-1">Select your Programme:</label> <br />
<div class="styled-select">
<select id="select-1">
<option value="test_1">Test 1</option>
<option value="test_2">Test 2</option>
<option value="test_3">Test 3</option>
<option value="test_4">Test 4</option>
<option value="test_5">Test 5</option>
</select>
</div>
<br />
<label for="select-2">Select your time slot:</label> <br />
<div class="styled-select">
<select id="select-2">
<option value="one">01:00</option>
<option value="two">02:00</option>
<option value="three">03:00</option>
<option value="four">04:00</option>
<option value="five">05:00</option>
<option value="six">06:00</option>
<option value="seven">07:00</option>
<option value="eight">08:00</option>
<option value="nine">09:00</option>
<option value="ten">10:00</option>
<option value="eleven">11:00</option>
<option value="twevle">12:00</option>
<option value="one-pm">13:00</option>
<option value="two-pm">14:00</option>
<option value="three-pm">15:00</option>
<option value="four-pm">16:00</option>
<option value="five-pm">17:00</option>
<option value="six-pm">18:00</option>
<option value="seven-pm">19:00</option>
<option value="eight-pm">20:00</option>
<option value="nine-pm">21:00</option>
<option value="ten-pm">22:00</option>
<option value="eleven-pm">23:00</option>
<option value="midnight">00:00</option>
</select>
</div>
</div>
I'm trying to complete a tv guide table and finding it difficult to put specific select results into specific parts of a table, is there any methods I could use to do this?
The table has 10 rows, each a different tv channel and then 24 columns to the left in reference to each hour of the day.

Reading your question, I'd consider putting two classes on each table cell (td). One class would be the channel, and other would be the time.
Then in jQuery, for each data item, you'd find the cell that matches both classes and append to that cell (td).
For example, if you had a table:
<table>
<tr>
<td class="test_4 ten-pm"></td>
<td class="test_4 eleven-pm"></td>
<td class="test_4 midnight"></td>
</tr>
<tr>
<td class="test_5 ten-pm"></td>
<td class="test_5 eleven-pm"></td>
<td class="test_5 midnight"></td>
</tr>
<table>
Then you could add to it such as:
$('td.test_5.midnight').append( "x" );
See Also:
How can I select an element with multiple classes in jQuery?

Related

Dropdown doesnt work when I moved it to JavaScript

I have a dropdown which I took from here, https://www.w3schools.com/HOWTO/howto_custom_select.asp and that works okay in html:
<div class="custom-select">
<select>
<option value="0">Select</option>
<option value="0">07.30 - 68.30</option>
<option value="0">07.30 - 98.30</option>
</select>
</div>
But I need to create this in JavaScript with the click event of button:
function addRow(btn) {
document.querySelector("#content").insertAdjacentHTML(
"afterbegin",
`<tr>
<td>${btn.id}</td>
<td>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
</div>
</td>
</tr>`
);
}
But when I do it like this, the dropdown doesnt open anymore. So when I write inside of the javascript, I see the element is like in DOM:
<td>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
</div>
</td>
But in html it is like:
<div>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
<div class="select-selected">IS</div><div class="select-items select-hide"><div>IS 1</div><div>IS 2</div></div></div>
</div>
So I dont know why it doesn add ISIS 1IS 2 automatically.
Do you know why?
Thanks.
You haven't closed the .custom-select <div> tag. Could be the cause of the issue

Showing value of dropdown item in multi-row table with javascript

I have a table that contains 2 columns. The first one has a dropdown that needs to be selected in order to display its value in the second column. The problem is that only the first row of the table is being updated. When selecting the second dropdown, the first row is being updated. I am not a javascript developer and I am searching how to address this problem.
Here is part of the code:
function updateinput(e) {
var selectedOption = e.options[e.selectedIndex];
document.getElementById('viewvalue').value = selectedOption.getAttribute('data-name');
}
<tr>
<td>
<select onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="viewvalue" name="viewvalue"></td>
<br>
<td>
<select onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="viewvalue" name="viewvalue"></td>
</tr>
You have to keep reference to the select field. Since you already used the data-attribute, I did the same in the example.
The attached data-select-index allows you to reference the id of the corresponding input-field. E.g. select-tag data-select-index="num1" references input-tag id="view-num1" and so on
function updateinput(e) {
var selectedOption = e.options[e.selectedIndex];
document.getElementById('view-' + e.getAttribute('data-select-index')).value = selectedOption.getAttribute('data-name');
}
<tr>
<td>
<select data-select-index="num1" onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="view-num1" name="viewvalue"></td>
<br>
<td>
<select data-select-index="num2" onchange="updateinput(this)">
<option data-name="">Select</option>
<option data-name="value 1">test 1</option>
<option data-name="value 2">test 2</option>
</select>
<td><input type="text" id="view-num2" name="viewvalue"></td>
</tr>

by selecting the values in one drop down list based on that selection only values related to that should get in second drop down list

<td>
<select name="Country" id="Country">
<option>select country</option>
<option>India</option>
<option>USA</option>
<option>AUSTRALIA</option>
</select>
</td>
<td>
<select name="States" id="States" >
<option>Select states</option>
<option>Karnataka</option>
<option>Maharashtra</option>
<option>Uttar Pradesh</option>
<option>Tamil Nadu</option>//states of India
<option>California</option>
<option>New Jersey</option>
<option>New York</option>//States of USA
<option>queens land</option>
<option>Victoria</option>//States of AUSTRALIA
</select>
</td>
**this is the link were i wrote my source code. There are different countries list in one drop down option and states list in other drop down option. If user clicks on India in the first drop down list the states related to India should get displayed in second drop down list same with other countries also **
**Please help me to solve this **
With help of jQuery and data attributes you can achieve this functionality
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#Country").change(function() {
var selectedCountry = $(this).children("option:selected").val();
// Hide all states in States dropdown
$("#States option").hide();
// Show all states of selected country
$("#States option[data-country='" + selectedCountry + "']").show();
// Show first option 'Select states'
$("#States option[data-country='Select']").show();
// Reset States drop down
$("#States").val('Select states');
});
});
</script>
</head>
<body>
<table id="form">
<tr>
<td>
<select name="Country" id="Country">
<option>select country</option>
<option>India</option>
<option>USA</option>
<option>AUSTRALIA</option>
</select>
</td>
<td>
<select name="States" id="States">
<option data-country="Select">Select states</option>
<option data-country="India">Karnataka</option>
<option data-country="India">Maharashtra</option>
<option data-country="India">Uttar Pradesh</option>
<option data-country="India">Tamil Nadu</option>
<option data-country="USA">California</option>
<option data-country="USA">New Jersey</option>
<option data-country="USA">New York</option>
<option data-country="AUSTRALIA">queens land</option>
<option data-country="AUSTRALIA">Victoria</option>
</select>
</td>
</tr>
</table>
</body>
</html>

JavaScript to change class on element for cascading drop-down lists

I have a website that uses PHP to look at various tables on a SQL Server, these tables provide the drop-down lists with their data. I wish to create a cascading drop-down list, below is the code that provides the HTML.
div class="col-md-4" class="form-control" id="Type">
<select>
<?php foreach ($conn->query($sqlType) as $row){echo '<option
class="'.$row['ShortCode'].'">'.$row['Type'].'</option>';} ?>
</select>
</div>
Below is the result
<option class=""></option>
<option class="Deal">Deal</option>
<option class="Price">Price</option>
<option class="Promo">Promo</option>
<option class="Promo">Promo</option>
<option class="LTD">Long term Deal</option>
On another drop-down list we wish to hide the options not selected in the first drop-down list.
<div class="col-md-4" class="form-control" id="Category">
<select">
<?php foreach ($conn->query($sqlCategory) as $row){echo '<option
class="'.$row['Type'].' hide">'.$row['Category'].'</option>';} ?>
</select>
</div>
<select">
The results are below.
<option class=" hide"></option>
<option class="Deal hide">Exceptional / Clearance</option>
<option class="Promo hide">Invoice</option>
<option class="Promo hide">Retro</option>
<option class="Listing hide">New</option>
<option class="Listing hide">Delisting</option>
<option class="Price hide">Increase</option>
<option class="Price hide">Decrease</option>
<option class="LTD hide">Off Invoice (ZXPN Only)</option>
<option class="LTD hide">Retro (No ZR88)</option>
The idea is that if for example "Listing" is selected in the first drop-down a JavaScript or JQuery script will remove the "hide" class from;
<option class="Listing hide">
You do not have a "Listing" in the first drop down, but why not use value in the first dropdown, then no need to remove classes
$(function() {
$("#Type").on("change","select", function() {
var $cat = $("#Category>select");
$cat.find("option:gt(0)").hide(); // keep first option
$("." + this.value, $cat).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4" class="form-control" id="Type">
<select>
<option value=""></option>
<option value="Deal">Deal</option>
<option value="Price">Price</option>
<option value="Promo">Promo</option>
<option value="Listing">Listing</option>
<option value="LTD">Long term Deal</option>
</select>
</div>
<div class="col-md-4" class="form-control" id="Category">
<select>
<option class=""></option>
<option class="Deal">Exceptional / Clearance</option>
<option class="Promo">Invoice</option>
<option class="Promo">Retro</option>
<option class="Listing">New</option>
<option class="Listing">Delisting</option>
<option class="Price">Increase</option>
<option class="Price">Decrease</option>
<option class="LTD">Off Invoice (ZXPN Only)</option>
<option class="LTD">Retro (No ZR88)</option>
</select>
</div>

add 2 values and total them in one innerHTML

I am still learning js, and am stuck once again, I am trying to add 2 drop down menu values and total them in one innerHTML.
I am trying to take the value2 from Phones/Devices (item) then add the value from the New Activation (item1) drop down and total them in the Commission innerHTML. In the js, the commission line is cost.
I have tried adding the element in the cost line, and that did not work. also tried adding the item itself to the cost line.
here is the html and js
<table width="50%" border="0">
<tr>
<td width="20%"><div align="center">item</div></td>
<td width="20%"><div align="center">New Activation</div></td>
<td width="20%"><div align="center">Commission</div></td>
<td width="20%"><div align="center">Price</div></td>
<td width="20%"><div align="center">MEID</div></td>
<td width="20%"><div align="center">Number</div></td>
</tr>
<td><div class="styled" align="center">
<select name="item" id="item">
<option value="">Phones/Devices</option>
<option value="">-----APPLE-----</option>
<option value="200.00" value2="20.00" value3="iPhone4">iPhone 4 8GB</option>
<option value="225.00" value2="20.00" value3="iPhone416">iPhone 4 16GB</option>
<option value="250.00" value2="20.00" value3="iPhone432">iPhone 4 32GB</option>
<option value="275.00" value2="20.00" value3="iPhone464">iPhone 4 64GB</option>
<option value="300.00" value2="20.00">iPhone 4S 8GB</option>
<option value="325.00" value2="20.00">iPhone 4S 16GB</option>
<option value="350.00" value2="20.00">iPhone 4S 32GB</option>
<option value="375.00" value2="20.00">iPhone 4S 64GB</option>
<option value="400.00" value2="20.00">iPhone 5</option>
<option value="500.00" value2="30.00">iPhone 5C</option>
<option value="625.00" value2="30.00">iPhone 5S</option>
<option value="">-----BlackBerry-----</option>
<option value="75.00" value2="5.00">Curve</option>
<option value="100.00" value2="5.00">Bold</option>
<option value="225.00" value2="10.00">Q10</option>
<option value="250.00" value2="10.00">Z10</option>
<option value="">-----HTC-----</option>
<option value="100.00" value2="5.00">Incredible</option>
<option value="150.00" value2="5.00">Incredible 2</option>
<option value="150.00" value2="5.00">Evo</option>
<option value="125.00" value2="5.00">Evo Shift</option>
<option value="200.00" value2="10.00">Evo LTE</option>
<option value="175.00" value2="10.00">Rhyme</option>
<option value="225.00" value2="10.00">Rezound</option>
<option value="400.00" value2="20.00">DNA</option>
<option value="450.00" value2="20.00">HTC One</option>
<option value="600.00" value2="20.00">HTC One M8</option>
<option value="">-----Huawei-----</option>
<option value="100.00" value2="5.00">Ascend Y</option>
<option value="150.00" value2="5.00">Ascend Plus</option>
<option value="">-----LG-----</option>
<option value="50.00" value2="5.00">Optimus Dynamic</option>
<option value="100.00" value2="5.00">Optimus Zip</option>
<option value="75.00" value2="5.00">Vortex</option>
<option value="100.00" value2="5.00">Enlighten</option>
<option value="250.00" value2="10.00">Lucid</option>
<option value="200.00" value2="10.00">Revolution</option>
<option value="250.00" value2="10.00">Spectrum</option>
<option value="450.00" value2="20.00">G2</option>
<option value="">-----Motorola-----</option>
<option value="100.00" value2="5.00">Droid 2</option>
<option value="175.00" value2="5.00">Droid 3</option>
<option value="200.00" value2="10.00">Droid 4</option>
<option value="225.00" value2="10.00">Bionic</option>
<option value="250.00" value2="10.00">Razr</option>
<option value="275.00" value2="10.00">Razr Maxx</option>
<option value="300.00" value2="10.00">Razr HD</option>
<option value="350.00" value2="20.00">Moto X</option>
<option value="300.00" value2="20.00">Moto G</option>
<option value="350.00" value2="20.00">Droid Ultra</option>
<option value="">-----SAMSUNG-----</option>
<option value="200.00" value2="10.00">Galaxy Stellar</option>
<option value="250.00" value2="10.00">Galaxy Stratosphere 2</option>
<option value="225.00" value2="10.00">Galaxy Nexus</option>
<option value="225.00" value2="5.00">Epic 4G</option>
<option value="250.00" value2="10.00">Galaxy S2</option>
<option value="300.00" value2="20.00">Galaxy S3</option>
<option value="450.00" value2="20.00">Galaxy S4</option>
<option value="650.00" value2="30.00">Galaxy S5</option>
<option value="450.00" value2="20.00">Galaxy Note ll</option>
<option value="600.00" value2="30.00">Galaxy Note lll</option>
</select>
</div></td>
<td><div class="styled" align="center">
<select name="item1" id="item1">
<option value="">New Activation?</option>
<option value="5.00">YES</option>
<option value="0.00">NO</option>
</select>
</div></td>
<span style="visibility:hidden;display:none;" id="phones"></span>
<td><div align="center">
<span id="cost"></span>
</div></td>
<td><div align="center">
<span id="price"></span>
</div></td>
<td>
<div align="center">
<input name="meid" type="Text" id="meid"/>
</div>
</td>
<td>
<div align="center">
<input name="number" type="Text" id="number"/>
</div>
</td>
</tr>
and the javascript
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
item.onchange = function() {
price.innerHTML = "$" + this.value;
cost.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
phone.innerHTML = "" + (this[this.selectedIndex].getAttribute('value3'));
};
and here is a jsfiddle
after messing around with this modified script i think that this is the line that is not working properly
var commission = +phoneEl.getAttribute("value2");
I cant figure out what is wrong. http://jsfiddle.net/3zf8G/4/
Here:
var phoneEl = document.getElementById('item');
var activationEl = document.getElementById('item1');
function updatePrice() {
var phonePrice = +phoneEl.value;
price.innerHTML = "$"+phonePrice;
}
function updateCommission() {
var commission = +phoneEl.options[phoneEl.selectedIndex].getAttribute("value2"),
activationPrice = +activationEl.value,
totalCommission = commission + activationPrice;
cost.innerHTML = "$" + totalCommission;
}
phoneEl.onchange = function() {
updatePrice();
updateCommission();
};
activationEl.onchange = function() {
updatePrice();
updateCommission();
};
fiddle: http://jsfiddle.net/3zf8G/5/
You're not converting the values stored in your value and value2 attributes to numbers; you can parse a string into a number by preceding it with a +. And you're not watching for changes to the activation drop down. Also the variable phone is not defined. I changed your variable names for the sake of clarity.

Categories

Resources