JavaScript - Combo Box Is Not Populating The Values
Hi all,
I have a problem here with my coding. I want to have three levels combo box. However the second level is not populating the values, therefore the third level cannot be populated also. I have attcached my codes here. Pls have a look and tell me where is my error. Thanks, Breentha Similar Tutorialshiii friends hw r u ??? m sachin nd currently i m a student of s\w engg. i had gone through a code which i founded on " javascriptkit.com" nd make some change according to my requirements and that code is as follows : - Code: <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> <h1>Ticket Booking Page</h1> <form name="doublecombo"> <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)"> <option>Select City</option> <option>New Delhi</option> <option>Mumbai</option> <option>Kolkata</option> <option>Chennai</option> </select> <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)"> <option value="Select">Select Cinema</option> </select> <script> <!-- /* Double Combo Script Credit By JavaScript Kit (www.javascriptkit.com) Over 200+ free JavaScripts here! */ /* this is d start of code is for selecting cinemas by selecting value of city from 1st combo box */ var groups=document.doublecombo.example.options.length var group=new Array(groups) for (i=0; i<groups; i++) group[i]=new Array() group[0][0]=new Option("Select Cinema") group[1][0]=new Option("Select Cinema") group[1][1]=new Option("HauzKhas") group[1][2]=new Option("Saket","Saket") group[2][0]=new Option("Select Cinema") group[2][1]=new Option("NaviMumbai") group[2][2]=new Option("Churchgate") group[3][0]=new Option("Select Cinema") group[3][1]=new Option("Saltlake") group[3][2]=new Option("Badabazar") group[4][0]=new Option("Select Cinema") group[4][1]=new Option("krishnapuram") group[4][2]=new Option("old market") var temp=document.doublecombo.stage2 function redirect(x){ for (m=temp.options.length-1;m>0;m--) temp.options[m]=null for (i=0;i<group[x].length;i++){ temp.options[i]=new Option(group[x][i].text,group[x][i].value) } temp.options[0].selected=true } /* this is d end of code is for selecting cinemas by selecting value of city from 1st combo box */ //--> </script> </form> </body> </html> After this code i want to populate values 3rd combo box by selecting values in the 2nd combo box ( which is cinema ) bt after applying all the posible option to solve this problm nd i m nt getting success ,so m writing to you people for ur help. i will explain u the whole matter thn u wil better understand my problm. i m making one website on multiplex( online ticket booking). so i saw the website of pvr cinemas nd i thought i wil impliment this ticket booking concept in my project, so for the fullfillness of this target i hav to take atleast 7 combo box , these combo box names are :- 1. Select City- (Like - New Delhi , Mumbai ,Kolkata ,Chennai) 2. Select Cinema(Hall Name) - ( Saket - New Delhi , South Ex. - New Delhi, Navi Mumbai - Mumbai , Salt Lake - Kolkata) 3. Select Movie- (Atleast 3 movies in each cinema nd somtimes it can more or less hall by hall ) 4.Select Date - (next 5 days of current date for advanced booking) 5. Select Time - (show time for each movie in each hall should be 3 shows, means if 3 movies are playing currently in 1 cinema thn we hav to mention show times with some difference for all 3 movies. ) 6.Select Price - ( price can b d same for all movies like - 150 (normal),250 (middle ) , 500 (high) ) 7. Select No. of Seats - ( no of seats for advanced booking is 1 to 10 for every film). your given link solved my 1st combo box problm dear bt nw facing another problm. i want to populate all the movies in 3rd combo box by selecting a cinema value in 2nd combo box . for example i selected " saket - new delhi " thn all the movies which r playing currently in this cinema should be comes in d 3rd com bo box . same as for other options south ex. - new delhi , navi mumbai - mumbai nd so on. i think this problm can be solved by three dimensional or multi dimensional arrays bt friends i dont hav much knowledge of multi dimensional arrays in javascript. if u people will help me to solve this problm thn i will be very thank full to all of you. i hav less time friends. so will u plz help me ??????? please reply me soon friends............ thank you I have 2 combo boxes where you can move the items in combo box 1 to combo box 2. I want to validate that combo box 2 actually has something moved to it. How can I count the items in combo box 2. Combo box 2 will initially have no items in the box on page load. It is up to the user to move the items to combo box 2 and I want to make sure at least 1 item was moved.
Hi All, I'm using Philip M's great Javascript tutorial "Triple Combo Box" to populate three combo boxes on my site. The problem i'm having is that I use the combo boxes to allow users to submit a DB search request using GET Form and I need to have the submitted parameters "selected" when the search result page loads. I've searched all over the internet and I can't seem to find a usable solution so any help would be GREATLY appreciated. Thanks! If you need more information, lemme know! Nick Hello, I need your help. I'd like to be able to populate a combo box (drop down box) from a column in my mdb database: Ex. of whats in mdb database Name -------------- Joey Jacob Smith Jerrod Patrick What should appear in drop down: [ ==== COMBO BOX ==== ] Joey Jacob Smith Jerrod Patrick I cant seem to find any help on the web for this? Thanks for all your help in advance. Hello I'm using the combo box selection menu by Elviro Mirko from this site (http://www.javascriptkit.com/script/...plecombo.shtml) I have made amendments to show my own data, however what I would like to happen is if the user selects from the top combo only, then all the records would be shown, whereas selecting from the second combo merely 'drills down' and shows the records required. - Hope that makes sense. The code is as follows: Code: // first combo box data_1 = new Option("Douglas - DIS", "$"); data_2 = new Option("Douglas - COE", "$$"); data_3 = new Option("Peel - DIS", "$$$"); data_4 = new Option("Peel - COE", "$$$$"); data_5 = new Option("Ramsey - DIS", "$$$$$"); data_6 = new Option("Ramsey - COE", "$$$$$$"); data_7 = new Option("Castletown - DIS", "$$$$$$$"); data_8 = new Option("Castletown - COE", "$$$$$$$$"); // second combo box data_1_1 = new Option("Registry Office Douglas", "-"); data_1_2 = new Option("Broadway Baptist Church Douglas", "-"); data_1_3 = new Option("Finch Hill Congregational Church Douglas", "-"); data_2_1 = new Option("St Thomas's Church", "--"); data_2_2 = new Option("St Barnabas Church", "--"); data_2_3 = new Option("St George's Church", "--"); The HTML code is as follows: Code: <select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;"> <option value="">Select a Register...</option> <option value="Douglas - DIS">Douglas - DIS</option> <option value="Douglas - COE">Douglas - COE</option> <option value="Peel - DIS">Peel - DIS</option> <option value="Peel - COE">Peel - COE</option> <option value="Ramsey - DIS">Ramsey - DIS</option> <option value="Ramsey - COE">Ramsey - COE</option> <option value="Castletown - DIS">Castletown - DIS</option> <option value="Castletown - COE">Castletown - COE</option> </select> <BR><BR> <select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;"> <option value="">Select a venue...</option> </select> the link for the actual site is http://www.manxbmd.com/cgi-bin/db.cg...m;db=marriages If you choose Douglas-COE and search, then 0 records are found, if you choose Douglas-COE followed by St Thomas's then still 0 records are found but if you search the surname Allitson you'll see that there is a record there. I'm not sure where I've gone wrong - I'm completely new to Javascript. Any suggestions welcomed. regards Pendle Hi Everybody This is probably a very commonly asked question, however after much searching online I can't seem to find a straightforward answer. If anyone knows the code or a link to a place with a simple example it would be great. What I have got is a form that a user has to fill out and submit (when validated all variables are stored in a session and emailed after multiple forms are completed), currently I have radio buttons, text boxes and a combo box/ drop down list (for location). All parts are working fine and validating fine. My problem is to do with the combo box//ddl. I have successfully validated the ddl so the user must select a location onsubmit and it is added to session and passed fine. At the moment the ddl only has cities or towns in it however as I would like to include different states and possibly different countries I need a code that validates the state first and then only gives the cities/towns that are in that state (otherwise my ddl would be to large). I can do this with links however I can't seem to do it in a form. I am trying to do it this way DDL has list of all states that on mouseover/ onclick the list is revealed. onclick of a specific state populates another ddl with only the cities cities/ towns that are in that state and onclick of specific city selects the location whereby onsubmit the location is stored in the the session for submission by email Thanks in advance for your help I still have the following two major issues. 1) Firstly I need to be able to send the selection from the second combo box by php. 2) secondly I need the combo box to appear within the table. (I thought this should be easy, but for the life of me cannot figure out how to get the dynamic combo into my table inside the form) I have managed to send the selection from the first combo box with the form and also I can send a selection from the second combo, however onsubmit regardless of what is selected in the second combo box it simply sends the last option not the one selected. I have spent many hours trying to figure out why this is the case to no avail. I have included my code for anyone who may be able to help. Lastly when I have figured out these 2 (with a little help) I should be able to sort out the validation by myself. Please ignore any code that is not relevant <html> <head> <script type="text/javascript"> var this1; window.onload = function() { if (!document.all) document.captureEvents(Event.CHANGE); document.getElementById('myddl').onchange = readDDL1; } function readDDL1() { var ddlobj = document.getElementById('myddl'); var currentSelection = ddlobj.options[ddlobj.options.selectedIndex].value; if (currentSelection == '') currentSelection = ddlobj.options[ddlobj.options.selectedIndex].text; doDDL2(currentSelection); } function doDDL2(ddl1Selection) { var existingDDL2; if ((existingDDL2 = document.getElementById('myddl2')) != null) existingDDL2.parentNode.removeChild(existingDDL2); var ddl2Options; switch (ddl1Selection) { case "Western Australia": ddl2Options = ["Please Select A Location", "Karratha", "Perth"]; break; case "Queensland": ddl2Options = ["Please Select A Location", "Brisbane", "Gold Coast"]; break; } if (typeof ddl2Options == "object") { ddl2 = document.createElement('select'); ddl2.id = "myddl2"; var forVar; for (forVar in ddl2Options) { var newOption = document.createElement('option'); newOption.appendChild(document.createTextNode(ddl2Options[forVar])); ddl2.appendChild(newOption); } document.body.appendChild(ddl2); } document.testform.this1.value = ((ddl2Options[forVar])); } function checkFrequency() { return ShowResults(); } function validate(){ var digits="0123456789" var temp if (document.testform.location.selectedIndex == 0) { alert("Please Select a State"); return false } if (document.testform.location2.selectedIndex == 0) { alert("Please Select a Location"); return false } return true } </script> <style type="text/css"> .td_freq { background-color:yellow; height:40px; text-align:center; } .td_sev { background-colorink; height:40px; text-align:center; } .td_wi { background-color:lightgreen; height:40px; text-align:center; } </style> </head> <body> <FORM name="testform" action='./emlapd.php' method='post' onsubmit="return checkFrequency()"> <input type='hidden' name='this1'> <table align="center" border="1" width="40%"> <tr><td><b>Current Worksite State:</b><font color="red">*</font></td> <td> <select name="location" width='53' id="myddl"> <option value="0">--- Please Select Your State --- & nbs p; & n bsp; & nbs p; </option> <option value="Western Australia">Western Australia</option> <option value="Queensland">Queensland</option> </select> </td></tr> <tr><td><b>Location:</b><font color="red">*</font></td> <td> </td></tr> </table> <tr> <th colspan="2"> <input type="submit" name='submit' value="Submit" onclick= "return validate()"> </th> <td colspan="10"> </td> <th> <input type='reset' name='reset' value='Clear Form'> </th> </tr> </table> </FORM> </body> </html> Thankyou very much to everyone that may help So I can place the DDL inside the form, however it places it at the end of the form. I want it somewhere in the middle (immediately following first combo box) My other main issue is irregardless of the selection it simply posts the last option from the DDL not the one selected. Therefore I still want the second combo box to appear immediately below the first combo box and whatever option is selected from the second combo box I want to be posted with the rest of the form data. If you have any other ideas that would be great Obviously the reason I am still getting the same incorrect post is because the variable posted is still this1 from my code which reads the last value from the DDL. I have tried with all other variables to send as well ie ddl2 however still can't seem to send the selection. So in its current state how can I send the selection and place the second DDL within the form?? Thank you I am fairly new at Javascript, but there is something happening I do not understand. Please someone explain it to me and help with a solution. In the function, I pull data from an URL and I have done this with several different data fields and populate the HTML input, option, and check boxes with no problem with the following method. Code: document.getElementById("othertxt").value=strValue; document.getElementById("radsig").checked=true; document.getElementById("eventtime").value=strValue; But for some reason this method for textarea does not work and I know that there is a value in strValue because check it right before the line of code. Code: document.getElementById("othertxt").value=strValue; Is textarea just treated differently? I have searched the internet and seen examples but for some reason I can not find the correct solution. Hi, Iam trying a simple fill listbox on the body load, but its not working. Can someone please help me on this 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> </head> <script language="javascript" src="script.js"></script> <body onload="fillCategory();"> <form id="drop_list" name="form1" method="post" action=""> <label> <select name="Category" id="Category"> </select> </label> </form> </body> </html> and my script.js: Code: function fillCategory(){ addOption(document.form1.Category, "Fiji", "Fiji", ""); addOption(document.form1.Category, "Australia", "Australia", ""); addOption(document.form1.Category, "New Zealand", "New Zealand", ""); } Hi, am trying to populate my second list box from the 1st. I have done the folowing code, iam trying to call a function in the onchange event of my 1st listbox, but it does not change the URL however if i manually change my URL then the thing works fine. 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 language=JavaScript> function reload(){ var val=form1.make.options[form1.make.options.selectedIndex].value; window.location='upload.php?cat=' + val ; } </script> </head> <body> <?php $host="localhost"; // Host name $username="******"; // Mysql username $password="******"; // Mysql password $db_name="******"; $con= mysql_connect("$host", "$username", "$password"); if (!$con){ die("cannot connect"); } mysql_select_db($db_name, $con); $sql1 = mysql_query("select * from make"); $cat=$_GET['cat']; //This line is added to take care if your global variable is off if(strlen($cat) > 0 and !is_numeric($cat)){//check if $cat is numeric data or not. echo "Data Error"; exit; } if(isset($cat) and strlen($cat) > 0){ $sql2=mysql_query("SELECT * FROM model where id=$cat"); }else{$sql2=mysql_query("SELECT * FROM model"); } echo "<form id='form1' name='form1' method='post' action=''>"; echo "<p>"; echo "<label>"; echo "<select name='make' id='make' onchange='reload()'>"; while($row1 = mysql_fetch_array($sql1)){ //echo "<option value=\"${row1['name']}\">${row1['name']}</option>"; echo "<option value='$row['name']'>$row['name']</option>"; } echo "</select>"; echo "</label>"; echo "</p>"; echo "<p>"; echo "<label>"; echo "<select name='model' id='model'>"; while($row2 = mysql_fetch_array($sql2)){ echo "<option value=\"${row2['name']}\">${row2['name']}</option>"; } echo "</select>"; echo "</label>"; echo "</p>"; echo "</form>"; ?> </body> </html> Thanks Hi I've been working on a listbox full of employees for our company intranet. Each name has an onchange tag that calls up a floor map and that part works fine but I'd really like to populate the names from an XML list so it's easier for non-IT people to maintain. I've been doing alot of web searches on the subject which comes up alot but it's mostly just fragments of what I need being that I've got no javascript background. I found a helpful tutorial on javascriptkit but that wasn't for creating listboxes so I'm only part of the way there. This is the XML file I've got (there will eventually be 400 entries): <?xml version="1.0"?> <list> <employee> <name>##########</name> <office>1656</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>##########</email> </employee> <employee> <name>#########</name> <office>1657</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>###########</email> </employee> </list> The most important parts are the name which will be used as the text of the box and the office number which will determine which floorplan is displayed. I added the other information so I can potentially put it in a div display later but that can wait. Can anyone help point me to some good resources on this subject? Thanks. I am having a hard time figuring this out, I have two simple arrays and I want to populate one by asking a visitor to enter information, it goes something like this... Code: var country = new Array(5); c_list[0] = "USA"; c_list[1] = "UK"; c_list[2] = "France"; c_list[3] = "Germany"; c_list[4] = "Spain"; var president = new Array(); // Last name only president[0] = window.prompt("President of USA?", ""); // Obama president[1] = window.prompt("Prime Minister of UK?", ""); // Brown president[2] = window.prompt("President of France?", ""); // Sarkozy president[3] = window.prompt("Prime Minister of Germany?", ""); // Merkel president[4] = window.prompt("President of Spain?", ""); // Zapatero Now the question is, how do I use a simple for loop to use the names entered and populate the second array? Any help would be very kindly appreciated. Thank you Hi Guys, I am trying to populate a textarea using a dropdown menu. The code I have tried doesn't seem to work, can anyone help? Code: <script type="text/javascript">function updateTextBox(val) { if(val == "1") { document.forms['myForm'].elements['myTextBox'].value = "something"; } else if(val == "2") { document.forms['myForm'].elements['myTextBox'].value = "something else"; } } </script> <form name="myForm"> <select onchange='updateTextBox(val)'> <option></option> <option value="1">1</option> <option value="2">2</option> </select> Changing this drop down should change this text area.... <textarea name="myTextBox"></textarea> </form> Any help is much appreciated. Thanks. Ok, here is my issue. I want to have an input text on the top of the page that when I type in a series of numbers and hit submit, it populates the rest of the form. Does anyone have any idea what I need to perform this action?
I need to pull a date from a database that is already in the correct format of YYYYMMDDHHMMSS and create a javascript new Date() so that it can be used for comparing time elapsed. I have no issue with getting the date from the db and formatting it correctly but when inserted into new Date() it doesn't work. I have it working hard coded in the javascript but would like to replace the date with a value from a database instead of having it hard coded. current javascript is: var today=new Date(); var then=(new Date(2012,03,09,12,00,00,00); var mSeconds=today.getTime()-then.getTime(); what I would like to do: var today=new Date(); var then=(new Date(<?php echo $tou; ?>); var mSeconds=today.getTime()-then.getTime(); $tou is already formatted as 2012,03,09,12,00,00,00 with commas all other variables being pulled from the db work correctly. Hello, I am very new to HTML and PHP but have managed to create a drop down "Surname" box on my website to list all the current surnames in my mySQL database. However, I also want the user to be able to type into the box and for the drop down list to automatically filter depending on the text the user inserts. I understand that this is not possible in HTML and PHP and requires some JavaScript, however I have never used this before and have no idea where to start. Any suggestions or help will be much appreciated. Here is my current HTML and PHP code... Code: $sql="SELECT Surname FROM Patients"; $result=mysql_query($sql); ?> <form name="form" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>"> Surname: <?php echo "<select name=\"surname\">"; echo "<option size =30 ></option>"; while($row = mysql_fetch_array($result)) { echo "<option value='".$row['Surname']."'>".$row['Surname']."</option>"; } echo "</select>"; ?> Thank you! Hi I am doing a java program. In which I have a jsp page, and on that I have two combobox. I have a create a java bean, in which I am extracting the database. I want to populate the combobox by extracting data from database. can anyone suggest me some code using java script , which i can use to populate my combobox. Thanks in advance Hello. I have a problem here I have this menu: Code: <script language="JavaScript"> <!-- function mmLoadMenus() { if (window.mm_menu_0516213335_0) return; window.mm_menu_0516213335_0 = new Menu("root",160,18,"Verdana, Arial, Helvetica, sans-serif",12,"#000000","#ffffff","#f7c68c","#214a6b","center","middle",3,0,1000,-5,7,true,true,true,0,false,true); mm_menu_0516213335_0.addMenuItem("Item5","location=''item5.html'"); mm_menu_0516213335_0.addMenuItem("Item6","location=''item6.html'"); mm_menu_0516213335_0.hideOnMouseOut=true; mm_menu_0516213335_0.menuBorder=2; mm_menu_0516213335_0.menuLiteBgColor='#294a63'; mm_menu_0516213335_0.menuBorderBgColor='#102939'; mm_menu_0516213335_0.bgColor='#101008'; window.mm_menu_0506211449_0 = new Menu("root",160,18,"Verdana, Arial, Helvetica, sans-serif",12,"#000000","#ffffff","#f7c68c","#214a5a","center","middle",3,0,1000,-5,7,true,true,true,0,false,true); mm_menu_0506211449_0.addMenuItem("Item1","location='item1.html'"); mm_menu_0506211449_0.addMenuItem("Item2","location='item2.html'"); mm_menu_0506211449_0.addMenuItem("Item3","location='item3.html'"); mm_menu_0506211449_0.addMenuItem("Item4","location='item4.html'"); mm_menu_0506211449_0.hideOnMouseOut=true; mm_menu_0506211449_0.menuBorder=2; mm_menu_0506211449_0.menuLiteBgColor='#294a63'; mm_menu_0506211449_0.menuBorderBgColor='#102939'; mm_menu_0506211449_0.bgColor='#101008'; mm_menu_0506211449_0.writeMenus(); } // mmLoadMenus() function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script> <script language="JavaScript1.2">mmLoadMenus();</script> And I have a database with 3 fields: id, name and contents. These are the pages. Basically I want to do a select on the mysql database using PHP and populate the menu from the database. Can you tell me how to do this? Thanks Hello, I'm trying to populate an HTML drop down list with data from an XML file but have failed miserably so far using examples I've found. Please help. Thanks, Richard Hi all, I am trying to find out if it's possible to auto populate a text input based on the value of another. e.g. there is an input called name.. the user completes this and enters something like John, then in the same form there is another input called username. Once the person enters John in the name field, the username automatically displays John. I'm not sure how doable this is, I'm not very familar with Javascript, so any advice would be greatly appreciated. Many thanks, Greens85 |