|
JavaScript - Calling A Javascript In A Select Box In Another Select Box
Ok 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. Similar Tutorialsso, I can pass a value from a select list to another function which then decides which function to call, but I want to cut out the middleman, and make the values the function calls, and call them directly on the onchange... I imagine something like this: Code: <select id="select" onchange="this.value">
<option selected value="function1()">Funtion 1</option>
<option value="function2()">Function 2</option>
<option value="function3()">Function 3</option>
</select>
is it possible? Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list. It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help. <select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;"> <option>Loading</option> </select> I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries. I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000. Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items. Any help would be appreciated. Thanks. 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 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? 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, 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. 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 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 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>
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> 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.. |
|||||||