Skip to content Skip to sidebar Skip to footer
Home / Html / Jquery

Custom URL From A Checkbox Form

Post a Comment
I am trying to create a custom URL from some checkboxes.
TAG1

Solution 1:

Try with this:
(explanations are within the code)

$(document).ready(function(){
    $("form").on("submit",function(e){
        // Disable the button's submit.
        e.preventDefault();

        // Start setting a custon query.
        var query="?q=";

        // Check each checked checkboxes.
        $("input[type='checkbox']:checked").each(function(index){
            // Adds | only on second and next...
            if(index>0){
                query+="|";
            }
            // Adds the value.
            query+=$(this).val();
        });
        //Redirect with the query in GET
        console.log( $(this).attr("action")+query );
        window.location=$(this).attr("action")+query;
    });
});

CodePen

EDIT

Add this to your <head>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Post a Comment for "Custom URL From A Checkbox Form"