Advanced Search

Results 1 to 9 of 9

Thread: How to create multiple choice form using combobox

  1. #1
    Join Date
    Apr 2012
    Posts
    19
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default How to create multiple choice form using combobox

    Hello
    i'm having a big trouble programming this one ,
    i'v attached a picture of what i mean (made in photoshop)
    when the user made his choices by clicking on the combobox items he will be redirected to another page depending on what he chooses .
    for example :
    choosing :
    1
    and
    3
    and
    2
    and
    7
    will be redirected to page : A

    Hope you guys help me with that since i'm a beginner in this and i really need this to be done ASAP .
    thank you guys
    and by the way this website has some really gooooood stuff , and i'm really surprised their free

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,709
    Thanks
    2
    Thanked 389 Times in 384 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function getURL(obj){
     var ary=['s1','s2','s3','s4'],frm=obj.form,sel,url='',goto=false,z0=0;
     for (;z0<ary.length;z0++){
      sel=frm[ary[z0]];
      if (sel&&sel.options){
       url+=sel.options[sel.selectedIndex].text;
      }
     }
     if (url=='1237'){
      goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
     }
     else if (url=='2237'){
      goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
     }
     if (goto){
      window.top.location=goto;
     }
     else {
      alert(url);
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    <select name="s1" size="1" onchange="getURL(this);" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s2" size="1" onchange="getURL(this);" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s3" size="1" onchange="getURL(this);" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s4" size="1" onchange="getURL(this);" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    </form>
    </form>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    the cute (05-02-2012)

  4. #3
    Join Date
    Apr 2012
    Posts
    19
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD 
    
    </html>
    what should i do in the button code !!?
    the button of "GO" or "NEXT" ?

  5. #4
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    This is in asp and is very simple to follow. This only works on windows servers. When you answer 1, 4, and 4 - You go to google.com!
    You can edit the if... then statements to suit your needs. Hope this helps.


    <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    <%
    if request.Form("submitted") <> "" then 'check to see if form was submitted
    if request.Form("q1") = 1 and request.Form("q2") = 4 and request.Form("q3") = 4 then 'if answers are 1, 1, and 4 then...
    response.redirect("http://www.google.com") 'go to web page
    end if
    end if
    %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <form id="questions" name="questions" method="post" action="">
    <p>
    <label for="q1">Question 1: </label>
    <select name="q1" id="q1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <label for="q2"><br />
    Question 2: </label>
    <select name="q2" id="q2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <label for="q3"><br />
    Question 3: </label>
    <select name="q3" id="q3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    </p>
    <p>
    <input name="submitted" type="hidden" id="submitted" value="1" />
    <input type="submit" name="submit" id="submit" value="Submit" />
    </p>
    </form>
    </body>
    </html>

  6. The Following User Says Thank You to hamada76 For This Useful Post:

    the cute (05-03-2012)

  7. #5
    Join Date
    Apr 2012
    Posts
    7
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default You need to do this with funstions and arrays

    Here is a very simple way to get you going in asp but it is not ideal...


    <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    <%
    if request.Form("submitted") <> "" then 'check to see if form was submitted

    'get the answers and put into variables
    q1a=request.Form("q1")
    q2a=request.Form("q2")
    q3a=request.Form("q3")
    q4a=request.Form("q4")
    answers=q1a&q2a&q3a&q4a

    if answers = 1111 then response.redirect("http://www.google.com") end if ' answers to questions 1 to 4 in order with no spaces
    if answers = 2111 then response.redirect("http://www.bing.com") end if ' answers to questions 1 to 4 in order with no spaces
    if answers = 3111 then response.redirect("http://www.yahoo.com") end if ' answers to questions 1 to 4 in order with no spaces


    'and so on... You will need to create a function to better do this!
    ' with this method, you will need way too many if then statements!!!


    end if
    %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Quiz</title>
    </head>

    <body>
    <form id="questions" name="questions" method="post" action="">
    <p>
    <label for="q1">Question 1: </label>
    <select name="q1" id="q1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <label for="q2"><br />
    Question 2: </label>
    <select name="q2" id="q2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <label for="q3"><br />
    Question 3: </label>
    <select name="q3" id="q3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <br />
    <label for="q4">Question 4: </label>
    <select name="q4" id="q4">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <br />
    </p>
    <p>
    <input name="submitted" type="hidden" id="submitted" value="1" />
    <input type="submit" name="submit" id="submit" value="Submit" />
    </p>
    </form>
    </body>
    </html>

  8. The Following User Says Thank You to hamada76 For This Useful Post:

    the cute (05-03-2012)

  9. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,709
    Thanks
    2
    Thanked 389 Times in 384 Posts

    Default

    what should i do in the button code !!?
    the button of "GO" or "NEXT" ?
    Reply With Quote
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function getURL(obj){
     var ary=['s1','s2','s3','s4'],frm=obj.form,sel,url='',goto=false,z0=0;
     for (;z0<ary.length;z0++){
      sel=frm[ary[z0]];
      if (sel&&sel.options){
       url+=sel.options[sel.selectedIndex].text;
      }
     }
     if (url=='1237'){
      goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
     }
     else if (url=='2237'){
      goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
     }
     if (goto){
      window.top.location=goto;
     }
     else {
      alert(url);
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    <select name="s1" size="1" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s2" size="1" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s3" size="1" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s4" size="1" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <input type="button" name="" value="Next"  onmouseup="getURL(this);"/></form>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. The Following User Says Thank You to vwphillips For This Useful Post:

    the cute (05-02-2012)

  11. #7
    Join Date
    Apr 2012
    Posts
    19
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function getURL(obj){
     var ary=['s1','s2','s3','s4'],frm=obj.form,sel,url='',goto=false,z0=0;
     for (;z0<ary.length;z0++){
      sel=frm[ary[z0]];
      if (sel&&sel.options){
       url+=sel.options[sel.selectedIndex].text;
      }
     }
     if (url=='1237'){
      goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
     }
     else if (url=='2237'){
      goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
     }
     if (goto){
      window.top.location=goto;
     }
     else {
      alert(url);
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    <select name="s1" size="1" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s2" size="1" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s3" size="1" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s4" size="1" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <input type="button" name="" value="Next"  onmouseup="getURL(this);"/></form>
    </body>
    
    </html>
    Hi
    that really working !
    but i just need to do some changes and i didn't figured out how to do it !
    when i click on a choose in some dropdown menu a javascript message showed up and i don't want that message to show up !!
    and :
    2 * when i choose 1, then 2 then 3 then 7 it redirect me directly to the page of dynamicdrive whithout clicking on the button ? how to let the button do that !?

    3 * if i want to do a global result for those drop down menus, i mean if i decided that whatever choice that the visitor has made it will lead him to one unique page everytime in every choice !!?
    how to do that ?
    and thanks a lots that's been helpful and i'm sorry for not replying for confirmation earlier i didn't have my ID info in the dynamicdrive !
    thank you again

  12. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,709
    Thanks
    2
    Thanked 389 Times in 384 Posts

    Default

    1 & 2

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function getURL(obj){
     var ary=['s1','s2','s3','s4'],frm=obj.form,sel,url='',goto=false,z0=0;
     for (;z0<ary.length;z0++){
      sel=frm[ary[z0]];
      if (sel&&sel.options){
       url+=sel.options[sel.selectedIndex].text;
      }
     }
     if (url=='1237'){
      goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
     }
     else if (url=='2237'){
      goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
     }
     if (goto){
      window.top.location=goto;
     }
     else {
    //  alert(url);
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    <select name="s1" size="1"  onchange="getURL(this);" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s2" size="1" onchange="getURL(this);"  >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s3" size="1" onchange="getURL(this);"  >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s4" size="1" onchange="getURL(this);"  >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <input type="button" name="" value="Next"  onmouseup="getURL(this);"/></form>
    </body>
    
    </html>
    3

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    var goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
    
    function getURL(obj){
     window.top.location=goto;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
    <select name="s1" size="1"  onchange="getURL(this);" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s2" size="1" onchange="getURL(this);"  >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s3" size="1" onchange="getURL(this);"  >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <select name="s4" size="1" onchange="getURL(this);"  >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    </select>
    <input type="button" name="" value="Next"  onmouseup="getURL(this);"/></form>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  13. The Following User Says Thank You to vwphillips For This Useful Post:

    the cute (05-03-2012)

  14. #9
    Join Date
    Apr 2012
    Posts
    19
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    1 & 2
    thank you philips that was generous from you .
    after applying that the button still not involved in the situation, when i choice 1 then 2 then 3 then 7 the redirection page shows up .
    how to prevent that and let the button do the calculation and the redirection ?
    thank you so much

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •