?
Solved

need simple double combo scripts

Posted on 2005-03-25
23
Medium Priority
?
351 Views
Last Modified: 2008-02-01
i have search on internet for double combo scripts , there's some but not easy to follow, specially for looping with server side scripting . Anyone can show me simple one but powerfull or that task (looping up to 20 perhaps) ?
0
Comment
Question by:hendri2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 15
  • 8
23 Comments
 
LVL 16

Expert Comment

by:ellandrd
ID: 13629076
have you tried www.dynamicdrive.com
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13629081
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13629089
<<< (looping up to 20 perhaps) ? >>>

can you explain what you mean?

as i will create you example

sean
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:hendri2
ID: 13629349
for example i take from javascriptkit :

<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
</p>

<p><select name="D1" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="D2" size="1">
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select></p>

<p><select name="D3" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="D4" size="1">
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select></p>

<p>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

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("JavaScript Kit","http://javascriptkit.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

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
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>

</form>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

just copy and paste

there's three times looping of combo scripts  :


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("JavaScript Kit","http://javascriptkit.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

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
}

function go(){
location=temp.options[temp.selectedIndex].value
}

need to populate each time , to get proper value and different value .  Is there any more efficient way , since i only know server side language but need anvantage of javascript :-)
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13629408
not that im aware of. i have never came across any other ways of achieving this except for the likes of above methods.

im going to create another exmaple for you... whole on

0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13629478
<< looping up to 20 perhaps >>

so you want 20 combo boxes?
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13630080
ok, with using 20 combox, i cant see any way of decreasing the code length so if i was you i'd try using the above example and customise it to what you require.

unless any other experts has any other ideas? if so please say....
0
 

Author Comment

by:hendri2
ID: 13641305
Nice, thank you ellandrd , it's ok for moment  to make looping maximum 20 , i'll provide input box for supply the number "how manny combo show up"  in the page . I have difficult to print the result of each combo value . can you show me another example.
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13642365
I have difficult to print the result of each combo value>>

explain more! where do you want to print these values or how do you want to print them...  on same page, on different page, using a scripting language like php or asp or javascript etc etc...
0
 

Author Comment

by:hendri2
ID: 13642602
i wanna get values of each combo box (second combobox) for processing with php and mysql to insert data.

here's deleted EE question : http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21322265.html i post before .
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13642609
a example for printing the combo box value for the above script:

you could have...

function go(){
//change current window location
window.location=temp.options[temp.selectedIndex].value

// print value of selected option in selectbox
document.write(temp.options[temp.selectedIndex].value);
}


else you can save the value into a varaible and print out the value of variable using document.write()
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13643201
your deleted question cannot be viewed...

when your user submits the page, are you using a php page to process the data or how do you wnat to process the data?

<< wanna get values of each combo box (second combobox) >>

this is easy to do!
0
 

Author Comment

by:hendri2
ID: 13648574
ups, "your deleted question cannot be viewed..." , yes i use php to process the data , when user submits the page , it will insert each values of that combo value to database . My problem is i only get the name of <select> not value of <select> , thats why i looking for other example :-) .
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13650494
right ok i will gave you an example when i get into work.

a form containing a a few combos and a process page in php insert the data into a database.

are you using mysql or Ms Access db?
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13650549
here is an exmaple that using access as the database

theis example is a php page that contains a form. the user selects a deadline date from combo boxs and press submit to add date into database.

i populate the combobox using a external .js file

and have my database set up to work with this example etc etc...

i hope this will give you th eidea of how to get the selectbox value from the form.

i will code up an php/mysql exmaple when i get into work but for now heres the access exmaple

