• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 357
  • Last Modified:

need simple double combo scripts

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
hendri2
Asked:
hendri2
  • 15
  • 8
1 Solution
 
ellandrdCommented:
have you tried www.dynamicdrive.com
0
 
ellandrdCommented:
<<< (looping up to 20 perhaps) ? >>>

can you explain what you mean?

as i will create you example

sean
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
hendri2Author Commented:
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
 
ellandrdCommented:
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
 
ellandrdCommented:
<< looping up to 20 perhaps >>

so you want 20 combo boxes?
0
 
ellandrdCommented:
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
 
hendri2Author Commented:
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
 
ellandrdCommented:
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
 
hendri2Author Commented:
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
 
ellandrdCommented:
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
 
ellandrdCommented:
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
 
hendri2Author Commented:
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
 
ellandrdCommented:
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
 
ellandrdCommented:
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
 
hendri2Author Commented:
wow, awesome , thank you very much ellandrd , wait fo for ur example :-)
0
 
hendri2Author Commented:
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
 
ellandrdCommented:
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
 
ellandrdCommented:
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
 
hendri2Author Commented:
:-) , 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
 
ellandrdCommented:
ok whole on...
0
 
ellandrdCommented:
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
 
hendri2Author Commented:
:-) , 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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 15
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now