CODEWITHSUNDEEP
phpjavascripthtml
Erickson Alejandro
Erickson Alejandro

Reputation: 11

How to redirect people depending on form selection

with a simple html form, how can I redirect people depending on their selection?

<form id="contact-form" action="xxxxx" method="post">
<li>option1
<ul>
  <li><label>Red</label> <input type="radio" name="Option1" id="vsat" value="red"></li>
  <li><label>Blue</label> <input type="radio" name="Option1" id="blue" value="blue"></li>
  <li><label>White</label> <input type="radio" name="Option1" id="white" value="white"></li>
</ul>
</li>
<li>option2
<ul>
  <li><label>Big</label> <input type="radio" name="Option2" id="vsat" value="red"></li>
  <li><label>Small</label> <input type="radio" name="Option2" id="blue" value="blue"></li>
</ul>
</li>
<li>Location
<ul>
  <li><label>Europe</label> <input type="radio" name="Option3" id="eur" value="eur">    </li>
<li><label>America</label> <input type="radio" name="Option3" id="ame" value="ame"></li>
</ul>

    • for example:

    If the selection is: Red/Big/Europe go to www.somedomain.com/001

    If the selection is: Blue/Big/Europe go to www.somedomain.com/006

    If the selection is: blue/small/America go to www.somedomain.com/us/003

    Thank you guys for any help!

    Upvotes: 0

    Views: 106

    Answers (3)

    Gabriel Felipe
    Gabriel Felipe

    Reputation: 81

    First, you will use some kind of redirecting script, I'll use via header here.

    <?php
   //this will NOT work, the browser received the HTML tag before the script or even a white space
   header( 'Location: http://www.linktoredirect.com/' ) ;
?>

    Then you should make all options feels like one so you can use it in a switch or something like that.

    <?php
$singleOption = $_GET['option1']."-".$_GET['option2']."-".$_GET['option3'];
//Now that you have one big option you can easily do:
switch($singleOption){
    case "red-big-europe": $sufix = '001'; break;
    case "blue-big-europe": $sufix = '002'; break;
    //And so on
    default: $sufix='404'; //some default value to redirect if it doesn't match anything
}
//With the switch you already have the sufix, so you only do:
header( 'Location: http://www.somedomain.com/$sufix' ) ;
?>

    //Edit

    Note that I haven't sanitized or validated the data. You should always keep your data clean and checked when they come from the user. Hope it helps ;)

    Upvotes: 1

    JohnnyFaldo
    JohnnyFaldo

    Reputation: 4161

    I'd use jQuery http://jquery.com/

    I'd add a class to each input - ie .options , and add a data- attribute to each holding the url you want to direct to. And have a container to hold their selection ie:

    <input type="hidden" name="location" id="location" />

    then Something like this: 

    $(function() {
   $('.options').each(function() {
      $(this).click(function() {
         if($(this).is(':checked')) {
           var loc = $(this).attribute('data-location');
           $('#location').val(loc);
         }
       }
   }
});

    then upon submit 

     $('#formID').submit(function() {
    var loc = $('#location').val(); 
    window.location = loc;
 });

    so that loops through all the radio buttons with the class 'options' and adds an event listener for when their clicked. So when someone clicks one it checks if it's been selected (as it may be clicked to de-select it) and if it is checked then it adds the url relevant to that choice (stored in data-location attr) to the #location hidden input. Then when the form is submitted it sends the user to that url , you'd want to add in things to handle an empty url etc.

    Upvotes: 0

    Ulrich Schmidt-Goertz
    Ulrich Schmidt-Goertz

    Reputation: 1116

    You could add an onSubmit handler to the form, examine the form values, and redirect to the desired page using Javascript. If you want it to work without Javascript, your PHP script can basically do the same thing by setting a HTTP Location: header to the URL you want to go to.

    Upvotes: 0

    Related Questions