I have a two html fields, one is a location (country) drop down and the other field is a date-time drop down.
When a user selects a country from the location drop down I want the current date-time to be auto populated with respect to the country selected from the dropdown.
How can this be done?
HTML code:
<html>
<body>
<form>
<tr>
<td>
<label for="location">Location :</label>
</td>
<td>
<select name="Location">
<option value="INDIA">INDIA</option>
<option value="US">US</option>
<option value="JAPAN">JAPAN</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="date">Date & Time :</label>
</td>
<td>
<input type="text" name="date">
</td>
</tr>
</form>
</body>
Many countries have more than one timezone. In the below JavaScript code I have used two timezones. The first one is the current Indian timezone or system date and time, and the second one is the USA timezone. This might guide you to find a solution.
Related
Is there way to determite, which option from datalist was selected? I mean when I have duplicite names in datalist, see example below:
<input type="text" list="cities" id="search-bar" name="city" value="" autocomplete="off" placeholder="type city">
<datalist id="cities">
<option value="Olo (PT)" data-city-index="0"></option>
<option value="Olo (PT)" data-city-index="1"></option>
<option value="Olonets" data-city-index="2"></option>
<option value="Olot" data-city-index="3"></option>
</datalist>
It is part of weather app, and in some countries, there are cities with same name (but different location) - so how I can distinguih if user have clicked on first or second Olo in example? Is it even possible? I have idea, that maybe is there way to use data attribute, but I dont know if it actually solve my problem (and how...)
Please help.
EDIT:
I understand, that it is for user little bit uncomfortable to actually "don't know" which city they are selecting in datalist, but unfortunatelly I have no way to "help" them (I have only database with city names and longitude and latitude of it). So after selection of city I include link to google maps (for that location) to displaying part
you should change value of options in city's name of countries . when user click in list it
<input type="text" list="cities" id="search-bar" name="city" value="" autocomplete="off" placeholder="type city">
<datalist id="cities">
<option value="city1 (PT)" data-city-index="0"></option>
<option value="city2 (PT)" data-city-index="1"></option>
<option value="city3" data-city-index="2"></option>
<option value="city4" data-city-index="3"></option>
</datalist>
I am fairly new to HTML & Javascript and I have been assigned a task to create a HTML form for a restaurant which allows the user to input their information for a booking.
So far I have created the form for the website and validated each input field in order to ensure the correct information is entered into the necessary fields.
I have also tried to enable the total cost to be calculated on screen so the user can see how much their booking will cost before they click the submit button. However, the code I have thus far does not seem to be functioning as the total price never increases from 0 if an option is picked.
Here is the relevant html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Select Party Size:</strong>
<br>
<select name="party" id="party" onblur="validateSelect(name)">
<option value="">Please Select</option>
<option value="5">1 Person (£5)</option>
<option value="10">2 People (£10)</option>
<option value="15">3 People (£15)</option>
<option value="20">4 People (£20)</option>
<option value="25">5 People (£25)</option>
<option value="30">6 People (£30)</option>
<option value="35">7 People (£35)</option>
<option value="40">8 People (£40)</option>
<option value="45">9 People (£45)</option>
<option value="50">10+ People (£50)</option>
</select>
...
<strong> VIP Area? </strong>
<br>
Yes (+£5) <input name="hand" id="left" value="5" onblur="validateRadio(id)" type="radio">
No <input name="hand" id="right" value="0" onblur="validateRadio(id)" checked="" type="radio">
<span class="validateError" id="handError" style="display: none;">Please specify whether you would like a table in the VIP area.</span>
<strong> Total booking cost based on party size <span id="price">0</span> VIP selection: </strong>
Here is the relevant javascript to perform the calculations:
$(document).ready(function(){
$(document).on('change', '#party', function(e) {
$('#price').html(parseInt($(this).val()) + parseInt($('input[name="hand"]:checked').val()));
});
$(document).on('click', 'input[name="hand"]', function(e) {
$('#price').html(parseInt($('#party').val()) + parseInt($(this).val()));
});
});
For example, if the customer selects that there are 6 people in their party(+£30) and they also wish to be seated in the VIP area(+£5), the total price displayed at the bottom of the page would be £35. If anyone has any suggestions as to why my code isn't functioning I would appreciate the help.
Thank you.
Im trying to get text from a product table in order to sAVE them to a shopping cart and put them into a database at a later date.I also want a confirm alert box to appear for the user to confirm before it gets written to a database table. However im having trouble getting the java script to read my html, as i only need to read the fields that have had the drop down list selected.
Any help or guidance would be great!!
<script type="text/javascript">
function myFunction()
{
alert(document.getElementById("musicStore").rows[0,1,2,3,4].cells.namedItem(number1,+ "price",+ "album",+ "type").innerHTML);
}
</script>
<form name= "musicStore" Action="" Method="get">
<tr>
<th>Artist</td>
<th>Title</td>
<th>Duration</td>
<th>Price</td>
<th>Album</td>
<th>Format</td>
</tr>
<tr>
<td>Rocking eddie</td>
<td>Song never leaves</td>
<td>04:34</td>
<td id="price" value="8.99">£8.99</td>
<td id="album" value="freshprince">Fresh Prince</td>
<td><select name="format" id="type">
<option value=""></option>
<option value="cd">CD</option>
<option value="digital">Download</option>
</select>
</td>
</tr>
<tr>
<td>Rocking eddie</td>
<td>Go Home</td>
<td>06:24</td>
<td id="price" value="10.99">£10.99</td>
<td id="album" value="Coffee">Coffee</td>
<td><select name="format" id="type">
<option value=""></option>
<option value="cd">CD</option>
<option value="digital">Download</option>
</select>
</td>
</tr>
<div style ="float: right";>
<button onclick="myFunction()">Add to Cart</button>
</div>
</form>
Several problems:
You have multiple elements with the same ID. For example you have 2 elements with id='type'. ID's are supposed to be unique and won't function properly if there are repeats.
Use class instead:
<td class="price" value="8.99">£8.99</td>
Your javascript code isn't going to loop through properly.
You can't use innerHTML in all of your instances because the 'type' is select list. You'd have to get the value of that element as opposed to the innerHTML.
Here is a JSFiddle of the working code.
I would change the 2nd to this: <select name="format" id="type2">
Something different.
I think you then want:
document.querySelector('#type').value
document.querySelector('#type2').value
I'm using twitter bootstrap and can't find any date pickers that work with my needs or html.
I've got a form and within that some select tags. I want to know how you can insert a date picker for twitter bootstrap that will then send the relevant picked dates by the user once they have submitted the request. This is my html so far:
<div class="row">
<div class="span11">
<form id ="eventForm">
<select name="event" id="abc">
<option value="w" selected="selected">US</option>
<option value="e">uk</option>
<option value="r">prk</option>
<option value="t">chn</option>
</select>
<select name="period" id="time">
<option value="beginning" selected="selected">from start</option>
<option value="the last 24 hours">Last 24 hours</option>
<option value="the previous week">Previous week</option>
</select>
<input type="submit" id="open" onclick="heading()" value="Start" />
<input type="button" onclick="closeMap()" value="Stop Request"/>
</form>
</div>
<div class="span1">
<form name="moreAnalysis" id="moreAnalysis" action="/p" method="post">
<input type="submit" value="Further Analysis">
</form>
</div>
</div>
So ideally where I'm letting user choose periods I would want them to choose from a date menu.
I've tried several options and none seem to work and this has taken be all day as a html/ javascript novice.
Thanks
I would recommend this one by Stafan Petre
http://www.eyecon.ro/bootstrap-datepicker/
I'm struggling with the following and I'm not even sure if it's possible at all.
I have, at start, two pull down menus. Menu one with suppliers and (currently) a second pull down with all size of photos that are in the database. Where I want to go to is that when selecting a supplier, the second pull down menu changes with the option this supplier provides. So far nothing difficult using Jquery and use the output to update the second pull down menu.
Now comes the difficult part. I use the second drop down to insert their information. So the second pull down menu, could be be dozen of them, are all the same. I use a JS script to copy the table row of the form. Since an ID should be unique, these pull downs don't have an ID.
Is it still possible to update all of these 'second' pull down menu's on change of the first pull down menu? And if so, how is it possible?
The first pulldown that should trigger the update of the dropdowns below:
<select name="leverancier" id="leveranciers">
<option value="1">Supplier 1</option>
<option value="2">Supplier 2</option>
</select>
This part gets duplicated:
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
Thanks
Ralf
Give each secondary SELECT the same class.
Then, define an event handler on the primary SELECT that updates secondary SELECTs by targeting that class.
E.g.:
jQuery('#leveranciers').bind('change', function(event) {
// somehow determine the new set of options for all secondary SELECTs
jQuery('SELECT.secondary').each(function(i, e) {
jQuery(e).html(newOptionsMarkup);
});
return true;
});
(Please ignore the terrible .html()-based approach. The important piece is the way updates are targeted.)