How do I create a form like this?

11 Posts

preddz_design Reply #1, 16 years ago

Hi Forum,

I want to make a form where users select an option from a drop down menu, which then changes the options on a second drop down menu.

For example, the first menu would have the options of wine or beer. If the user selects wine from the first menu, the second menu options would display red or white. If they select beer the second menu options would change to Heineken or Carlsberg.

I’m guessing this is done with Javascript in some way but I’ve got no idea how.

If someone could help me out and provide some code for my example that would be great.

Thanks!

Steve

137 Posts

dowhatnow Reply #2, 16 years ago

Yes, you could do this with a little javascript. You would need to set up two select option elements as you said. The first has options of beer or wine.
The second select would change based on the value of the first select element.

Things to check out javascript:

I would use "onchange" to call a function that got the value of the first select element.

<select name="myselect" onchange="onchange(this.form.myselect);">

within that function, I would set up a switch case to listen for the value of the select element

function onchange(value)
{
    var output = "";

    switch (value)
    {
        case'beer':
            output = '<option value="brand x">Brand X</option';
        break;
        case'wine':
            output = '<option value="red">Red</option>';
        break;
    }
   
    return output;
}

The javascript function will generate the next select options for you based on whatever value is passed in. You will need to double check my function, I put this together pretty quick so it’s probably going to need some TLC before it works.

Hope this helps you get going!

11 Posts

preddz_design Reply #3, 16 years ago

Ok I’ve gotten a bit further with this, but I’m getting an error when I try to submit the form. Below is my form code and the javascript I’m using:

[+validationmessage+]
<form method="post" action="[~[*id*]~]" name="myform">
    <input type="hidden" name="formid" value="feedbackForm" />
    
    <p><label accesskey="n" for="Name">Your Name</label>
    <input type="text" name="Name" maxlength="60" eform="Your Name::1:Expected at least two words:#REGEX /^\w+\s\w+/i" /></p>

    <p><label accesskey="e" for="email">Your Email Address</label>
    <input type="text" name="email" size="40" maxlength="40" eform="Your Email Address:email:1" /></p>

<label>Product:</label>

<select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);"> 
		<option value=" " selected="selected"> </option> 
		<option value="1">Group 1</option> 
		<option value="2">Group 2</option> 
		 </select><br /> <br /> 
		<select name="opttwo" size="1"> 
		<option value=" " selected="selected">Please select a group from the list above first</option> 
		</select>
    
    <p><label accesskey="c" for="comments">Comments</label>
    <textarea cols="40" rows="10" name="comments" eform="Comments:html:1"></textarea></p>

    <p>
    Please enter the     anti spam code below:<br />
    <img src="[+verimageurl+]" alt="verification code" border="1"/>
    </p>
    <p>
    <label accesskey="c" for="vericode">code</label>
    <input type="text" name="vericode" size="20" />
    </p>
    
    <p><input type="submit" name="submit" value="Send Feedback"></p>
</form>

<script type="text/javascript">
		function setOptions(chosen) {
var selbox = document.myform.opttwo;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select a group from the list above first',' ');
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('Group 1 Example 1','oneone');
  selbox.options[selbox.options.length] = new Option('Group 1 Example 2','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('Group 2 Example 1','twoone');
  selbox.options[selbox.options.length] = new Option('Group 2 Example 2','twotwo');
}
}
</script>

The error I’m getting when I try to submit is ’Some errors were detected in your form: opttwo » Incorrect value’. It’s probably something simple I’m overlooking but I’m a bit lost when it comes to javascript. Can anyone see why this value isn’t working as it should?

Thanks