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

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

0
adamn123
Asked:
adamn123
  • 5
  • 4
1 Solution
 
Michel PlungjanIT ExpertCommented:
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 :)
0
 
Michel PlungjanIT ExpertCommented:
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

0
 
Michel PlungjanIT ExpertCommented:
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


0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
adamn123Author Commented:
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

0
 
adamn123Author Commented:
Sorry put comment in code

What gets posted is
City
opttwo
Above is the 2 pages of code
0
 
Michel PlungjanIT ExpertCommented:
try making opttwo an actual variable:

echo $optone;
Print "<br>";
echo $opttwo;

0
 
adamn123Author Commented:
I tested your code about and it returns


opttwo

It does not carry optone over now and still not opttwo
0
 
adamn123Author Commented:
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

0
 
Michel PlungjanIT ExpertCommented:
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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now