|
JavaScript - Multiple Dropdowns Gives Only One Value And A Headache
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. Similar TutorialsHi 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'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 have a function that changes the label on a set of labels with similar "for" fields. Somehow, the matching is only matching every other label. I suspect I must be missing something obvious. The goal is to change the text of a set of radio buttons to either "top" and "bottom" or "left" and "right" depending on orientation. Code: function ChangeLabels(orientation) {
var lefttop = "Left";
var bottomright = "Right";
var lbls = document.getElementsByTagName("label");
var lefttopregex = new RegExp ("Field6_[0-9]+", "gi");
var bottomrightregex = new RegExp ("Field20_","gi");
if (orientation == "Vertical") {
lefttop = "Top";
bottomright = "Bottom";
}
var forvalue = "";
for (var i=0,k=lbls.length; i<k; i++) {
forvalue = lbls[i].htmlFor;
if (lefttopregex.test(forvalue)) {
lbls[i].innerHTML = lefttop;
}
if (bottomrightregex.test(forvalue)) {
lbls[i].innerHTML = bottomright;
}
}
}
And here is the HTML of the labels. Code: <li id="fo1li6" class=" "> <label class="desc" id="title6" for="Field6_0"> Left/Top <span id="req_6" class="req">*</span> </label> <div> <input id="radioDefault_6" name="Field6" type="hidden" value="" /> <span> <input id="Field6_0" name="Field6" type="radio" class="field radio" value="Dogs" tabindex="20" onchange="handleInput(this);" checked="checked" /> <label class="choice" for="Field6_0" > Dogs</label> </span> <span> <input id="Field6_1" name="Field6" type="radio" class="field radio" value="Pineapple" tabindex="21" onchange="handleInput(this);" /> <label class="choice" for="Field6_1" > Pineapple</label> </span> <span> <input id="Field6_2" name="Field6" type="radio" class="field radio" value="Leaves" tabindex="22" onchange="handleInput(this);" /> <label class="choice" for="Field6_2" > Leaves</label> </span> <span> <input id="Field6_3" name="Field6" type="radio" class="field radio" value="Cat" tabindex="23" onchange="handleInput(this);" /> <label class="choice" for="Field6_3" > Cat</label> </span> <span> <input id="Field6_4" name="Field6" type="radio" class="field radio" value="Star" tabindex="24" onchange="handleInput(this);" /> <label class="choice" for="Field6_4" > Star</label> </span> <span> <input id="Field6_5" name="Field6" type="radio" class="field radio" value="Bamboo & Sun" tabindex="25" onchange="handleInput(this);" /> <label class="choice" for="Field6_5" > Bamboo & Sun</label> </span> <span> <input id="Field6_6" name="Field6" type="radio" class="field radio" value="Bamboo" tabindex="26" onchange="handleInput(this);" /> <label class="choice" for="Field6_6" > Bamboo</label> </span> <span> <input id="Field6_7" name="Field6" type="radio" class="field radio" value="Sun & Moon" tabindex="27" onchange="handleInput(this);" /> <label class="choice" for="Field6_7" > Sun & Moon</label> </span> <span> <input id="Field6_8" name="Field6" type="radio" class="field radio" value="Fleur de lis" tabindex="28" onchange="handleInput(this);" /> <label class="choice" for="Field6_8" > Fleur de lis</label> </span> <span> <input id="Field6_9" name="Field6" type="radio" class="field radio" value="Dragonflies" tabindex="29" onchange="handleInput(this);" /> <label class="choice" for="Field6_9" > Dragonflies</label> </span> <span> <input id="Field6_10" name="Field6" type="radio" class="field radio" value="No Design" tabindex="30" onchange="handleInput(this);" /> <label class="choice" for="Field6_10" > No Design</label> </span> </div> </li> Hi all, I am having some problems with the below multiple image upload script. Code: <script type="text/javascript">
set_cookie ( "uid", "14" );
</script>
<script type="text/javascript">
$(function(){
$('#swfupload-control').swfupload({
upload_url: "upload-file.php",
file_post_name: 'uploadfile',
file_size_limit : "10240",
file_types : "*.jpg;*.png;*.gif",
file_types_description : "Image files",
file_upload_limit : 100,
flash_url : "jquery/swfupload/swfupload.swf",
button_image_url : 'jquery/swfupload/wdp_buttons_upload_114x29.png',
button_width : 114,
button_height : 29,
button_placeholder : $('#button')[0],
debug: false
})
.bind('fileQueued', function(event, file){
var listitem='<li id="'+file.id+'" >'+
'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
'<div class="progressbar" ><div class="progress" ></div></div>'+
'<p class="status" >Pending</p>'+
'<span class="cancel" > </span>'+
'</li>';
$('#log').append(listitem);
$('li#'+file.id+' .cancel').bind('click', function(){
var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.cancelUpload(file.id);
$('li#'+file.id).slideUp('fast');
});
// start the upload since it's queued
$(this).swfupload('startUpload');
})
.bind('fileQueueError', function(event, file, errorCode, message){
alert('Size of the file '+file.name+' is greater than limit');
})
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
})
.bind('uploadStart', function(event, file){
$('#log li#'+file.id).find('p.status').text('Uploading...');
$('#log li#'+file.id).find('span.progressvalue').text('0%');
$('#log li#'+file.id).find('span.cancel').hide();
})
.bind('uploadProgress', function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
})
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id);
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<img src="uploads/'+file.name+'" height="120px" width="120px"></img>';
item.addClass('success').find('p.status').html(pathtofile);
})
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
})
});
</script>
Process Page (upload-file.php) Code: <script type="text/javascript">
function get_cookie ( uid )
{
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
if ( results )
return ( unescape ( results[2] ) );
else
return null;
}
</script>
<?php
include('includes/config.php');
$uploaddir = 'uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);
$size=$_FILES['uploadfile']['size'];
if($size>10485760)
{
echo "error file size > 10 MB";
unlink($_FILES['uploadfile']['tmp_name']);
exit;
}
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
$uploadedfiles = ($_FILES);
$files = $uploadedfiles;
foreach($files as $value)
$a_id = $_COOKIE['a_id'];
$u_id = '<script type="text/javascript">var x = get_cookie ( "uid" );</script>';
{
$insert = "INSERT INTO images (a_id, u_id) VALUES ('$a_id', '$u_id')";
mysql_query($insert) or die(mysql_error());
}
echo "success";
}
else {
echo "error ".$_FILES['uploadfile']['error']." --- ".$_FILES['uploadfile']['tmp_name']." %%% ".$file."($size)";
}
?>
Basically the problem I am having that when the row is entered into the database, it always inputs a 0 for a_id and u_id, I have tried this with php cookies, php sessions and now I am trying with javascript cookies. Why wont the included file read the cookies? Is their anyway to pass data into this script? I believe that Code: upload_url: "upload-file.php", is the issue, I cant seem to parse any data into this file? Any help would be greatly appreciated, this is driving me nuts! 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. 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'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, 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 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 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, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? I have a page of dates in a form field which currently are being entered manually and wish to have a calendar pop up for each one to make it a bit easier. i have managed to use a calendar routine 'tigra calendar' i found online but now after working out not to get it working within my own template i faced the problem on multiple date fields. i currently use a numbers field 1-10 or how every many there needs to be on that page. but how would i integrate this within the coding from 'tigra calendar' can anyone suggest a better way to do this. if needed i can sort out a zip file of the files i have for tigra calendar. Hi folks. I am new to javascript so please go easy on me if this is a silly request Basically I have a table generated by a php script with a dynamic number of rows and columns. Here is a sample of the output from this script: Code: <tr> <td style='width:60px'><a href='index.php?inc_id=30' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test</td> <td ><input type='text' name='0inccol0' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol1' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol2' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol3' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol4' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol5' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol6' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol7' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> </tr> <tr> <td style='width:60px'><a href='index.php?inc_id=31' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test2</td> <td ><input type='text' name='1inccol0' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol1' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol2' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol3' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol4' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol5' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol6' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol7' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> </tr> <tr> <td style='width:60px'><a href='index.php?inc_id=32' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test3</td> <td ><input type='text' name='2inccol0' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol1' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol2' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol3' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol4' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol5' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol6' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol7' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> </tr> What I want to do is create a row of 'totals' fields at the bottom of this table that will sum the fields in the column above. Looking at the naming convention above, the first number is the row, the number at the end is the column so I will want to sum all of the input values with a name ending in 0 in the first 'total' field, all the input values with names ending in 1 in the next and so on. The number of rows and columns is dynamic based on the users selections prior to buiding the table. The reason I am using input fields is that I would also like an event (onChange/onBlur?) that will update the totals fields if a user manually changes the value in one of the inputs. Any advice on this will be appreciated! Hey guys, I'm a noob with javascript and I only know simple HTML coding, so I have become stuck. I can program in other languages though, so I understand the principles. That being said, I have become stuck with something. My aim is to have a series of page where text is displayed, and then two or more buttons. Once a button is clicked, I want the screen to clear and it displays the next lot of text, followed by some more buttons. Once they are pushed, it continues on. So basically, each section has its own code that it pushes, plus its own buttons which lead to other sections. I am not trying to make a choose your own adventure book, but the layout is basically one of these. I can do this in another language by simply having a few sections. Inside each section, it retrieves the option and proceeds. However, when I am trying to do this, I am getting confused. The way my other programming experience tells me to write it, I would write a function which is called for each section, and it would display the text, the buttons, and return to the main function in the program. However, because the buttons are in HTML, I cannot put code for the new buttons instead the functions. If I put the code inside the body of HTML, it will automatically be displayed. I cannot write an if statement to determine which buttons are displayed. Can you please give me some advice around this? I hope I have made myself clear enough to be understood!! One other thing I should mention, I really want to be able to do this in a single HTML file instead of calling other files. I think this would work fine by using frames and multiple HTML files, but I would prefer not to unless I really need to. One file would be much better for me. Thanks! Below is the basic code I am working from. It displays the first section with some text, displays two buttons and it goes to the next section on a button click. Code:
<html>
<head>
<script type="text/javascript">
function button1()
{
document.write("Button 1 was pushed. Insert text here. Choose from two new buttons below:");
}
function button2()
{
document.write("Button 2 was pushed. Insert text here. Choose from two new buttons below:");
}
</script>
</head>
<body>
<form>
<input type="button" value="Button1" onClick="button1()" />
<input type="button" value="Button2" onClick="button2()" />
</form>
</body>
</html>
plz i want to know how to make the effects that exists on this link in the upper part : http://www.masrawy.com/new/ 1-) changing color when pressing on the color 2-) changing font (+) to increase it (-) to decrease it (N) to set it to the normal style 3-) decrease and increase the width of the page (from كبر حجم الصفحة or صغر حجم الصفحة ) can anyone help me in doing this task????? I'm making a website, and my aim is to have a terminal like interface. I am encountering a problem with startup text. I cannot get it to work right with the following... function title() { document.getElementById("prompts").innerHTML = "OS v0.1"+ setTimeout("<br />> Loading...",2500)+ setTimeout("<br />> FATAL ERROR!",12500)+ setTimeout("<br />> Please enter command.",13500); } However I get undefined for the settimeouts. Hi, I am new to Javascript, but am trying to work with a bit of script I found online to create a crossfade slideshow for my page. The problem I am having is that I want to have several slideshows on my page. On it's own, a single slideshow works fine but when I add a second (and do my best to hack the code with my limited knowledge) only one slideshow will work, or sometimes neither. I found the article from this site that explained about event conflict, but the example used looked quite a bit different to mine. Here is the js file I started with Code: window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init()
{
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else
{
setTimeout(so_xfade,50);
}
function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
This uses a couple of CSS files and then you just add a div=rotator on the html to add the object and then the images and links within that div. If anyone can help, or perhaps give me a better solution, I'd be most grateful. Thanks |
|||||||