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);
}
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 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>
I have a form that allows me to select a date (year, month, day)
The HTML snippet looks as follows:
<form id="lottotab1" name="lottotab1">
<input id="action" name="action" value="winningnumbers" type="hidden" />
<input id="searchStartDate" name="searchStartDate" type="hidden" />
<input id="searchEndDate" name="searchEndDate" type="hidden" />
<!-- Search Date -->
<div class="searchDate">
<table>
<tbody>
<tr>
<td/>
<td align="center">
<td align="center">
<td align="center">
<td/>
<td align="center" />
<td align="center" />
<td/>
</tr>
<tr>
<td>
<td>
<select id="lottoStartDateYear" class="" name="lottoStartDateYear" onchange="javascript:funChangeDate()">
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</td>
<td>
<select id="lottoStartDateMonth" class="" name="lottoStartDateMonth" onchange="javascript:funChangeDate()">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</td>
<td>
<select id="lottoStartDateDay" class="" name="lottoStartDateDay">
<option value="-1">Day</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>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</td>
<td/>
<td/>
<td/>
<td>
<!-- For Ticket: 4500 -->
<a href="#" name="getWinningNumbers" onclick="setValueLoadGame();searchWinningNumbers();showSearch();">
<img style="margin:0px 12px" src="/wps/PA_NYSLNumberCruncher/css/images/logo/numTrackerGoPurple.gif" />
</a>
</td>
</tr>
<tr>
</tbody>
</table>
</div>
I'm trying to programmatically change the date and submit form. I know I could do this using Selenium by clicking on the year/month/day and changing it like that. However, this is a hassle.
Is there any way to stimulate changing the date and clicking the 'Go" button by sending an http request in the browser?
I know the form contains various names and attributes but I am not sure how to combine these values/attributes to form a valid http request that changes the date and submits form automatically.
Further, I observed that the page executes some kind of Javascript when you select the date range does this mean it cannot be stimulated via pure http request?
Thanks
If you just want the numbers data, you can get it directly. If you open developer tools and watch the XHR requests when you load the page, you will see how the page gets the data:
http://nylottery.ny.gov/wps/PA_NYSLNumberCruncher/NumbersServlet?game=win4&action=winningnumbers&startSearchDate=04/2017&endSearchDate=06/2017&pageNo=1&last=0&perPage=50&sort=0
If the page uses jQuery, then you can do following in browser console:
$("#lottoStartDateYear option[value=2013]").attr('selected', 'true');
$("#lottoStartDateMonth option[value=08]").attr('selected', 'true');
$("#lottoStartDateDay option[value=13]").attr('selected', 'true');
setValueLoadGame();
searchWinningNumbers();
showSearch();
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 am making a form that submits some values to a site for booking hotel rooms. The urls should look like this:
https://secure.netbookerng.com/soahotel/zablijak/cs/hseoptx_UZ/hseoid_22959509.html?autosearch=true&begindate=11/30/11&enddate=12/16/11&adults=1&children=0&rooms=1
I managed only to get a URL that looks like this:
https://secure.netbookerng.com/soahotel/zablijak/cs/hseoptx_UZ/hseoid_22959509.html?begindate=11%2F30%2F2011&enddate=12%2F15%2F2011&rooms=1&adults=1&children=0&Check=Check+Availability
Here is what I did:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$('#datepicker1').datepicker({minDate:0,dateFormat:'mm/dd/yy'});
$("#datepicker2").datepicker({minDate:0,dateFormat:'mm/dd/yy'});
$('#arrival').datepicker({dateFormat:'mm/dd/yy'});
$("#departure").datepicker({dateFormat:'mm/dd/yy'});
$("#posalji").click(function(){
var datum1=$('#datepicker1').val();
var datum2=$('#datepicker2').val();
var rooms=$('#rooms').val();
var adults=$('#adults').val();
var children=$('#children').val();
datum1=datum1.substring(3,5)+"/"+datum1.substring(0,2)+"/"+datum1.substring(8,10);
datum2=datum2.substring(3,5)+"/"+datum2.substring(0,2)+"/"+datum2.substring(8,10);
});
});
</script>
</head>
<body>
<table border="0" cellspacing="1" cellpadding="1" style="background-color: #7a7c72; opacity: 0.8; margin-top: 15px; width: 230px;">
<tbody>
<tr>
<td align="center" style="background-color: #61625b; color: #ffffff; font-weight: bold; padding: 3px; font-size: 13px;">CHECK AVAILABILITY</td>
</tr>
<tr>
<td align="center"><form id="availability" type="get" action="https://secure.netbookerng.com/soahotel/zablijak/cs/hseoptx_UZ/hseoid_22959509.html">
<table border="0" cellspacing="2" cellpadding="0" style="width: 200px;">
<tbody>
<tr>
<td height="22" colspan="3" align="left" valign="bottom" style="font-size: 11px; font-weight: bold;"><label>Check in</label></td>
</tr>
<tr>
<td height="17" colspan="3" align="left" valign="bottom"><input name="begindate" type="text" id="datepicker1" /></td>
</tr>
<tr>
<td height="17" colspan="3" align="left" valign="bottom" style="font-size: 11px; font-weight: bold;"><label>Check out</label></td>
</tr>
<tr>
<td height="17" colspan="3" align="left" valign="bottom"><input id="datepicker2" name="enddate" type="text" /></td>
</tr>
<tr style="font-size: 11px; font-weight: bold;">
<td width="65" height="17" align="left" valign="bottom">Rooms</td>
<td width="65" height="17" align="left" valign="bottom">Adults</td>
<td width="65" height="17" align="left" valign="bottom">Children</td>
</tr>
<tr>
<td width="65" height="17" align="left" valign="bottom"><select name="rooms" id="rooms"> <option value="1" selected="selected">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> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select></td>
<td width="65" height="17" align="left" valign="bottom"><select name="adults" id="adults"> <option value="1" selected="selected">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> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select></td>
<td width="65" height="17" align="left" valign="bottom"><select name="children" id="children"> <option value="0" selected="selected">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> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select></td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<input id="posalji" name="Check" type="submit" value="Check Availability">
</td>
</tr>
</tbody>
</table>
</form></td>
</tr>
</tbody>
</table>
</body>
</html>
In order to make it work I need:
to replace %2F from the URL with just /
I need to add autosearch=true after ?
I need to remove the last parameter called Check
I am not really good with javascript, I'll appreciate some help.
Add a hidden input element to your form: <input type="hidden" name="autosearch" value="true" />
To remove "Check" parameter, eliminate the name attribute from that input element.
Javascript has a DecodeURIComponent function:
http://www.w3schools.com/jsref/jsref_decodeURIComponent.asp
**DecodeURIComponent(uriString) (ex. %2F becomes /).
Use search(regEx) to find your Check parameter, and get its last occuring index.
Use subStr(0, uriString.Length - index + 1) to grab the URI from the beginning to right before the parameter you want removed.
Append your autosearch onto the trimmed string.
Note, this assumes Check is truly last as Step 3 will clip everything after the index of of "Check"... using a better regEx expression in Step 2 would allow you to find the beginning and end index of this string and surgically remove it without affecting anything that may or may not occur afterward.