将复选框表单发送到特定 URL

Question

    <form action="" method="get" name="combination" target="_self">
            <input type="checkbox" name="tag[]" value="pop" />pop<br /><br />
            <input type="checkbox" name="tag[]" value="rock" />rock<br /><br />
            <input type="checkbox" name="tag[]" value="indie" />indie<br /><br />
            <input type="checkbox" name="tag[]" value="electronic" />electronic<br />
    <input name="" type="submit">
    </form>   

如果用户单击弹出框和摇滚框，我想将表单发送到www.mysite.com/?view=listen&tag[]=pop&tag[]=rock 我该怎么做？ 用户可以选择一个、两个或三个标签。所以标签数组的元素个数是可变的。

Answer 1

您不能使用纯 HTML。您只能为 action 属性指定一个 URL。

但是您可以使用 JavaScript（如果没有启用 JS，它将使您的表单无用）。只需检查复选框的checked 状态并相应地交换action URL。

Answer 2

也许我在这里没有得到确切的问题，但是为什么不对表单进行一些小的更改，如下所示：

<form action="http://www.mysite.com/">
    <input type="hidden" name="view" value="listen" />
    <input type="checkbox" name="tag[]" value="pop" />pop<br /><br />
    <input type="checkbox" name="tag[]" value="rock" />rock<br /><br />
    <input type="checkbox" name="tag[]" value="indie" />indie<br /><br />
    <input type="checkbox" name="tag[]" value="electronic" />electronic<br />
    <button type="submit">submit</button>
</form>

Answer 3

其实你不希望表单调用action，所以你必须取消提交。 它缺少返回错误。同样“location.href”是错误的，正确的是“parent.window.location.href”

现在已经试过了。

   <form action=""  method="get" name="combination" target="_self">
            <input type="checkbox" name="tag[]" value="pop" />pop<br /><br />
            <input type="checkbox" name="tag[]" value="rock" />rock<br /><br />
            <input type="checkbox" name="tag[]" value="indie" />indie<br /><br />
            <input type="checkbox" name="tag[]" value="electronic" />electronic<br />
    <input name="" type="submit">
    </form>   


   <script>
    $("form").submit(function(){
       var url = "http://www.mysite.com/?view=listen&";

       var i = 0;
      $("input:checked").each(function(){
          url += "tag[" + i + "]=" + $(this).val() + "&";
          i++;
      });
      parent.window.location.href = url;
      return false;
    });
</script>

Answer 4

这就是表单操作的用途 - 您将在此处指定表单的去向。

使用jQuery，您可以编辑特定事件的表单操作。为您的表单提供一个 ID，例如 my_form 和您的复选框描述性 ID：

<form id="my_form" action="" method="get" name="combination" target="_self">
    <input id="pop_check" type="checkbox" name="tag[]" value="pop" />pop<br /><br />
    <input id="rock_check" type="checkbox" name="tag[]" value="rock" />rock<br /><br />
    <input type="checkbox" name="tag[]" value="indie" />indie<br /><br />
    <input type="checkbox" name="tag[]" value="electronic" />electronic<br />
    <input name="" type="submit">
</form>

然后，您可以在表单下方编写以下 jQuery 代码：

<script type="text/javascript">
    $("checkbox[name='tag']").on("click", function( //when any of the checkboxes is clicked the following code runs
        if($("#pop_check").is(":checked") || $("#rock_check").is(":checked")){ //if one of the two target check boxes is checked, the form action will be changed as desired
            $("#my_form").attr("action","www.mysite.com/?view=listen");
        }else if(!$("#pop_check").is(":checked") && !$("#rock_check").is(":checked")){ //since the user can also toggle off all checkboxes again, we need to check for that too and change the form action back to "" if required
            $("#my_form").attr("action","");
        }
    ));
</script>

如果您正在（即将）学习 jQuery，我强烈推荐它。这里有一些非常好的教程，您可能会觉得有帮助，它们教会了我几乎所有关于 jQuery 的知识：http://thenewboston.org/list.php?cat=32

编辑

还有另一种方法可以做到这一点。在提交表单后运行的 php 代码中，您可以简单地检查是否选中了两个复选框中的任何一个，并根据该复选框使用 php 的标头函数进行重定向：

<?php
    //After form submission with form action="" (i.e. at the top of your php file)
    if(in_array("pop", $_GET['tag']) || in_array("rock", $_GET['tag'])){
        header('Location:www.mysite.com/?view=listen&tag=pop&tag=rock');
        exit;
    }
?>

事实上，那么你应该使用 post 作为表单方法而不是 get，因为表单结果不需要可收藏。阅读更多关于 php 内置的 header() 和 in_array() 函数。