Question

使用简单的html表单，我如何根据他们的选择重定向人？

<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>

例如：

如果选择：Red / Big / Europe请访问www.somedomain.com/001

如果选择：Blue / Big / Europe请访问www.somedomain.com/006

如果选择：blue / small / America请访问www.somedomain.com/us/003

谢谢你们的帮助！

Answer 1

首先，你将使用某种重定向脚本，我将在这里使用via头。

<?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/' ) ;
?>

然后你应该让所有选项都像一个选项，这样你就可以在开关或类似的东西中使用它。

<?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' ) ;
?>

<强> //修改

请注意，我没有清理或验证数据。您应始终保持数据清洁，并在用户来自时检查。希望它有所帮助;）

Answer 2

您可以向表单添加onSubmit处理程序，检查表单值，然后使用Javascript重定向到所需的页面。如果您希望它在没有Javascript的情况下工作，那么您的PHP脚本基本上可以通过将HTTP Location:标头设置为您想要访问的URL来执行相同的操作。

Answer 3

我使用jQuery http://jquery.com/

我会为每个输入添加一个类 - 即.options，并为每个保存您想要指向的URL添加数据属性。并有一个容器来保持他们的选择，即：

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

然后是这样的事情：

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

然后提交

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

这样就可以循环遍历带有“选项”类的所有单选按钮，并在单击时添加一个事件监听器。因此，当有人点击一个时，它会检查它是否被选中（因为它可能被点击以取消选择它），如果选中它，则它会将与该选择相关的URL（存储在data-location attr中）添加到#location hidden输入。然后，当提交表单时，它会将用户发送到该URL，您需要添加一些内容来处理空URL等。

如何根据表单选择重定向人员

3 个答案: