I want to create a drop down after user clicks on a table row.How can i do this using bootstrap and JavaScript?
Here is My table
jQuery(document).ready(function($) {
$(".clickable-row").click(function(e) {
if(e.target.id != "listItems"){
$(this).find("#listItems").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
<table>
<tr class='clickable-row' data-href='url://'>
<td>1</td>
<td>ABC</td>
<td>123456789</td>
<td>
<select id="listItems">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr class='clickable-row' data-href='url://'>
<td>2</td>
<td>BCD</td>
<td>123456789</td>
<td>
<select id="listItems">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
Related
I am having a table where there is two drop down drop-1 and drop-2. So I want to have drop-1 and drop-2 combination as unique.
I tried to create a new object and store that value in that but did not work.
<!DOCTYPE html>
<html>
<body>
<h2>Table</h2>
<table>
<tr>
<th>DD 1</th>
<th>DD 2</th>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Need some clarity of thoughts how to achieve that need some suggestion the best possible way to do it if possible with an example
I have several select tags with different values of name attribute. I must get each of the value and put it into object variable. How to do it?
My code:
var obj = {};
$('.variants tbody tr td.value').children('select').each(function(index, value) {
alert($(this).attr('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="variants">
<tbody>
<tr>
<td>1</td>
<td class="value">
<select name="color">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td class="value">
<select name="size">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td class="value">
<select name="material">
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
</tbody>
</table>
Here, I must get
{"color":"selected_option_value", "size":"selected_option_value", "material":"selected_option_value"}
You should select all select elements in the table (you don’t need such a complex jQuery query to achieve so), iterate thru the collection; then for each element of the collection get its name (using the attr() function) and selected value (using the val() function) and create a property on the output object (obj) using the name of the select and assign its value to the select value.
// define the container object
var obj = {};
// for each select in the table
$('.variants select').each(function(index, select) {
// set the current item as a jQuery object
var current = $(select);
// sets the object key using the name of the select and the current selected value as the object key value
obj[current.attr('name')] = current.val();
});
// output
console.log(obj);
You could do the same using vanilla JavaScript too as in the other answers examples.
You can loop through the selection inputs with a forEach loop and fill in the obj object:
Select the input boxes and unwrap them in an array:
[...document.querySelectorAll('.value')]
in the loop select the child select element with:
menu.querySelector('select')
then add a new key/value pair in obj:
obj[element.getAttribute('name')] = element.value
↑ ↑
key value
So the full code looks like:
const obj = {}
document.querySelector('.button').addEventListener('click', (e) => {
[...document.querySelectorAll('.value')].forEach(menu => {
const element = menu.querySelector('select');
obj[element.getAttribute('name')] = element.value
})
console.log(obj)
})
I have set an event listener to show it working:
const obj = {}
document.querySelector('.button').addEventListener('click', (e) => {
[...document.querySelectorAll('.value')].forEach(menu => {
const element = menu.querySelector('select');
obj[element.getAttribute('name')] = element.value
})
console.log(obj)
})
<table class="variants">
<tbody>
<tr>
<td>1</td>
<td class="value">
<select name="color">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td class="value">
<select name="size">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td class="value">
<select name="material">
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
</tbody>
</table>
<button class="button">Give object</button>
You don't need jQuery to do this you, this will return an object on page load. You will have to wrap this in a function and add an event listener to return an object when the select values have changed or on form submission if thats what you are trying to accomplish
const variantsTable = document.querySelector('.variants')
const variantsSelects = Array.from(variantsTable.querySelectorAll('select'))
const obj = {}
variantsSelects.forEach(item => {
obj[item.name] = item.value
})
console.log(obj)
Output :
{"color":"1","size":"4","material":"7"}
You can try here :
const obj = {};
$('table.variants td.value select').each(function(index) {
obj[$(this).attr("name")] = $(this).val();
});
$("#output").text(JSON.stringify(obj));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="variants">
<tbody>
<tr>
<td>1</td>
<td class="value">
<select name="color">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td class="value">
<select name="size">
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td class="value">
<select name="material">
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
</tr>
</tbody>
</table>
<pre id="output"></pre>
I have a page that allows a user to select the order of how fields are displayed. The drop downs are dynamically created and you only have the number of options based on the number of fields there are.
For example, if there are 5 fields, you have options 1-5 to sort your fields by.
What I am trying to accomplish is when you select a number from the dropdown, it "Swaps" that number with whatever one previously held that spot.
If I changed Record 4 to 3, those two drop downs would now be swapped... if that makes sense.
In the example below, change one of the numeric dropdowns to another choice. The original choice that held that value is updated but the actual one you are changing doesn't get the new value.
JS Fiddle: https://jsfiddle.net/y7g155mh/4/
<table name="selectedFields" class="table table-condensed selectedFields">
<thead>
<tr>
<th class="small span1">
<input type="checkbox" id="checkAllSelected">
</th>
<th class="small">Field Name</th>
<th class="small">Sort Order</th>
<th class="small">Sort Type</th>
<th class="small">Display Order</th>
</tr>
</thead>
<tbody name="selectedRows">
<tr data-fid="5">
<td class="small"></td>
<td class="small">Request ID</td>
<td class="small">
<select data-current="1" data-type="sortOrder" class="span1" name="sortOrder">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="1" data-type="displayOrder" class="span1" name="displayOrder">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="16">
<td class="small"></td>
<td class="small">Task ID</td>
<td class="small">
<select data-current="2" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="2" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="9">
<td class="small"></td>
<td class="small">Task Start Date</td>
<td class="small">
<select data-current="3" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="3" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="17">
<td class="small"></td>
<td class="small">Task Completion Date</td>
<td class="small">
<select data-current="4" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="4" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>
</td>
</tr>
</tbody>
</table>
$('body').on('change', 'select', function() {
saveOrder($(this).val(), $(this).data('type'), $(this).data('current'));
});
// Update the field order numbers and save the data
function saveOrder(order, type, current) {
// First thing we need to do is swap the selected value with the one we are changing it for.
$('[name=' + type + ']').find('option[value="' + order + '"]:selected').parent().val(current);
return false;
// Do something here with storing data
}
It seems like this is what you want to achieve. There is room for improvement.
$('body').on('change', 'select', function() {
saveOrder($(this));
});
// Update the field order numbers and save the data
function saveOrder(select) {
var order = select.val(),
type = select.data('type'),
current = select.data('current');
$('select[name=sortOrder][data-current="'+current+'"]').val(order);
$('select[name=sortOrder][data-current="'+order+'"]').val(current);
return false;
// Do something here with storing data
}
I have very little experience with programming, but have been requested to hide a row of a table on a customer site using only Javascript. I know how to do this with both HTML or CSS, but have been told I cannot access those elements in the 3rd party platform we are using and must create a script for it.
I have the html entered at http://jsfiddle.net/zcho5zs5/ and could use any help to get the entire second row to be hidden. All that should be displayed is "Select Payment Method" and "Pay by Saved Card" with the dropdown. Everything below that needs to be hidden.
HTML Code
<div id="t1_t2_c_p_pnlPaymentMethod">
<span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span>
<table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions">
<tbody><tr id="t1_t2_c_p_rowSavedCC">
<td valign="top"><input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked"></td>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td>
<td><select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;">
<option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-e-e">P-Card 4375</option>
</select> </td>
<td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a></td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="t1_t2_c_p_rowCreditCard">
<td valign="top"><input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard"></td>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td>
<td><select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;">
<option selected="selected" value="Visa">Visa</option>
</select></td>
</tr><tr>
<td>Account Number: </td>
<td><input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;"></td>
</tr>
<tr>
<td>Expiration Date: </td>
<td>
<select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth">
<option selected="selected" value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear">
<option value=""></option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select></td>
</tr>
<tr id="t1_t2_c_p_rowSaveCCQuestion">
<td></td>
<td><input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><br>
</div>
Javascript?
I have tried several suggestions I have found on this site for similar functions, but nothing seems to work.
Below is javascript code to hide the specific row that contains "Pay by Credit Card".
It sets the CSS style display:none on the <tr> with the id "t1_t2_c_p_rowCreditCard".
document.getElementById('t1_t2_c_p_rowCreditCard').style.display='none';
document.getElementById('t1_t2_c_p_rowCreditCard').style.display = 'none';
<div id="t1_t2_c_p_pnlPaymentMethod">
<span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span>
<table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions">
<tbody>
<tr id="t1_t2_c_p_rowSavedCC">
<td valign="top">
<input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked">
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td>
<td>
<select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;">
<option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-e-e">P-Card 4375</option>
</select> </td>
<td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="t1_t2_c_p_rowCreditCard">
<td valign="top">
<input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard">
</td>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td>
<td>
<select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;">
<option selected="selected" value="Visa">Visa</option>
</select>
</td>
</tr>
<tr>
<td>Account Number: </td>
<td>
<input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;">
</td>
</tr>
<tr>
<td>Expiration Date: </td>
<td>
<select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth">
<option selected="selected" value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear">
<option value=""></option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select>
</td>
</tr>
<tr id="t1_t2_c_p_rowSaveCCQuestion">
<td></td>
<td>
<input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</div>
Edit:
Javascript in a window.onload function will execute after the page is loaded, causing a delay before your element is hidden. CSS, on the other hand, does not need the DOM to be ready.
I see that you have added the javascript using <script> tags. You mentioned that you cannot use CSS but, if you can use <script> tags, you may be able to use <style> tags as well:
<style type="text/css">
tr#t1_t2_c_p_rowCreditCard {display:none;}
</style>
<style type="text/css">
tr#t1_t2_c_p_rowCreditCard {
display:none;
}
</style>
<div id="t1_t2_c_p_pnlPaymentMethod">
<span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span>
<table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions">
<tbody>
<tr id="t1_t2_c_p_rowSavedCC">
<td valign="top">
<input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked">
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td>
<td>
<select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;">
<option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-e-e">P-Card 4375</option>
</select> </td>
<td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="t1_t2_c_p_rowCreditCard">
<td valign="top">
<input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard">
</td>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td>
<td>
<select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;">
<option selected="selected" value="Visa">Visa</option>
</select>
</td>
</tr>
<tr>
<td>Account Number: </td>
<td>
<input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;">
</td>
</tr>
<tr>
<td>Expiration Date: </td>
<td>
<select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth">
<option selected="selected" value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear">
<option value=""></option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select>
</td>
</tr>
<tr id="t1_t2_c_p_rowSaveCCQuestion">
<td></td>
<td>
<input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</div>
I wanted to create a table where dynamic values are displayed in a column depending on values selected by users. Below is my code for it. So basically, depending on the number of adults and number of children that are selected, the Price will be calculated. So if someone chooses 1 adult and 0 children, then the Amount for 2 Day ticket should be $235, for 3 day it will be $301 and so on. I want this done on selection change method of selectboxes. I am also not very familiar with JQuery. How do I accompalish this using JQuery?
Ages 10+:
<select id="Adult" name="Adult">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Ages 3-9:
<select id="Child" name="Child">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<table width="800" border="1" align="center">
<tr>
<td width="224">Product</td>
<td width="246">Ages 10+</td>
<td width="192">Ages 3-9</td>
<td width="110">Price</td>
</tr>
<tr>
<td>2 Day Ticket</td>
<td>$235.00</td>
<td>$223.00</td>
<td>$<span class="amount"></span> </td>
</tr>
<tr>
<td>3 Day Ticket</td>
<td>$301.00</td>
<td>$285.00</td>
<td>$<span class="amount"></span></td>
</tr>
<tr>
<td>4 Day Ticket</td>
<td>$315.00</td>
<td>$298.00</td>
<td>$<span class="amount"></span></td>
</tr>
<tr>
<td>5 Day Ticket</td>
<td>$328.00</td>
<td>$309.00</td>
<td>$<span class="amount"></span></td>
</tr>
</table>
Here is complete code to accomplish what you're trying to do. I added some id's to the totals. See the fiddle for a working example. It would be better to not hard code the values, but this works as a starting point.
var numAdult = 0;
var numChild = 0;
$("#Adult").change( function(){
numAdult = $("#Adult").val();
calcTotals();
});
$("#Child").change( function() {
numChild = $("#Child").val();
calcTotals();
});
function calcTotals(){
$("#2DayTotal").text(235*numAdult + 223*numChild);
$("#3DayTotal").text(301*numAdult + 285*numChild);
$("#4DayTotal").text(315*numAdult + 298*numChild);
$("#5DayTotal").text(328*numAdult + 309*numChild);
}