?
Solved

Dynamic Dropdown Boxeswith submit

Posted on 2008-11-12
9
Medium Priority
?
320 Views
Last Modified: 2012-05-05
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
Comment
Question by:adamn123
  • 5
  • 4
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22939762
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22939854
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22939870
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
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:adamn123
ID: 22939899
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
 

Author Comment

by:adamn123
ID: 22939923
Sorry put comment in code

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

Accepted Solution

by:
Michel Plungjan earned 400 total points
ID: 22940010
try making opttwo an actual variable:

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

0
 

Author Comment

by:adamn123
ID: 22940015
I tested your code about and it returns


opttwo

It does not carry optone over now and still not opttwo
0
 

Author Comment

by:adamn123
ID: 22940114
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22940191
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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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

807 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