JavaScript - Populating Multiple Combobox After Selecting One Combobox

Hi guys,

Let me explain simply what I do and what I'm trying to achieve:

I got a couple of comboboxes were the user selects a series of numbers. Once a selection is made, the value is appended to an input box. The idea is that the appended values form a telephone number, or at least part of one, that will then be used to search trough a database to look for a matching number.

The code below is what I have done so far:

Code:

<script type="text/javascript">
function displayIndicatif(){
	var sel = document.getElementById("indicatif");
	var text = sel.options[sel.selectedIndex].value;
        var out = document.getElementById("blabla");
	out.value += text+"\n";
		}

function displayBloc(){
	var sel1 = document.getElementById("bloc");
	var text1 = sel1.options[sel1.selectedIndex].value;
	var out1 = document.getElementById("blabla");
	out1.value += text1+"\n";
}
</script>

[...]

<input type="text" id="blabla"/>

[..]

<select id="indicatif" onChange="displayIndicatif();">
	<option value="021">021</option>
        <option value="022">022</option>
	<option value="031">031</option>
</select>

<select id="bloc" onChange="displayBloc();">
	<option value="555" class="021">555</option>
	<option value="666" class="021">666</option>
	<option value="777" class="021">777</option>
</select>

Basically what happens now is this:

combobox indicatif: 021 | 022 | 031
combobox bloc: 555 | 666 | 777

If I select "021" from indicatif, the script will append 021 to the input "blabla". The problem is, if I now select "022", the input will show "021022" instead of replacing the 021 with 022.

What I would like is that, for each combobox, the script replaces the selected value with the new one instead of simply appending it, like instead of say 021022555666 it would show 021555 or 022666 or 021666 depending on what is selected...you get the idea?

Is this doable? Needless to say I'm a total noob at javascript...I adapted the code I got now from some other guy who was trying to achieve almost the same thing and adapted it to my needs, or least, tried to, but now I'm stuck.

Any help is appreciated!

Thanks

Hi

Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above.

I think the best solution would be using Javascript can anyone suggest a solution or example code?

Many thanks

Sarah

Hi
I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success!
Thanks in advance

Hey guys. I need little bit of help which i know it will be piece of cake for you.

In emp_rota.php , i want the user to select multiple dates (through a calendar) which will be fetched in the php in the next page. everything works except that the calendar script works only on DATE1, when user clicks to add another date then though everything works , except the calendar doesnt come up. help MEE !!

P.s. i am attaching the whole script along with this

http://www.mediafire.com/?ayz7mpiauba4dya

I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box.

So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists.

My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box.

I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked.

I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list.

I can post code if it is helpful.

Thanks,
Taylor

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, 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,
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 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.

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 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.

hiii 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 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

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?

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