0

使用简单的 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>

    • 例如：

    如果选择是：红色/大/欧洲，请访问 www.somedomain.com/001

    如果选择是：蓝色/大/欧洲，请访问 www.somedomain.com/006

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

    谢谢你们的帮助！

    4

    3 回答 3

    1

    首先，您将使用某种重定向脚本，我将在此处使用 via header。

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

    //编辑

    请注意，我没有清理或验证数据。当数据来自用户时，您应该始终保持数据清洁和检查。希望能帮助到你 ;）

    于 2013-07-18T12:05:51.833 回答
    0

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

    我会为每个输入添加一个类 - 即 .options ，并为每个包含您想要定向的 url 添加一个 data- 属性。并有一个容器来保存他们的选择，即：

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

    于 2013-07-18T11:58:37.327 回答
    0

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

    于 2013-07-18T11:56:55.053 回答