CODEWITHSUNDEEP
phphtmlformscheckbox
mcan
mcan

Reputation: 2082

Sending a Checkbox Form to Specific URL

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

If a user clicks pop and rock boxes i want to send the form to www.mysite.com/?view=listen&tag[]=pop&tag[]=rock How can i do it? User can select one, two or three tags. So element number of tag array is variable.

Upvotes: 1

Views: 2304

Answers (4)

Ja͢ck
Ja͢ck

Reputation: 173562

Maybe I'm not getting the exact problem here, but why not just make a few small changes to the form like this:

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

Upvotes: 1

Matheus
Matheus

Reputation: 291

Actually you don't want the form to call the action, so you must cancel the submit. It was missing the return false. Also the "location.href" was wrong, the right is "parent.window.location.href"

tried and worked now.

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

Upvotes: 1

Dennis Hackethal
Dennis Hackethal

Reputation: 14275

This is what the form action is for - here you will specify where the form goes.

Using jQuery you can edit the form action on specific events. Give your form an id such as my_form and your checkboxes descriptive ids:

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

Then, below the form you can write the following jQuery code:

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

If you are (about to be) learning jQuery, I can highly recommend it. Here are some very good tutorials you might find helpful, they taught me pretty much everything I know about jQuery: http://thenewboston.org/list.php?cat=32

EDIT

There is also another way to do it. In your php code that runs after the form is submitted, you can simply check whether any of the two checkboxes was selected and depending on that use php's header function to redirect or not:

<?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;
    }
?>

In fact, then you should use post as form method instead of get, because there is no need for the form result to be bookmarkable. Read more about php's built in header() and in_array() functions.

Upvotes: 0

feeela
feeela

Reputation: 29932

You can't by using plain HTML. You can only specify a single URL to the action attribute.

But you could use JavaScript (which will render your form useless without JS enabled). Just check the checked state of the check-boxes and exchange the action URL accordingly.

Upvotes: 2

Related Questions