Jump to content

form with radio buttons, dropdown box

Recommended Posts

Let's try this again...


I'm using 2 radio buttons and a drop down. what I want is to send the user to one of 6 urls when they hit submit.


radio buttons: -Fairy Goddess

-Inner Warrior

drop down : -Young Adult

-20 Something

-30 and up

Possible outcomes: 1. Fairy Goddess - Young Adult -->url

2. Fairy Goddess - 20 Something -->url

3. Fairy Goddess - 30 and up -->url

4. Inner Warrior - Young Adult -->url

5. Inner Warrior - 20 Something -->url

6. Inner Warrior - 30 and up -->url


here's my NEW code:

<form action="/html/tags/html_form_tag_action.cfm" method="get"><fieldset><div><label for="guide">Choose Your Guide</label><br><input type="radio" name="guide" value="fairygoddess" /> Fairy Goddess<input type="radio" name="guide" value="innerwarrior" /> Inner Warrior</div><div><label for="age">Choose your Age Group:</label><br><select name="age"><option value ="youngadult">Young Adult</option><option value ="20something">20 Something</option><option value ="30andup">30 and up</option></select></div><div><input type="submit" value="Submit" /></div></fieldset></form> 
Link to post
Share on other sites

something like this may work for you, but I think validation will be an issue. I'd use php.

<script>function submitform(){if (document.theform.submitbutton.value == "Submit"){document.theform.action = "submit.php";document.theform.submit();} else {document.theform.action = "print.php";document.theform.submit();}}</script><form name="theform" method="POST" action="submit.php" onSubmit="submitform();"><input type="submit" name="submitbutton" value="Submit"><input type="submit" name="submitbutton" value="Print"></form>
Edited by niche
  • Like 1
Link to post
Share on other sites

Make array of url with values of 'guide' and 'age' combined to give index to specific array item.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>Document Title</title>        <script type="text/javascript">            var direct_to = new Array();            direct_to['fairygoddessyoungadult'] = 'http://www.w3schools.com';            direct_to['fairygoddess20something'] = 'http://www.w3schools.com/js/js_window_location.asp';            direct_to['fairygoddess30andup'] = 'http://w3schools.invisionzone.com/index.php?showtopic=51348#entry283611';            direct_to['innerwarrioryoungadult'] = 'http://uk.yahoo.com';            direct_to['innerwarrior20something'] = 'http://google.com';            direct_to['innerwarrior30andup'] = 'http://google.co.uk';            function redirectto(elem) {                var parent_form = document.getElementById(elem.id);                var valid = true;                var RadioCheckedValue = "";                var SelectValue = "";                                for (i = 0; i < parent_form.elements.length; i++)                {                    if (parent_form.elements[i].type === "radio" && parent_form.elements[i].checked === true)                    {                        RadioCheckedValue = parent_form.elements[i].value;                    }                    if (parent_form.elements[i].type === "select-one")                    {                        SelectValue = parent_form.elements[i].value;                    }                }                if (RadioCheckedValue === "")                {                    valid = false;                }                if (valid)                {                    location = direct_to[RadioCheckedValue + SelectValue];                }                else                {                    alert('Oops missed something here');                }            }        </script>        <style type="text/css">        </style>    </head>    <body>        <form id='myform' action="/html/tags/html_form_tag_action.cfm" method="get" onsubmit="redirectto(this);                return false;">            <fieldset>                <div>                    <label for="guide">Choose Your Guide</label><br>                    <input type="radio" name="guide" value="fairygoddess" /> Fairy Goddess                    <input type="radio" name="guide" value="innerwarrior" /> Inner Warrior                </div>                <div>                    <label for="age">Choose your Age Group:</label><br>                    <select name="age">                        <option value ="youngadult">Young Adult</option>                        <option value ="20something">20 Something</option>                        <option value ="30andup">30 and up</option>                    </select>                </div>                <div>                    <input type="submit" value="Submit" />                </div>            </fieldset>        </form>    </body></html>

Edit Added id ref to form element for this to work, also ' for="age" ' the use of 'for' only works when referencing attribute id value NOT attribute name value

Edited by dsonesuk
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...