|
JavaScript - Reseting Values In Dropdowns.
Hi,
I have mutiple dropdowns in my HTML table in one of the columns.The dropdowns have three values 'Blank','Approve' and 'Reject'.What I want is when user changes the values in any of the dropdown,It will ask for the confirmation from user.If user click OK ,it will change the value in dropdown and calls another function else it will be reset to previous value.e.g, Suppose previous value is 'Reject' and user tries to change it to 'Approve'.When confirm window comes up and user clicks cancel it will reset to Reject.On OK it will change to 'Approve'. How can I handle this in Javascript? Please help. Thanks, Anil Similar TutorialsHello there I've been searching and searching but couldn't make this script stop reseting after reloading the page. The scripts counts down some timers every x hours but the problem is that each time the page is reloaded the timer resets. Could anyone help me here how to keep the countdown going even if i reload page? thanks in advance I call the timers with. Example Timer 8: >div... etc id="timeLeft8" Code: <script type="text/javascript">
var events = new Array();
events[1]={name: 'Blood Castle:', startUp: new Array(
{hour:0,minute:25},
{hour:2,minute:25},
{hour:4,minute:25},
{hour:6,minute:25},
{hour:8,minute:25},
{hour:10,minute:25},
{hour:12,minute:25},
{hour:14,minute:25},
{hour:16,minute:25},
{hour:18,minute:25},
{hour:20,minute:25},
{hour:22,minute:25}
)}
events[2]={name: 'Devil Squa ', startUp: new Array(
{hour:1,minute:55},
{hour:3,minute:55},
{hour:5,minute:55},
{hour:7,minute:55},
{hour:9,minute:55},
{hour:11,minute:55},
{hour:13,minute:55},
{hour:15,minute:55},
{hour:17,minute:55},
{hour:19,minute:55},
{hour:21,minute:55},
{hour:23,minute:55}
)}
events[3]={name: 'Chaos Castle:', startUp: new Array(
{hour:0,minute:55},
{hour:2,minute:55},
{hour:4,minute:55},
{hour:6,minute:55},
{hour:8,minute:55},
{hour:10,minute:55},
{hour:12,minute:55},
{hour:14,minute:55},
{hour:16,minute:55},
{hour:18,minute:55},
{hour:20,minute:55},
{hour:22,minute:55}
)}
events[4]={name: 'Red Dragon:', startUp: new Array(
{hour:0,minute:0},
{hour:2,minute:0},
{hour:4,minute:0},
{hour:6,minute:0},
{hour:8,minute:0},
{hour:10,minute:0},
{hour:12,minute:0},
{hour:14,minute:0},
{hour:16,minute:0},
{hour:18,minute:0},
{hour:20,minute:0},
{hour:22,minute:0}
)}
events[5]={name: 'Gold Invasion:', startUp: new Array(
{hour:0,minute:0},
{hour:2,minute:0},
{hour:4,minute:0},
{hour:6,minute:0},
{hour:8,minute:0},
{hour:10,minute:0},
{hour:12,minute:0},
{hour:14,minute:0},
{hour:16,minute:0},
{hour:18,minute:0},
{hour:20,minute:0},
{hour:22,minute:0}
)}
events[6]={name: 'White Wizard:', startUp: new Array(
{hour:0,minute:0},
{hour:2,minute:0},
{hour:4,minute:0},
{hour:6,minute:0},
{hour:8,minute:0},
{hour:10,minute:0},
{hour:12,minute:0},
{hour:14,minute:0},
{hour:16,minute:0},
{hour:18,minute:0},
{hour:20,minute:0},
{hour:22,minute:0}
)}
events[7]={name: 'Blue:', startUp: new Array(
{hour:0,minute:40},
{hour:1,minute:40},
{hour:2,minute:40},
{hour:3,minute:40},
{hour:4,minute:40},
{hour:5,minute:40},
{hour:6,minute:40},
{hour:7,minute:40},
{hour:8,minute:40},
{hour:9,minute:40},
{hour:10,minute:40},
{hour:11,minute:40},
{hour:12,minute:40},
{hour:13,minute:40},
{hour:14,minute:40},
{hour:15,minute:40},
{hour:16,minute:40},
{hour:17,minute:40},
{hour:18,minute:40},
{hour:19,minute:40},
{hour:20,minute:40},
{hour:21,minute:40},
{hour:22,minute:40},
{hour:23,minute:40},
{hour:24,minute:40}
)}
events[7]={name: 'Hide&Seek:', startUp: new Array(
{hour:0,minute:42},
{hour:1,minute:22},
{hour:2,minute:32},
{hour:3,minute:42},
{hour:4,minute:52},
{hour:6,minute:02},
{hour:7,minute:12},
{hour:8,minute:22},
{hour:9,minute:32},
{hour:10,minute:42},
{hour:11,minute:52},
{hour:13,minute:02},
{hour:14,minute:12},
{hour:15,minute:22},
{hour:16,minute:32},
{hour:17,minute:42},
{hour:18,minute:52},
{hour:20,minute:02},
{hour:21,minute:12},
{hour:22,minute:22},
{hour:23,minute:32}
)}
events[8]={name: 'Sky:', startUp: new Array(
{hour:1,minute:5},
{hour:4,minute:5},
{hour:7,minute:5},
{hour:10,minute:5},
{hour:13,minute:5},
{hour:16,minute:5},
{hour:19,minute:5},
{hour:23,minute:5}
)}
events[9]={name: 'Boss Attack:', startUp: new Array(
{hour:1,minute:50},
{hour:4,minute:50},
{hour:7,minute:50},
{hour:10,minute:50},
{hour:13,minute:50},
{hour:16,minute:50},
{hour:23,minute:50}
)}
events[10]={name: 'Happy Hour:', startUp: new Array(
{hour:5,minute:5},
{hour:2,minute:5},
{hour:8,minute:5},
{hour:11,minute:5},
{hour:14,minute:5},
{hour:17,minute:5},
{hour:20,minute:5},
{hour:0,minute:5}
)}
events[11]={name: 'Hit and Up:', startUp: new Array(
{hour:0,minute:20},
{hour:2,minute:20},
{hour:5,minute:20},
{hour:8,minute:20},
{hour:11,minute:20},
{hour:14,minute:20},
{hour:20,minute:20}
)}
events[12]={name: 'Raklion:', startUp: new Array(
{hour:0,minute:15},
{hour:3,minute:15},
{hour:6,minute:15},
{hour:9,minute:15},
{hour:12,minute:15},
{hour:15,minute:15},
{hour:18,minute:15},
{hour:21,minute:15}
)}
events[13]={name: 'Moss:', startUp: new Array(
{hour:3,minute:35},
{hour:7,minute:35},
{hour:11,minute:35},
{hour:15,minute:35},
{hour:19,minute:35},
{hour:23,minute:35}
)}
events[14]={name: 'Illusion Temple:', startUp: new Array(
{hour:0,minute:25},
{hour:1,minute:25},
{hour:2,minute:25},
{hour:3,minute:25},
{hour:4,minute:25},
{hour:5,minute:25},
{hour:6,minute:25},
{hour:7,minute:25},
{hour:8,minute:25},
{hour:9,minute:25},
{hour:10,minute:25},
{hour:11,minute:25},
{hour:12,minute:25},
{hour:13,minute:25},
{hour:14,minute:25},
{hour:15,minute:25},
{hour:16,minute:25},
{hour:17,minute:25},
{hour:18,minute:25},
{hour:19,minute:25},
{hour:20,minute:25},
{hour:21,minute:25},
{hour:22,minute:25},
{hour:23,minute:25},
{hour:24,minute:25}
)}
events[15]={name: 'Castle Deep:', startUp: new Array(
{hour:1,minute:25},
{hour:7,minute:25},
{hour:13,minute:25},
{hour:19,minute:25}
)}
events[16]={name: 'CryWolf:', startUp: new Array(
{hour:1,minute:45},
{hour:4,minute:45},
{hour:7,minute:45},
{hour:10,minute:45},
{hour:13,minute:45},
{hour:16,minute:20},
{hour:19,minute:45},
{hour:22,minute:45}
)}
var curTime=1336998502
var dateTime=1336953600
function timeLeft(i){
for(j in events[i].startUp){
tmp=events[i].startUp[j].hour*3600+events[i].startUp[j].minute*60
if(dateTime+tmp>curTime){
return dateTime+tmp-curTime;
}
}
tmp=events[i].startUp[0].hour*3600+events[i].startUp[0].minute*60
return dateTime+86400+tmp-curTime;
}
function getFormatedLeftTime($seconds){
$second = $seconds % 60;
$minutes = parseInt(($seconds / 60) % 60);
$hour = parseInt(($seconds / 3600) % 24);
$days = parseInt($seconds / (24 * 3600));
$ret = '';
if ($days > 0)
if ($days == 1) $ret += '1 day ';
else $ret += $days + ' days ';
if ($hour > 0){
if ($hour < 10) $hour = '0' + $hour;
$ret += $hour + ':';
}else if ($days > 0) $ret += '00:';
if($minutes < 10) $minutes = '0' + $minutes;
$ret += $minutes + ':';
if ($second < 10) $second = '0' + $second;
$ret += $second;
return $ret;
}
function updateTimes(){
curTime++;
for (i in events){
document.getElementById("timeLeft"+i).innerHTML=getFormatedLeftTime(timeLeft(i));
}
}
for(i in events)
document.getElementById("eventList").innerHTML+="<div style='float:right; color: #FFFF00;' id='timeLeft"+i+"'>"+getFormatedLeftTime(timeLeft(i))+"</div><div style=\"color: #00FFFF;\"><strong>"+events[i].name+"</strong></div>";
setInterval("updateTimes()", 1000);
</script>
Hello, I am very new to HTML. Yesterday I have started learning HTML. I want to make two Dropdown but should be linked with each other. There value should change after click "go" button. In other word I want to make one html for Post Code/Pin Codes of my state. Please Help Me!!! I have made script till he <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>PIN CODES OF GOA</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFD700;width:100px;text-align:top;"> <b>GOA</b><br /> BEACHES<br /> CHURCHES<br /> BARS </td> <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;"> </body> </html> </body> <form> <select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value=VASCO</option> <option value=FATORDA</option> </select> <select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> <option value="403802"</option> <option value="403602"</option> </select> <input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;"> </form> <script type="text/javascript"> tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); tmonth=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December"); function GetClock(){ d = new Date(); nday = d.getDay(); nmonth = d.getMonth(); ndate = d.getDate(); nyear = d.getYear(); nhour = d.getHours(); nmin = d.getMinutes(); nsec = d.getSeconds(); if(nyear<1000) nyear=nyear+1900; if(nhour == 0) {ap = " AM";nhour = 12;} else if(nhour <= 11) {ap = " AM";} else if(nhour == 12) {ap = " PM";} else if(nhour >= 13) {ap = " PM";nhour -= 12;} if(nmin <= 9) {nmin = "0" +nmin;} if(nsec <= 9) {nsec = "0" +nsec;} document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+""; setTimeout("GetClock()", 1000); } window.onload=GetClock; </script> <div id="clockbox"></div> </td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Search Your Post Code</td> </tr> </table> I have a status page on my website, but I have multiple servers, and they cramp up the one page. I was wondering if it was possible if I could have a link that says "CSS Server Status" and it drops down with the code for the CSS server, and say for "SAMP Server Status" drops down with the code/html for the samp server. I haven't a clue about Javascript, so as much help as possible would be appretiated. Hi, I've currently got a group of dropdowns that update a price total on my site. I want to add an 'add to cart' button too but this requires each drop down having 2 values (one to update total and one to go towards the 'add to cart button'). I've researched this but still have no idea how to go about getting 2 values from one dropdown though. What I've done is create an explanation page where I have one form for the running total, and then a completely seperate form for the add to cart. Both work independanly, but I want to effectively combine them. Here's the page: tigerfrog.co.uk/merge_codes.html code for running total is: Head Code: <script language="JavaScript" type="text/javascript">
function calc2(){
var totalStr = ''; // for testing only
var totalValue=0;
var DDL;
var cnt = 0; // for testing only
for (var j=1; j<=2; j++) {
DDL = document.getElementById('dropDownList'+j);
temp = DDL.options[DDL.selectedIndex].value;
totalValue += Number(temp);
if (DDL.selectedIndex != 0) { totalStr += '|'+temp; cnt++; } // cnt++ is for testing only
}
document.forms[0].total.value=totalValue;
}
</script>
Body Code: <form id="dropDownForm2" name="dropDownForm2"> <td class="style14"> <select id="dropDownList1" class="style10" name="D10" onchange="calc2();"> <option selected="" value="10">item1</option> <option value="20">item2</option> <option value="30">item3</option> </select> <br /> </td> <td class="style14"> <select id="dropDownList2" class="style10" name="D11" onchange="calc2();"> <option href="alloy.htm" selected="" value="11">item4</option> <option value="12">item5</option> <option value="13">item6</option> </select><br /> total </td> <input class="style10" name="total" onfocus="blur()" readonly="" size="4" style="width: 46px; height: 22px;" type="text" value="958" /></form> The code for the add to cart is: Code: <form action="http://www.romancart.com/cart.asp" method="post"> <input name="storeid" type="hidden" value="43579" /> <input name="itemcode" type="hidden" value="TF Series" />Frameset <select name="itemname2"> <option value="TF100" value="TF100">item1</option> <option value="TF300C" value="TF300">item2</option> <option value="TF400C" value="TF400">item3</option> </select><br /> Groupset <select name="itemname5"> <option value="SL T1" value1="SL T1">item4</option> <option value="SLR T1" value1="SLR T1">item5</option> </select><br /> <input type="submit" value="Add to basket" /> </form> If I had 2 values from each drop down in the first group of dropdowns then I could get it working, but I'm not sure how to do this. Any help will be great, Phil Apologizes for the long post, I wanted to be thorough. I am not very familiar with Javascript at all, learning every day - but hopefully this has an easy fix. I'm making an application where students can select their SCHOOL in a dropdown, which based on the selection, displays a second dropdown containing CLASSES. This part works fine. It then converts the value of the dropdown-selection to an ID-number which is used pasted in a URL for that class's online schedule (Example: www. url.com/generator/school= '+chosenSchool+' class= '+chosenClass+' blablabla.aspx) - plus saves the ID to recognize the selection for later use. This also worked fine, before I added the more than one school. Now, whenever I select a SCHOOL and a CLASS, I get the correct SCHOOL but the CLASS is always the FIRST ID in the list (marked in red ), and I'm not sure why. I thought about creating different variables for each class-list, but there is really more than two, and I need the name of the variable to be the same (chosenSchool) for the storing and URL-input. Code:
$(function() {
$("#school").change(function() {
// DROPDOWN LIST WITH DIFFERENT SCHOOLS
var schoolValue = document.getElementById('dropdown-school').selectedIndex; // GETS THE DROPDOWN VALUE (0-1)
var schoolID = ["60690","60360"] // NEEDED ID
chosenSchool=schoolID[schoolValue] // CONVERTS TO ID
var selectedSchool = $("#school").val(); // MANAGE DROPDOWNS BELOW
// DISPLAYS DROPDOWN LIST WITH CLASSES FROM THE FIRST SCHOOL WHEN SELECTED
if(selectedSchool == "firstSchool") {
$("#firstSchool").show(); // SHOWS DROPDOWN IF THE RIGHT ONE
var firstClassValue = document.getElementById('classlist-1').selectedIndex; // GETS THE DROPDOWN VALUE (0-5)
var firstClassID =
[" 45B9D5AD-8E32 ","0A9261F7-8BC7E","307C7E8C-054E","B21D19A7-5076","99ECF5B8-E0E1","36B44988-006F""] // NEEDED ID
chosenClass=firstClassID[firstClassValue] // CONVERTS TO ID
}
else {
$("#firstSchool").hide(); // HIDES DROPDOWN IF NOT THE RIGHT ONE
}
// DISPLAYS DROPDOWN LIST WITH CLASSES FROM THE SECOND SCHOOL WHEN SELECTED
if(selectedSchool == "secondSchool") {
$("#secondSchool").show(); // SHOWS DROPDOWN IF THE RIGHT ONE
var secondClassValue = document.getElementById('classlist-2').selectedIndex; // GETS THE DROPDOWN VALUE (0-5)
var secondClassID =
[" 4EBF33E0E514 ","05F96E17-8DF9","4EA71DA6-5CCC","F7D08749-746E","0CA6F782-6B9D","BBD66276-752F"] // NEEDED ID
chosenClass=secondClassID[secondClassValue] // CONVERTS TO ID
}
else {
$("#secondSchool").hide(); // HIDES DROPDOWN IF NOT THE RIGHT ONE
}
});
$('#school').trigger('change'); // TRIGGERS THE CHANGE
});
// SAVES THE SELECTED VALUES
function saveSettings() {
localStorage.setItem('SCHOOL', chosenSchool); // SAVES SCHOOL ID-NUMBER
localStorage.setItem('CLASS', chosenClass); // SAVES CLASS ID-NUMBER
location.reload(true) // RELOAD WITH SAVED VALUES
}
// HTML:
SCHOOL DROPDOWN:
<select name="school" id="school">
<option value="val0">firstSchool</option>
<option value="val1">secondSchool</option>
</select>
CLASS DROPDOWN 1:
<select name="classlist-1" id="classlist-1">
<option value="val0">Class 1</option>
<option value="val1">Class 2</option>
<option value="val2">Class 3</option>
<option value="val3">Class 4</option>
<option value="val4">Class 5</option>
<option value="val5">Class 6</option>
</select>
CLASS DROPDOWN 2:
<select name="classlist-2" id="classlist-2">
<option value="val0">Class 1</option>
<option value="val1">Class 2</option>
<option value="val2">Class 3</option>
<option value="val3">Class 4</option>
<option value="val4">Class 5</option>
<option value="val5">Class 6</option>
</select>
So my "chosenClass" is always the ID marked red. Why? Appreciate and help I can get.. Thanks for reading. Please keep in mind that I have more than two schools and class-lists, and any misspellings might be because I changed some values to keep it simple. Regards, Andrew. I've been trying to create a page with two forms that have drop downs in them. These drop downs are set to store information from the previous drop down and I can get one to work easliy but having two forms has got me stopped in my tracks. I'm new to this and new to the forums so any help is apeciated. Just go easy on me. heh! Under the function where it says function setOptions(chosen,theform) { var selbox = document.theform.opttwo; I tried changing 'theform' to 'myform1' and so forth but neither worked. Thanks again for your time and effort in helping me! Here's my code: Code: <html>
<head>
<SCRIPT TYPE="text/javascript">
<!--
function setOptions(chosen,theform) {
var selbox = document.theform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
//-->
</SCRIPT>
</head>
<body link="#000066" vlink="#999999" alink="#FFFF00">
<table width="40%" height="447" border="0">
<tr>
<td><div align="left"><img src="images/topbar.jpg" width="740" height="29" border="0" usemap="#Map"></div></td>
</tr>
<tr>
<td height="332"> <p align="left"> </p>
<div align="left">
<table width="740" height="187" border="0" align="left">
<tr>
<td height="97" colspan="2"> <div align="center"></td>
</tr>
<tr>
<td width="49%" height="21"> <div align="center"><strong>Form One</strong></div></td>
<td width="51%"> <div align="center"><strong>Form Two</strong></div></td>
</tr>
<tr>
<td height="47"><form name="myform1">
<div align="center">
<p>
<select name="optone" size="1"
onchange="setOptions(document.myform1.optone.options[document.myform1.optone.selectedIndex].value,"myform1");">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
<br>
<br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one
of the options above first</option>
</select>
<br>
<br />
<input type="submit" name="go" value="Submit"
onclick="alert(document.myform1.opttwo.options[document.myform1.opttwo.selectedIndex].value);">
</p>
</div>
</form></td>
<td><form name="myform2">
<div align="center">
<p>
<select name="optone" size="1"
onchange="setOptions(document.myform2.optone.options[document.myform2.optone.selectedIndex].value,"myform2");">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
<br>
<br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one
of the options above first</option>
</select>
<br>
<br />
<input type="submit" name="go" value="Submit"
onclick="alert(document.myform2.opttwo.options[document.myform2.opttwo.selectedIndex].value);">
</p>
</div>
</form></td>
</tr>
</table>
</div>
<p align="left"> </p>
<p align="left"> </p></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="left"><img src="images/bottombar.jpg" width="740" height="16"></div></td>
</tr>
<tr>
<td height="56"> <div align="center"></td>
</tr>
</table>
</body>
</html>
I'm looking for four level connected drop down boxes. Unlike all the scripts I have seen on the internet I need all the options to be available if nothing is selected in the previous drop down. So I want something like combination of connected drop downs and ordinary drop down. If the selection is made, display appropriate options in other drop downs... Hope I'm clear... Ex: If I had three properties in Spain, ----------------------------------------------------------------------------------------------------------- | -------- Country: Spain --------- | -------- Country: Spain --------- | -------- Country: Spain ---------- | | -------- State: Andalusia ------- | -------- State: Andalusia -------- | -------- State: Catalonia --------- | | -------- District: Malaga -------- | -------- District: Granada ------- | -------- District: Barcelona ------- | | -------- Town: Marbella --------- | -------- Town: Motril ----------- | --------- Town: Badalona -------- | ----------------------------------------------------------------------------------------------------------- it should show me all the list of available locations, but when I choose Andalusia, it would only show two rest locations – Malaga and Granada, and the same rule when choosing district – Malaga->Marbella Can anyone please help? I need it very much... Thanks in advance! Hi everyone. I am trying to have 2 sets of populated dropdowns (state,city). One for the billing address and the other one for shipping address. I read this article http://www.digimantra.com/technology...ered-dropdown/ and did it step by step. It worked when I had only a set of populated dropdowns but when I duplicated and edited the script, only the new script works. Can somebody tell me where I went wrong? Here's the code for the script: Code: <script type="text/javascript">
//define the absolute path to your php script here
var site_root='';
//function to create ajax object
function pullAjax(){
var a;
try{
a=new XMLHttpRequest()
}
catch(b)
{
try
{
a=new ActiveXObject("Msxml2.XMLHTTP")
}catch(b)
{
try
{
a=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(b)
{
alert("Your browser broke!");return false
}
}
}
return a;
}
//this function does the ajax call, and appends cities into the second dropdown
function populate_cities(x)
{
obj=pullAjax();
var cities_list=document.getElementById('city');
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
//returns comma separated list of cities after successful ajax request
var tmp=obj.responseText;
//split function returns array of city
cities=tmp.split(',');
//if second dropdown already has some data, CLEAR it
if(cities_list.length>1)
clean_cities(cities_list);
//for loop to append the cities
var i=0;
for(i=0;i<cities.length;i++)
append_city(cities[i]);
}
};
obj.open("GET",site_root+"cities_data.php?state="+ x.value,true);
obj.send(null);
}
//this gets call in the for loop and creates the options for the dropdown
function append_city(city_value)
{
var cities_list=document.getElementById('city');
cities_list.options[cities_list.options.length]=new Option(city_value,city_value,false,false);
}
//CLEARs the dropdown
function clean_cities()
{
var cities_list=document.getElementById('city');
cities_list.options.length=1;
}
//autoloads the city list, when the page first loads
function autoload()
{
populate_cities(document.getElementById('state_pro vince'));
}
</script>
<script type="text/javascript">
//define the absolute path to your php script here
var site_root='';
//function to create ajax object
function pullAjax(){
var a;
try{
a=new XMLHttpRequest()
}
catch(b)
{
try
{
a=new ActiveXObject("Msxml2.XMLHTTP")
}catch(b)
{
try
{
a=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(b)
{
alert("Your browser broke!");return false
}
}
}
return a;
}
//this function does the ajax call, and appends cities into the second dropdown
function populate_cities(x)
{
obj=pullAjax();
var cities_list=document.getElementById('shipping_city ');
obj.onreadystatechange=function()
{
if(obj.readyState==4)
{
//returns comma separated list of cities after successful ajax request
var tmp=obj.responseText;
//split function returns array of city
cities=tmp.split(',');
//if second dropdown already has some data, CLEAR it
if(cities_list.length>1)
clean_cities(cities_list);
//for loop to append the cities
var i=0;
for(i=0;i<cities.length;i++)
append_city(cities[i]);
}
};
obj.open("GET",site_root+"shipping_cities_data.php ?state="+x.value,true);
obj.send(null);
}
//this gets call in the for loop and creates the options for the dropdown
function append_city(city_value)
{
var cities_list=document.getElementById('shipping_city ');
cities_list.options[cities_list.options.length]=new Option(city_value,city_value,false,false);
}
//CLEARs the dropdown
function clean_cities()
{
var cities_list=document.getElementById('shipping_city ');
cities_list.options.length=1;
}
//autoloads the city list, when the page first loads
function autoload()
{
populate_cities(document.getElementById('shipping_ state_province'));
}
</script>
Thanks! D I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button. What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made. "Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..." Can this be done on each line as a second onChange event? Code: <html>
<head>
<HEAD>
<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1
var arrItems3 = new Array();
var arrItemsGrp3 = new Array();
arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12
var arrItems4 = new Array();
var arrItemsGrp4 = new Array();
arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42
var arrItems5 = new Array();
var arrItemsGrp5 = new Array();
arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133
function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>
<BODY>
<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 2:
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 3:
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif"> Code 4:
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2"> Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2"> Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Hi, Ive been days searching posting, trying to find a solution to my pure css hover menu that works perfect, except in toucscreens. Ive been today to apples shop to test, and yes sometimes it opens on click other it wont open, something strange. So the best is to serve another menu to toucsreens such as smartphones and tablets, or make the menu work on both. I have tried my menu (Peterneds whateverhover) but cant manage, also have no touchscreen to do tests on. Searching I found Suckerfish Dropdowns and the dropdown have a script for ie6 as ie6 does not support hover. This is the script: Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
I wonder, isnt it posible to change the onmouseover and onmouseout to touchstart and touchend? I imagine that sounds just to easy, suppose if that were the case it would already been done, however I read that touchstart is for iphone etc... Any help please, I do understand javascript when I read it, but am not able to do my own functions. Thanks Helen I'd like to create two dropdown (select) lists with a search button next to it so if the user chooses A in the first list and C in the second list and clicks 'search', the results return items that relate to both A and C. Practical Example: User chooses "London" in the first dropdown and "Middle Schools" in the second. Result returns the middle schools I've listed for London. How can this be done or if it can't, is there another way to achieve what I want? -edit- I found what I wanted he http://www.alistapart.com/d/complexd...ts&de=Pancakes However, now my question is what would I put in for the form "action" to populate the results? Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code:
<html>
<table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0">
<tr><td id="leftcolumn" width="170" align="left" valign="top">
<div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3>
<a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br />
<a rel="nofollow" target="_top" href="between.htm" >Between Days</a>
<link rel="stylesheet" type="text/css" href="epoch_styles.css" />
<script type="text/javascript" src="epoch_classes.js"></script>
<script type="text/javascript">
var cal1, cal2;
window.onload = function ()
{
cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1'));
cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2'));
};
/*............*/
function confirmation(f)
{
var startdate = f.fromdate.value
var enddate = f.todate.value
var myday=new Date()
var yr=myday.getFullYear()
var mn=myday.getMonth()+1
var dt=myday.getDate()
var today=""
var present, ys, ms, ds, ye,me,de, start, end
if(mn < 10) { mn = "0" + mn }
if(dt <10) { dt = "0" + dt }
today= yr + "/" + mn + "/" + dt
present=yr + "/" + mn + "/" +dt
if (today < startdate )
{
alert (" Start date should not be exceed to-day's date " + present )
startdate.focus()
return false
}
if (today < enddate )
{
alert (" End date should not be exceed to-day's date " + present )
enddate.focus()
return false
}
if (today == startdate )
{
alert(" You are selected to-days date as Starting day" );
}
var answer = confirm("Do you want to continue ?")
if (answer)
{ if( startdate < enddate)
alert("Dates between " + startdate + " to " + enddate + " are confirmed" )
else
alert("Dates between " + enddate + " to " + startdate + " are confirmed" )
}
else
{
alert("Date not confirmed")
window.location="to_date.htm";
}
ys= startdate.substring(0,4);
ms= startdate.substring(5,7);
ds= startdate.substring(8,10);
start=ys + "" + ms + "" +ds
ye= enddate.substring(0,4);
me= enddate.substring(5,7);
de= enddate.substring(8,10);
end=ye + "" + me + "" +de
}
/*.......................................................*/
</script>
<div style="margin-left:100px;">
<body>
<style type="text/css">
#conf
{
margin-left:115px;
}
</style>
<td align="left" valign="top">
<table width="100" border="0" cellpadding="0" cellspacing="0">
<td style="padding-top:0px">
</table>
<h4>From Date</h4>
<form name= "formbet" id="placeholder" method="post" action="#" >
<input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/>
<td align="left" valign="top">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<td style="padding-top:20px">
<h4>To Date</h4>
<input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br />
<input id="conf" type="button" onclick="confirmation(this.form)" value="Submit">
</form>
</body>
</html>
In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. I have a bunch of checkboxes like below that the user can check some or all and click the button and see the values of all the selected checkboxes. How can I do that? Code: <script>
function alertValues(){
}
</script>
<input type="checkbox" class ="normal2" value="131971" name="list[]" >
<input type="checkbox" class ="normal2" value="131973" name="list[]" >
<input type="checkbox" class ="normal2" value="131975" name="list[]" >
<input type="checkbox" class ="normal2" value="131977" name="list[]" >
<input type="button" onClick="alertValues()"
Hi, What's a good way/ideal data structure to achieve this? The objective of the code/function is to map user-inputted strings into a pair of specific, hard-coded strings. For example, say the user types "firefox" or "ff", or "fx". The output would be the pair ["browser", "mozilla"], for example. I'm currently using a multidimensional array, but it feels inefficient and I'm having trouble mapping an arbitrary number of inputs into 2 outputs. Code: var strings = [ ["input1", "output1a"],
["input2", "output1a"],
["input3", "output1a"],
["input1", "output1b"],
["input2", "output1b"],
["input3", "output1b"]
];
How should I map the elements ["input1", "input2", "input3"] => ["output1a", "output1b"] ? Another method I used previously was a massive switch statement. This fulfills my needs, but I'm not sure about the efficiency (though if I remember correctly, switch statements become more efficient as size grows, since it uses a hash table?). Code: switch (input) {
case "ff": case "firefox": case "fx" : case "ffox":
return ["browser", "mozilla"];
case "ie": case "internet explorer":
return ["browser", "microsoft"];
...
}
Hello, I am new here, and I will probably break some of the forum rules on accident and I apologize ahead of time, but please go easy on me. I have a problem with a question in a Javascript class I am taking currently. The book explains how to detect the smallest values the user inputs but does not explain how to detect already declared variables that have values in them and how to detect which of these declared variables has the smallest number. For example: Code: double aA = 3.7;
double aB = 5.8;
double aC = 1.9;
double aD = 7.2;
double aMin; // this is the variable I want the program to detect and stick
// the smallest variable into.
I want the code to detect the variable containing the smallest number and it has to be able to detect negative numbers as well. I am completely lost on how to do this! Any help would be appreciated! Thank you! i am making a mock website where the user make their own computer by selecting items from drop down menus. then a value of the item comes up below. this works but i am having trouble adding the numbers up for the total cost. here is my code <html><head><title>build</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css"> </style></head> <body> <script type="text/javascript"> var motherboard = new Array( '74', '50', '73', '106', '269', '64', '55', '135', '47', '79', '118', '163'); var cpu = new Array( '88', '104', '168', '352'); function changeMotherboard(Mid) { var ind = document.getElementById(Mid).selectedIndex; document.getElementById("motherboardDisplay").innerHTML=motherboard[ind]; } function changeCpu(Cid) { var ind = document.getElementById(Cid).selectedIndex; document.getElementById("cpuDisplay").innerHTML=cpu[ind]; } </script> </head><body> <form> Motherboard <select id="motherboard" onChange="changeMotherboard('motherboard');"> <option value="0">Asus P5G41C-M-LX G41 DDR2+DDR3</option> <option value="1">MSI G41M-P33 </option> <option value="2">Asus P5P41T-LE </option> <option>G-B H55M-S2H</option> <option>Asus P7P55D-E-Deluxe</option> <option>Asus M2N68-AM Plus </option> <option>ASRock N68S3-UCC </option> <option>Asus M4A88TD-M-EVO-USB3</option> </select><br> </form> <div id="motherboardDisplay">Select from the list to see price</div> <form> CPU <select name="cpu" id="cpu" onChange="changeCpu('cpu');"> <option value="0">E6500</option> <option value="1">Core G6950</option> <option value="2">i3-550</option> <option>Core i7-930</option> </select> <br> </form> <div id="cpuDisplay" type = text>Select from the list to see price</div> <p> </p> <p> </body> </html> OK, so a bit of an issue... I've done a navigation, that works just wonderfully. There are three dropdowns in the top rown, and one down below. The three on the top populate the one below it. All works fine until.... *dum dum dah dummmm* I wanted to make the bottom box invisible until one of the top onse were selected. The nav script goes as follows: Code: var cacheobj=document.dynamiccombo.stage2
function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true
}
populate(combo1)
Code: <select name="usstage1" size="1" onchange="showDiv(this.value);window.open(this.options[this.selectedIndex].value,'_top');" >
<option selected="selected" value="javascript:populate(combo1)">United States</option>
<option value="javascript:populate(combo2)">Alabama</option>
<option value="javascript:populate(combo3)">Alaska</option>
<option value="javascript:populate(combo4)">Arizona</option>
<option value="javascript:populate(combo5)">Arkansas</option>
<option value="javascript:populate(combo6)">California</option>
etc...
Which populates the bottom dropdown Now to hide it, I've done: Code: var lastDiv = "";
function showDiv(divName) {
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
And used a Code: <div id="menudiv" class="hiddenDiv"> around the lower dropdown, which hides it effectively then I modded the upper menu Code: <select name="usstage1" size="1" onchange=" showDiv(this.value); window.open(this.options[this.selectedIndex].value,'_top')" > adding what's in red to call the change Now this is where I'm stuck, how can I get: Code: <option value="menudiv;javascript:populate(combo2)">Alabama</option> the two options in...have tried a couple of different ways and failed horribly eash time...or maybe I'm just going about this completely wrong? Hello, I have following javascript that loads a streetmap: Code: <script type="text/javascript"> geoportaal_type = "gemeente"; geoportaal_id = "blankenberge"; geoportaal_startupmodule = "stratenatlas"; geoportaal_bgcolor = "FFFFFF"; </script> <script type="text/javascript" src="http://www.geoportaal.be/syndication/toonportaal.js"></script> What I want to do is pretty simple: create a little searchbox on my homepage where people can enter their streetname and housenumber and the map loads. To do this i use following code related to a script: Code: <script type="text/javascript"> geoportaal_niscode = "vilvoorde"; geoportaal_startupmodule = "stratenatlas"; geoportaal_bgcolor = "FFFFFF"; geoportaal_request_name = "toonadres"; geoportaal_request_parameters = "straat=Kerkstraat&huisnr=1"; </script> <script src="http://www.geoportaal.be/syndication/toonportaal.js"></script> Basically the same as mentioned earlier, though some other tags must be used. How do I create the fields (values) to enter the text and the OK-button to confirm the search? When users press the OK-button the script must load. When loading, following values are important: geoportaal_request_parameters = "straat=Kerkstraat&huisnr=1where straat=VALUE1&huisnr=VALUE2 So: VALUE1=streetname VALUE2=housnumber All I need is the script to take the values entered by the users and to paste these values on the right place (code above). How do i do this, do i need an onclick-handler for this? This is html-code for the searchbox but no actions are defined yet: Code: <div id=locationsearch>
<table id="form">
<tr><td>Straatnaam:</td><td><form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="straat" id="VALUE1" />
</label>
</form></td></tr>
<tr><td>Huisnummer:</td>
<td><form id="form2" name="form2" method="post" action="">
<label>
<input type="text" name="huisnr" id="VALUE2" />
</label>
</form></td></tr>
<tr><td> </td><td><form id="form3" name="form3" method="post" action="">
<label>
<input type="submit" name="toonadres" id="toonadres" value="Lokaliseer" />
</label>
</form></td></tr>
</table>
</div>
Please advise from A to Z. I'm a novice. Thank you in advance, William. Can someone please tell me how I would modify the following function to get it to check if a url variable is present and if so to add it into the string variable for the url. Code: function ajaxFunction(pagenum){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var drop_1 = document.getElementById('drop_1').value;
var model = document.getElementById('model').value;
var mileage = document.getElementById('mileage').value;
var colour = document.getElementById('colour').value;
var age = document.getElementById('age').value;
var min_price = document.getElementById('min_price').value;
var max_price = document.getElementById('max_price').value;
var min_engine_size = document.getElementById('min_engine_size').value;
var max_engine_size = document.getElementById('max_engine_size').value;
//var pics = document.getElementById('pics').value;
if (document.getElementById("pics").checked==true) {
var photos = "Yes";
}
else {
var photos = "No";
}
var keywords = document.getElementById('keywords').value;
var queryString = "?drop_1=" + drop_1 + "&model=" + model + "&mileage=" + mileage + "&colour=" + colour + "&age=" + age + "&min_price=" + min_price + "&max_price=" + max_price + "&min_engine_size=" + min_engine_size + "&max_engine_size=" + max_engine_size + "&photos=" + photos + "&keywords=" + keywords + "&page=" + pagenum;
ajaxRequest.open("GET", "filtered.php" + queryString, true);
ajaxRequest.send(null);
}
If my url is index.php?make=Apolo then I need to get this added into the var queryString part of the function so that the ajax returns the correct values. Any help would really be appreciated, I'm fairly new to js. Hi, Ihave this html/jscript hybrid and when i run it in firefox the error console says a value is undefined when i click it the very first <html> is highlighted???? any one no why? |
|||||||