|
JavaScript - Javascript Select Box Help
Hi all,
I am a newbie to JS. So please extend your help suggesstion to solve this problem I have. I have 2 select boxes. Data in one select box is corresponding to the data in the other select box. When the user comes in and selects example the 3rd element from the first or second select box the correspoinding 3rd element from the other select box should be selected. Please help with the solution.Thanks in advance Similar TutorialsOk so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one? Here is part of the javascript I have in my page head: Code: function getMgmtHours(str)
{
if (str=="")
{
document.getElementById("mgmthours").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}
function getDays(str)
{
if (str=="")
{
document.getElementById("mgmtdate").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}
Here is the HTML/PHP portion being used: PHP Code: echo "<p>"; echo "Submit hours:"; echo "<form>"; echo "<select name='district' onchange='getMgmtHours(this.value)'>"; echo "<option value=''>Select a district:</option> <option value='1'>1</option> <option value='3'>3</option> <option value='4'>4</option>"; echo "</select>"; echo "</form>"; echo "</p>" echo "<p>"; echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>"; echo "Weekending Day: "; echo "<select name='weekending' onchange='getDays(this.value)'>"; echo "<option value=''>Choose a Date:</option>"; while ($week < 32) { $nextsunday = strtotime("next Sunday"); if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;} $weekending = date('M. d, Y', $timestamp); echo "<option value='" . $weekending . "'>" . $weekending . "</option>"; $week = $week + 1; } echo "</select>"; echo "<div id='mgmtdate' />"; echo "<div id='mgmthours' />"; echo "</p>"; Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page. I have got this piece of code where JavaScript will change a FORM OPTION if it has been selected before (incase the user returns to the page - doesn't have to refill in things), but its not working and my web browser reports this error: Quote: Error: document.getElementById("Dr") is null This is the code: Code: <SCRIPT type="text/javascript">
document.getElementById("<?php echo $_SESSION['recipient']['title']; ?>").selected = "selected";
</SCRIPT>
Code: <FORM action="process.html" method="post"> <DIV class="deliveryinformationdata"> <DIV> <B>Title:</B> <SELECT name="title"> <OPTION></OPTION> <OPTION id="Dr">Dr</OPTION> <OPTION id="Miss">Miss</OPTION> <OPTION id="Mr">Mr</OPTION> <OPTION id="Mrs">Mrs</OPTION> <OPTION id="Ms">Ms</OPTION> </SELECT> </DIV> <INPUT type="submit" value="Submit"> </DIV> </FORM> Can anyone see a problem? Calculating quiz answers? Code: var correctAnswers = new Array();
correctAnswers[1] = "Extensible Hypertext Markup Language";
correctAnswers[2] = "<p></p>";
correctAnswers[3] = "<br />";
function checkAnswers(){
var score = 0;
for (i=1; i<4; i++){
correctAnswers = getSelectValue("quiz","q" + i);
if (correctAnswers == correctAnswers[i]){
score++;
}
}
Here's the code that I'm working with: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type ="text/javascript">
function HouseSel(){
document.getElementById("HouseSelect").value = '3'
alert (document.getElementById("HouseSelect").value);
}
</script>
</head>
<body>
<form action="https://www.paypal.com/us/cgi-bin/webscr" method="post" name="_xclick">
<select name="item_name" id="HouseSelect">
<option value="0" selected="selected">--Please Select a House--</option>
<option value="1">Nags Head</option>
<option value="Rent Deposite: Calib ">Calibre</option>
</select>
<input name="calculate3" type="button" id="calculate3" tabindex="2"
onclick="HouseSel(); " value="Calculate"/>
</form>
</body>
</html>
But it's still returning the initial value. How do I get it to 3? Hi all, I am newbie to JS. I have the below task. Please advise. I have a result set of a query being displayed on a page. (5000+ rows). I have to provide a search capability, a search box which will enable to enter a position ID number and the entered position ID by the user should be selected from the results in a different color. Can you please help me with the above. Thanks in advance Hey, how do I make the following accessible if JS is disabled? Code: <select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;">
<option value="www.domain.com">Your Domain</option> </select>
Hi Guys, I am posting this to see if anyone has any ideas or sample code that has worked in the past. What i am aiming at doing is having two tables, with the same amount of rows side by side, effectively rendering them the same. I wish then to select a row on the one table, and this event would trigger the same row on the 2nd table to be selected too. Has anyone done something like this before? Appreciate any feedback! Thanks. Hi, would someone know how to convert the left side (textbox) into the same thing as the right has (select box) also by modifying the JS code from the example of this URL: http://www.mredkj.com/tutorials/tableaddrow.html ? It would be a really good feature to have if two select options were used from side-to-side rather than a textbox and a select list. Hello guys, I am working with javascript and currently have the below code set up. This works well, however I would like to change the "select box" to a "search box"- When the user enters a search string, the matching DIV appears. If there is no matching DIV then "sorry nothing found" appears. Is this possible at all? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<=count;i++)
document.getElementById('fleet'+i).style.display = 'none';
if(no>0)
document.getElementById('fleet'+no).style.display = 'block';
}
</script>
<form name="myForm">
<select onchange="show(this)">
<option value="1">Please Choose</option>
<option value="2">120</option>
<option value="3">121</option>
<option value="4">122</option>
</select>
</form>
<div id="fleet1" style="display:block">Please Choose <br>
</div>
<div id="fleet2" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/120.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>
<div id="fleet3" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/121.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>
<div id="fleet4" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/122.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>
</body>
</html>
demo can be seen he http://www.nctfleetlist.co.uk/div.php Hi All, I have a select html control as below ; <SELECT > <OPTION VALUE="1"> This is option 1 </OPTION> <OPTION VALUE="2" >This is option 2 </OPTION> <OPTION VALUE="3" >This is option 3 </OPTION> </SELECT> My requirement is that when user moves pointer over the items the value of the item should be shown in a hint box. How could I show the value of the item in a hint box as user moves pointer over an item using javascript? Thanks, Dev Hi codingforums.com, i have been working on a programm for some time and now i have decided to include some javascript to it and have only very limited knowledge so i copied something from a website and tried to modifiy it but only with partial success. Would be awesome if someone can guide me a littlebit. So i have 2 select boxes and want the second one to be filled depending on the chosen option from the first one. And 'on the fly' so with imediate change. So now i have the following code which gives me the first selectbox sucessfully filled with 'customers' in that case but i dont manage to give the second one listed in order, the are all on the same line displayed as one option. here my code: Code: <?php
//read html header
require('html/header.html');
//error display
error_reporting(E_ALL);
ini_set('display_errors', 1);
include('conn.php');
?>
<div align="center">
<form name="classic">
<select name="customer" size="5" onChange="updatesystem(this.selectedIndex)">
<?php
//prepare SQL query
$query = "SELECT * FROM VIA_CUSTOMER ORDER BY ACRONYM ASC";
//parsing sql statement
$statement = oci_parse($conn, $query);
//execute sql statement and display results
if(oci_execute($statement)) {
while(ocifetchinto($statement, $result, OCI_ASSOC))
{
echo "<option align='center' value='".$result['ACRONYM']."'";
if(isset($_GET['VIA_CUSTOMER']) && $_GET['VIA_CUSTOMER'] == $result['ACRONYM'])
{
echo "selected='selected'";
}
echo ">".$result['ACRONYM']."</option>";
}
}
oci_free_statement($statement);
?>
</select>
<select name="system" size="5" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
</div>
<script type="text/javascript">
var customerlist=document.classic.customer
var systemlist=document.classic.system
var system=new Array()
system[0]=["ARRAY0", "<?php
//prepare SQL query
$query = "SELECT NAME FROM VIA_SYSTEM WHERE IDCUSTOMER = 1 ORDER BY NAME ASC";
//parsing sql statement
$statement = oci_parse($conn, $query);
//execute sql statement and display results
if(oci_execute($statement)) {
while(ocifetchinto($statement, $result, OCI_ASSOC))
{
echo $result['NAME'];
}
}
oci_free_statement($statement);
?>", "ARRAY0.1", "ARRAY0.2"]
system[1]=["ARRAY1", "ARRAY1.1", "ARRAY1.2"]
system[2]=["ARRAY2"]
system[3]=["ARRAY3"]
system[4]=["ARRAY4"]
function updatesystem(selectedsystemgroup){
systemlist.options.length=0
if (selectedsystemgroup>=0){
for (i=0; i<system[selectedsystemgroup].length; i++)
systemlist.options[systemlist.options.length]=new Option(system[selectedsystemgroup][i].split("|")[0], system[selectedsystemgroup][i].split("|")[1])
}
}
</script>
<?
//include html footer
require('html/footer.html');
?>
now my problem is within this piece of code: Code: <?php
//prepare SQL query
$query = "SELECT NAME FROM VIA_SYSTEM WHERE IDCUSTOMER = 1 ORDER BY NAME ASC";
//parsing sql statement
$statement = oci_parse($conn, $query);
//execute sql statement and display results
if(oci_execute($statement)) {
while(ocifetchinto($statement, $result, OCI_ASSOC))
{
echo $result['NAME'];
}
}
oci_free_statement($statement);
?>
how can i get the Code: WHERE IDCUSTOMER = 1 to be chosen from the first select box because $_GET wont work obviously and how can i display the results all as single arrays and not one single line? i know this might be a lot to ask but im still learning and cant get past this with just searching google. This is a picture of the output, the first select is good but the second one is the issue and the 'ARRAY0.1' is just dummy data (not from database) so it should be displayed as single lines like so: LSM SQL*LIMS TEST i would be eternally grateful for whom can help me out with this. Regards, The Noob I use this code in a form that posts to two different destinations, I use JavaScript to achieve it. Code: <SCRIPT type="text/javascript">
function submitTo(where) {
document.form.action = where;
document.form.submit();
}
</SCRIPT>
<FORM action="" method="post" name="form">
<DIV>
<INPUT onClick="return submitTo('1.html')" type="button" value="1">
<INPUT onClick="return submitTo('2.html')" type="button" value="2">
</DIV>
</FORM>
I am still wanting to do is the same thing, but with drop down menu's (SELECT) instead of INPUT. Is there anyone clever that can think of a solution? I'm still trying to work on it, but haven't thought of anything up yet.. Code: I have to create two dropdownlists that are dependent
In my first select tag there are 4 selections ,,, year,quarter,month and week.
and in second select it should automatically populate..If user select year from first select in second select values should be 1 to 365.. if quarter values in second select(dropdown) should be 1 to 4. if month 1 to 12 and if week is selected 1 to 7.. can anyone help me to achieve this.. I will post that code and please help me to resolve this error as iam naive user to javascript..
<select id="user_defn_uom" name="user_defn_uom" onchange="alert(this.options[this.selectedIndex].text)" align="center">
<option selected value="">
<option value="Yearly">Yearly
<option value="Quarterly">Quarterly
<option value="Monthly">Monthly
<option value="Weekly">Weekly
</td>
<td>.
<select name="user_defn_day" align="center">
<option selected value="">
<script type="text/javascript">
alert(this.options[this.selectedIndex].text)
for (var i = 1; i <=366; i++)
{
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
I have the following code but it simply writes the path to the webpage. I actually want it to randomly select the .js code in that path and run it. Help please! Code: jsFiles= new Array(3) jsFiles[0]=["assets/base/scripts/itmpiscripts/popupad1/script.js"] jsFiles[1]=["assets/base/scripts/itmpiscripts/popupad2/script.js"] jsFiles[2]=["assets/base/scripts/itmpiscripts/popupad3/script.js"] randno = Math.floor ( Math.random() * jsFiles.length ); document.write(jsFiles[randno]); Thanks I'm trying to do this using numerical arrays for an assignment: Create a webpage with three select boxes. If basketball is selected in the first select box, the second select box should display the names Celtics, Lakers, and Bulls. If Celtics is selected from the second select box, the third select box should display the names Larry Bird, Bill Russell, and Kevin McHale. I think i have a good start but i can't seem to get the fields to automatically populate with the players. This has to be done solely with JavaScript. Any help would be greatly appreciated? <html> <head> <script type="text/javascript"> <!-- var teams = new Array() teams[1] = new Array() teams[1][0] = "Celtics" teams[1][1] = "Lakers" teams[1][2] = "Bulls" teams[2] = new Array() teams[2][0] = "Yankees" teams[2][1] = "Cardinals" teams[2][2] = "Reds" var basketball = new Array() basketball[0] = new Array() basketball[0][0] = "Larry Bird" basketball[0][1] = "Bill Russell" basketball[0][2] = "Kevin McHale" basketball[1] = new Array() basketball[1][0] = "Wilt Chamberlain" basketball[1][1] = "Jerry West" basketball[1][2] = "Magic Johnson" basketball[2] = new Array() basketball[2][0] = "Micheal Jordan" basketball[2][1] = "Scottie Pippen" basketball[2][2] = "Dennis Rodman" var baseball = new Array() baseball[0] = new Array() baseball[0][0] = "Babe Ruth" baseball[0][1] = "Joe DiMaggio" baseball[0][2] = "Mickey Mantle" baseball[1] = new Array() baseball[1][0] = "Mark McGuire" baseball[1][1] = "Ozzie Smith" baseball[1][2] = "Willie McGee" baseball[2] = new Array() baseball[2][0] = "Pete Rose" baseball[2][1] = "Johnny Bench" baseball[2][2] = "Joe Morgan" function fillTeams() { var whichIndex = document.getElementById("theSport").selectedIndex var numberOfTeams = teams[whichIndex].length for(i=0;i < numberOfTeams; i++){ document.getElementById("theTeams").options[i].text = teams[whichIndex][i] } } function fillPlayers() { var whichIndex = document.getElementById("theTeams").selectedIndex if(document.getElementById("theTeams").selectedIndex=="basketball") var numberOfPlayers = teams[teams[whichIndex]].length for(i=0;i < numberOfPlayers; i++) { document.getElementById("thePlayers").options[i].text = basketball[teams[whichIndex]][i] } else if(document.getElementById("theTeams").selectedIndex =="baseball") for(i=0;i < numberOfPlayers; i++) { document.getElementById("thePlayers").options[i].text = basketball[teams[whichIndex]][i] } } //--> </script> </head> <body> <form> <select id="theSport" onChange="fillTeams()"> <option>Choose a Sport</option> <option>Basketball</option> <option> Baseball </option> </select> <select id="theTeams" onChange="fillPlayers()"> <option>................</option> <option></option> <option></option> </select> <select id="thePlayers" size="3"> <option> ...............</option> <option></option> <option></option> </select> </form> </body> </html> I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script:
Code: var oImageChooser;
addEvent( window, "load", initialize)
function initialize()
{
alert("test1");
var oImageChooser = document.getElementById("imageChooser");
addEvent(oImageChooser, "change", loadCached);
}
var imageLibrary = new Array();
imageLibrary["image1"] = new Image(120,90);
imageLibrary["image1"].src = "images/desk1.gif";
imageLibrary["image2"] = new Image(120,90);
imageLibrary["image2"].src = "images/desk2.gif";
imageLibrary["image3"] = new Image(120,90);
imageLibrary["image3"].src = "images/desk3.gif";
imageLibrary["image4"] = new Image(120,90);
imageLibrary["image4"].src = "images/desk4.gif";
function loadCached()
{
alert("test2");
var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value;
document.getElementById("thumbnail").src = imageLibrary[imgChoice].src;
}
here is the html Code: <html> <head><title>Image dropdown</title> <script type = "text/javascript" src = "experimento5.js"> </script> </head> <body onload = "initialize()"> <h1> Choose any image</h1> <img id = "thumbnail" src = "images/desk1.gif" > <form> <select id = "imageChooser"> <option value = "image1"> Bands</option> <option value = "image2"> Clips</option> <option value = "image3"> Lamp</option> <option value = "image4"> Erasers</option> </select> </form> </body> </html> I have selectitem list which has name value pairs SelectItem(value, name), i need to iterate in JS and i need to populate in to option list, like below, but it dint work for me. Please any help function loadme(listVle){ // listVle is the List<SelectItem> var ele = document.getElementById('numadts'); for (var i=0;i<listVle.length;i++) { var elOpt = document.createElement('option'); var fldName = listVle.item(i).getAttribute('name'); // This line the problem is elOpt.text = fldName; elOpt.value = fldName; try { ele.add(elOpt, null); } catch(ex) { ele.add(elOpt); } } } and the HTML <BODY> <FORM> <select name="numadts" id="numadts" onclick="loadme()""> </select> </FORM> </BODY> I have a dropdown menu and some buttons below in my HTML: Code: <p>
<select name="numberDrop" id="numberDropId" onClick="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
<p>
<input class="answerBtns" name="answerA" type="button" value="A" />
<input class="answerBtns" name="answerB" type="button" value="B" />
<input class="answerBtns" name="answerC" type="button" value="C" />
<input class="answerBtns" name="answerD" type="button" value="D" />
<input class="answerBtns" name="answerE" type="button" value="E" />
</p>
What I want to know is that how is it suppose to be coded so that the user can only select the same amount of buttons as the number from the drop down menu? For example if the user selects the number 3 from the dropdown menu, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. If an additional button is clicked then that button would not be selected. The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. This means that only 3 buttons can be selected at maximum. Also only 3 buttons minimum can be selected, if more or less buttons are selected than the number 3 then it should come up with an alert. Is this suppose to be done in Javascript or Jquery and how can I use css to change the color of the ubttons to green if selected or back to grey if unselected? Thank You Hi all, I'm new here and need some help. I don't know Javascript at all. I have a paypal form that looks like this: Code: <FORM action="https://www.paypal.com/cgi-bin/webscr" method="post"> <INPUT type="hidden" name="cmd" value="_s-xclick"> <INPUT type="hidden" name="hosted_button_id" value="VMMCF6CUGBPAN"> <INPUT type="hidden" name="on0" value="DATA">DATA<BR> <SELECT name="os0"> <OPTION value="250" selected="selected">DATA</OPTION> <OPTION value="400">DATA</OPTION> <OPTION value="1000">DATA</OPTION> </SELECT> <INPUT type="hidden" name="currency_code" value="USD"> <BR> <INPUT type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><IMG alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </FORM> This form works perfectly with my system now. I'm trying to add one fourth option that will redirect to another page, but I'm not sure if changing the name of the select will break the paypal transaction. So I tried this solution: Code: <FORM action="https://www.paypal.com/cgi-bin/webscr" method="post"> <INPUT type="hidden" name="cmd" value="_s-xclick"> <INPUT type="hidden" name="hosted_button_id" value="VMMCF6CUGBPAN"> <INPUT type="hidden" name="URL" value="DATA">DATA<BR> <SELECT name="URL" onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value"> <OPTION value="250" selected="selected">DATA</OPTION> <OPTION value="500">500 Words</OPTION> <OPTION value="1000">1000 Words</OPTION> <OPTION value="project.html">1000+ Words</OPTION> </SELECT> <INPUT type="hidden" name="currency_code" value="USD"> <BR> <br> <INPUT type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><IMG alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </FORM> It works great if I select the fourth option with a internal url in it. But if I choose one of the other options it tries to dynamically change to a page "250", "500", or "1000" and they don't exist. Also, I'm not sure if changing the select name or the option value will break the transaction with paypal. What I'd like the form to do is nothing on all options except the fourth; which is a redirect. The first, second, and third option require the used to click a paypal buy now button. Can't I just take this... Code: onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value" ...put it in the option tag and change it to onSelect or something? This is as far as I can go. I copied the code and altered it. Can anyone here help please? Hello, I am working on a CGI/Ajax application to interface with a database. I have the back-end Perl/CGI application working, so now it it is time to design the web interface and respective forms. So here goes, I am attempting to create dynamic list boxes, but I am unable to pass a value to the 'onChange' event. Here is my code (this is a proof of concept and highly stripped down): Code: <html>
<head>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var array = [ 'name', 'age', 'year'];
function init(sel_val){
for (var i = 0; i < array.length; i++){
document.write(i + " " + array[i] + "<br />");
}
for (var i = 0; i< array.length; i++){
document.product.id_type.options[i] = new Option(i + array[i], i);
}
}
function OnChange(sel_val) {
// for(i = document.product.id_style.length - 1; i > 0; i--)
// document.product.id_style.options[i] = null;
// document.product.id_style.options[0] = new Option("something else", 15);
alert("pressed" + " " + sel_val + "<br />");
}
</script>
<form name="product">
<select name="id_type" size="5" style="width: 150px;" onChange="OnChange()"></select>
<select name="id_style" size="5" style="width: 150px;" ></select>
</form>
<script>
init();
</script>
</body>
</html>
I'm well versed in Perl and Java but I am a JavaScript newbie, so go easy. I understand that sel_val is not being set, but I'm not sure how it should (or could) be set. I would like to use a hash instead of integer values for `i` document.product.id_type.options[i] = new Option(i + array[i], i); becomes document.product.id_type.options[i] = new Option(hash[key], key); Any thoughts, comments, criticisms, jokes are welcome. Thanks in advance for the assist. |
|||||||