<?php
if ($_SERVER['REQUEST_METHOD'] == 'GET')
{
     $db = odbc_connect("SystemDataProvider","","");
     $result = odbc_exec ($db, "SELECT * FROM tblDocsForReview;");
?>
<html>
<head></head>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../script/script.js"></script>
<body>

<form name="form" onSubmit="return validate(form);" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">

<table border="0" width="100%" class="global">

<tr>
     <td>Deadline (Date/time):</td>
     <td>
     <table border="0" cellpadding="0" cellspacing="0" width="" class="global">
     <tr>
          <th width="0%">&nbsp;</th>
          <th width="0%">&nbsp;</th>
          <th width="0%">&nbsp;</th>
          <th width="0%">&nbsp;</th>
          <th width="0%">&nbsp;</th>
          <th width="0%">&nbsp;</th>
          <th width="0%">Hours</th>
          <th width="0%">&nbsp;</th>
          <th width="0%">Minutes</th>
          <th width="0%">&nbsp;</th>
          <th width="0%">Seconds</th>
     </tr>
     <tr>
          <td width="0%">
          <select name="ddate" class="global">
          <script language="javascript">
                for(i=1;i<32;i++){
                     if(i==(new Date()).getDate())
                            document.write("<option value='" + i + "' selected>" + i);
                      else
                              document.write("<option value='" + i + "'>" + i);
                }
          </script>
          </select>
          </td>
          <td width="0%">&nbsp;</td>
          <td width="0%">
          <select name="month" class="global">
          <script language="javascript">
                for(i=1;i<13;i++){
                     if(i==((new Date()).getMonth()+1))
                            document.write("<option value='" + i + "' selected>" + month_list[i]);
                      else
                              document.write("<option value='" + i + "'>" + month_list[i]);
                }
          </script>
          </select>
          </td>
          <td width="0%">&nbsp;</td>
          <td width="0%">
          <select name="year" class="global">
          <script language="javascript">
                for(i=0;i<5;i++){
                      yearNow = i + (new Date()).getYear();
                      document.write("<option value='" + yearNow + "'>" + yearNow );
                }
          </script>
          </select>
          </td>
          <td width="0%"> @ </td>
          <td width="0%">
          <select name="hour" class="global">
          <script language="javascript">
               for(i=1;i<24;i++){
                    if(i==17)
                       document.write("<option value='" + i + "' selected>" + i);
                 else
                         document.write("<option value='" + i + "'>" + i);
           }
          </script>
          </select>
          </td>
          <td width="0%">&nbsp;</td>
          <td width="0%">
          <select name="minute" class="global">
          <script language="javascript">
           for(i=00;i<59;i++){
                if(i==00)
                       document.write("<option value='" + i + "' selected>" + minute_list[i]);
                 else
                         document.write("<option value='" + i + "'>" + minute_list[i]);
           }
          </script>
          </select>
          </td>
          <td width="0%">&nbsp;</td>
          <td width="0%">
          <select name="second"class="global">
          <script language="javascript">
           for(i=00;i<59;i++){
                if(i==00)
                       document.write("<option value='" + i + "' selected>" + second_list[i]);
                 else
                         document.write("<option value='" + i + "'>" + second_list[i]);
           }
          </script>
          </select>
          </td>
          </tr>
     </table>
     </td>
</tr>
<tr>
     <td colspan="2" align="center">&nbsp;</td>
</tr>
<tr>
     <td colspan="2" align="center"><input type="submit" value="Add New Document"></td>
</tr>
</table>
</form>
<?php
}
else
{
     $ddates = $_POST['ddate'];
     $months = $_POST['month'];
     $years = $_POST['year'];
     $hours = $_POST['hour'];
     $minutes = $_POST['minute'];
     $seconds = $_POST['second'];

     $db = odbc_connect("SystemDataProvider","","");

     $sql = "INSERT INTO tblDocsForReview ([Dates], [Months], [Years], [Hours], [Minutes], [Seconds]) VALUES('$ddates','$months','$years','$hours','$minutes','$seconds')";
     $result = odbc_exec ($db,$sql);
}
?>
</body>
</html>

Hope this helps

sean
0
 

Author Comment

by:hendri2
ID: 13650559
wow, awesome , thank you very much ellandrd , wait fo for ur example :-)
0
 

Author Comment

