asked on

Dynamic Dropdown Boxeswith submit

Instead of alerting me of option 2 I want it to carry the value over to my submit page.

I was able to get option 1 to carry but not 2
Code getting from is http://www.felgall.com/jstip22.htm
I know it is esy just don't know java

<html>
<head>
<script>
function setOptions(chosen) {
var selbox = document.myform.opttwo;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "City") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "Street") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
}
</script>
 
</head>
<body>
 
 
<form name="myform" method="post" action="submit.php">
<div align="center">
 
<select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
 
<option value=" " selected="selected"> </option>
 
<option value="City">Care</option>
<option value="Street">Other</option>
 
 
 
</select><br /> <br />
 
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
 
</select>
 
<input type="submit" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
 
 
</div></form>
 
</body>
</html>

Open in new window

Michel Plungjan

You mean As Well As

If you remove

onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);"

the form still submits and should still send optwo if anything was selected
PS: JavaScript is NOT JAVA :)

Michel Plungjan

I think you want this

<html>
<head>
<script>
function setOptions(sel) {
  var chosen = sel.options[sel.selectedIndex].value
  var selbox = sel.form.opttwo;
 
selbox.options.length = 0; // clear all
 
if (chosen=="") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first','');
  return;  
}
selbox.options[selbox.options.length] = new Option('Please select');
 
if (chosen == "City") {
  selbox.options[selbox.options.length] = new Option('second choice - option one City','twoone_City');
  selbox.options[selbox.options.length] = new Option('second choice - option two City','twotwo_City');
}
if (chosen == "Street") {
  selbox.options[selbox.options.length] = new Option('second choice - option one Street','twoone_Street');
  selbox.options[selbox.options.length] = new Option('second choice - option two Street','twotwo_Street');
}
}
function validate(theForm) {
  if (theForm.optone.selectedindex<1 || theForm.opttwo.selectedindex<1) {
    alert('Please select something')
    return false
  }
  return true
}
window.onload=function() {
  setOptions(document.myform.optone); // handle reload
}
</script>
 
</head>
<body>
 
 
<form name="myform" method="get" action="submit.php" onSubmit="return validate(this)">
<div align="center">
 
<select name="optone" size="1" onchange="setOptions(this)">
 
<option value="" selected="selected"> </option>
 
<option value="City">Care</option>
<option value="Street">Other</option>
 
 
 
</select><br /> <br />
 
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
 
</select>
 
<input type="submit" value=" GO ">
 
 
</div></form>
 
</body>
</html>

Open in new window

Michel Plungjan

If you change the method to back to post, you need to make sure you use

$option1 = $_POST["optone"];
$option2 = $_POST["opttwo"];

http://www.w3schools.com/php/php_post.asp

adamn123

ASKER

So my submit page is like this
What I get is

Main Page
 
<html>
<head>
<script>
function setOptions(chosen) {
var selbox = document.myform.opttwo;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 }
if (chosen == "City") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "Street") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
}
</script>
 </head>
<body>
 <form name="myform" method="post" action="submit.php">
<div align="center">
 
<select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
 
<option value=" " selected="selected"> </option>
 
<option value="City">City</option>
<option value="Street">Street</option>
 </select><br /> <br />
 
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
 
</select>
 
<input type="submit" name="go" value="Value Selected">
 
 
</div></form>
 
</body>
</html>
 
Submit Page
 
$optone=$_POST['optone']; 
$opttwo=$_POST['opttwo']; 
 
echo $optone;
Print "<br>";
echo opttwo;
 
What gets posted is
City
opttwo

Open in new window

adamn123

ASKER

Sorry put comment in code

What gets posted is
City
opttwo
Above is the 2 pages of code

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

adamn123

ASKER

I tested your code about and it returns

opttwo

It does not carry optone over now and still not opttwo

adamn123

ASKER

Sorry this works it was my submit not working

Good catch

Main
<html>
<head>
<script>
function setOptions(chosen) {
var selbox = document.myform.opttwo;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
 
if (chosen == "City") {
  selbox.options[selbox.options.length] = new Option('second choice - option one City','twoone_City');
  selbox.options[selbox.options.length] = new Option('second choice - option two City','twotwo_City');
}
if (chosen == "Street") {
  selbox.options[selbox.options.length] = new Option('second choice - option one Street','twoone_Street');
  selbox.options[selbox.options.length] = new Option('second choice - option two Street','twotwo_Street');
}
}
</script>
 
</head>
<body>
 
 
<form name="myform" method="post" action="submit.php" onSubmit="document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value;">
<div align="center">
 
<select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
 
<option value=" " selected="selected"> </option>
 
<option value="City">City</option>
<option value="Street">Street</option>
 
 
 
 
</select><br /> <br />
 
 
 
 
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
 
</select>
 
<input type="submit" value="Send" name="submit">
 
<input type="submit" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
 
 
</div></form>
 
</body>
</html>
 
Submit
 
 
$optone=$_POST['optone']; 
$opttwo=$_POST['opttwo']; 
 
 
 
 
echo $optone;
Print "<br>";
echo $opttwo;

Open in new window

Michel Plungjan

Works for me

http://plungjan.name/ee/submit.php

(note I test that Submit is set)

<?php
 
if (isset($_POST['Submit'])) {  
  $optone=$_POST['optone']; 
  $opttwo=$_POST['opttwo'];
  echo $optone . " - " . $opttwo; 
}
else { ?>
<html>
<head>
<script>
function setOptions(sel) {
  var chosen = sel.options[sel.selectedIndex].value
  var selbox = sel.form.opttwo;
 
selbox.options.length = 0; // clear all
 
if (chosen=="") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first','');
  return;  
}
selbox.options[selbox.options.length] = new Option('Please select');
 
if (chosen == "City") {
  selbox.options[selbox.options.length] = new Option('second choice - option one City','twoone_City');
  selbox.options[selbox.options.length] = new Option('second choice - option two City','twotwo_City');
}
if (chosen == "Street") {
  selbox.options[selbox.options.length] = new Option('second choice - option one Street','twoone_Street');
  selbox.options[selbox.options.length] = new Option('second choice - option two Street','twotwo_Street');
}
}
function validate(theForm) {
  if (theForm.optone.selectedindex<1 || theForm.opttwo.selectedindex<1) {
    alert('Please select something')
    return false
  }
  return true
}
</script>
 
</head>
<body>
 
 
<form name="myform" method="post" action="submit.php" onSubmit="return validate(this)">
<div align="center">
 
<select name="optone" size="1" onchange="setOptions(this)">
<option value="" selected="selected"> </option>
<option value="City">Care</option>
<option value="Street">Other</option>
</select><br /> <br />
 
<select name="opttwo" size="1">
<option value="" selected="selected">Please select one of the options above first</option>
 
</select>
 
<input type="submit" name="Submit" value=" GO ">
 
 
</div></form>
 
</body>
</html>
<? } ?>

Open in new window