by:hendri2
ID: 13650737
good example , i use mysql and never use access . example of html generated page is fine too, i wanna see the " pattern in javascipt " , thanks.
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13650923
im back.
ok this example is in mysql/php.

im connecting on localhost, odbc, 123456789 (for the hackers - its just my dummy data)

i have a table called "PersonDetails" that have the fields firstname, lastname address, age, country of birth....

i connect to the db, populate selectbox with all countries of birth. then allow user to select country and then display it.

here is goes...

form.php
-------------

<html>
<head><title></title></head>
<body>
<p>Search Database</p>
<form name="myForm" method="POST" action="display.php">
<?php
$db = "PersonDetails";

$link = mysql_connect("localhost","odbc","123456789");

if (!$link) die ("Couldn't connect to MySQL");

mysql_select_db($db , $link) or die ("Couldn't open $db: ".mysql_error());

$result = mysql_query( "SELECT country FROM tblPersonDetails" ) or die("SELECT Error: ".mysql_error());

if(mysql_num_rows($result) > 0)
{
      echo ("<select name=\"country\">");

      while ($row = mysql_fetch_object($result))
      {
            echo ("<option value=\"$row->country\">$row->country</option>");
      }
      echo ("</select>");
}
else
{
      echo ("<i>No countries found, else database empty<br><br></i>");
}

mysql_close($link);
?>
<input type="submit" value="Search"><input type="reset">
</form>
</body>
</html>

display.php
-------------

<?php

$selectedcountry = $_POST['country'];

$db = "PersonDetails";

$link = mysql_connect("localhost","odbc","123456789");

if (!$link) die("Couldn't connect to MySQL");

mysql_select_db($db , $link) or die("Couldn't open $db: ".mysql_error());

$query = " SELECT * FROM tblPersonDetails WHERE country='$selectedcountry'";

$result = mysql_query($query) or die ("SELECT Error: ".mysql_error());

print ("<table width=\"200\" border=\"1\">\n");

while ($get_info = mysql_fetch_row($result))
{
      print ("<tr>");

      foreach ($get_info as $field)
            print ("<td>$field</td>");

      print ("</tr>");
}

print ("</table>\n");

mysql_close($link);
?>

hope this help clear up this question...

Sean
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13650964
extra:

using javascript

document.formname.selectbox.options[document.formname.selectbox.selectedIndex].text  

----> this will return the text of the selected item in a combo box

document.formname.selectbox.options[document.formname.selectbox.selectedIndex].value  

----> this will return the value of the selected item in a combo box
0
 

Author Comment

by:hendri2
ID: 13651427
:-) , can you gave me example of html generated result of that page , to see what part i must looping , since i not quite good in javascript , but i can learn fast from generated html code contain that double combo .
to combine with :
"
document.formname.selectbox.options[document.formname.selectbox.selectedIndex].value  

----> this will return the value of the selected item in a combo box
"
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13652317
ok whole on...
0
 
LVL 16

Accepted Solution

by:
ellandrd earned 2000 total points
ID: 13655458
Sorry, i work as Web progrommer for company and had other jobs to finish.

anyways heres a HTML generated example

<html>
<head>
      <title></title>
<script language="Javascript">
function displaySelectBoxValue()
{
      var selectedValue = document.myform.myselectbox.options[document.myform.myselectbox.selectedIndex].value
      alert(selectedValue);
      document.write("Your selected: "+selectedValue);
}
</script>
</head>
<body>
<form name="myform">
<select name="myselectbox">
                <option>Please Select Favourite Language</option>      
                <option value="Javascript">Javascript</option>
      <option value="PHP">PHP</option>
      <option value="ASP">ASP</option>
      <option value="JSP">JSP</option>
      <option value="XML">XML</option>
</select>
<input type="button" name="mybutton" value="Submit" onclick="displaySelectBoxValue();">
</form>
</body>
</html>
0
 

Author Comment

by:hendri2
ID: 13658241
:-) , it's ok , main job is important , but your respon is very helpfull , i have the idea after see the code . thank you very much for your kindness and patience with me. Success .
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question