Send form with jquery without question mark in url

Question

I'm doing a userscript for a site and want to add some button on it, that opens categories from it. They have search box with drop down menu where you should select the category and to click search buttons and then you're navigated to the category.

So I want to add 3, 4 buttons with this categories and every button contains the link to the every category. But when you click any button in url is add "?", which is ok in first page, but when you have pagination and click second page this ? break the url and don't navigate to second page.

example:

http://example.com/torrents/type:pc-iso/

instead of

 http://example.com/torrents/type:pc-iso/?

So is there a better way when click a button to navigate me into the right url without question mark?

Here is my code:

$(this).append(
        "<br />" + "<br />" + "<br />" +
        "<form id=\"beBossButtons\">" +
        "<table><tr>" +
        "<td><button id=\"all-btn\"  class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> All</button></td>" +
        "<td><button id=\"pc-iso-btn\"  class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> Software PC-ISO</button></td>" +
        "<td><button id=\"documentaries-btn\" class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> Documentaries</button></td>" +
        "</tr></form>");
});

$('#all-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    form.action = "/torrents/";
    form.submit();
});

$('#pc-iso-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    form.action = "/torrents/type:pc-iso/";
    form.submit();
});

$('#documentaries-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    form.action = "/torrents/type:documentaries/";
    form.submit();
});

Answer 1

Well, I'm ready and make this post to show how I did it.

First added method post to form

$('.col-md-6 .form-group.mb0').each(function () {
    $(this).append(
        "<br />" + "<br />" + "<br />" +
        "<form id=\"beBossButtons\" method=\"post\">" +
        "<table><tr>" +
        "<td><button id=\"all-btn\"  class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> All</button></td>" +
        "<td><button id=\"pc-iso-btn\"  class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> Software PC-ISO</button></td>" +
        "<td><button id=\"documentaries-btn\" class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> Documentaries</button></td>" +
        "</tr></form>");
});

I saw how they send search form and their attributes and copied them (type: category). Added this attribute to my form. Changed action with "search" instead of url, so in this way I'm using their search form.

Old jQuery:

$('#pc-iso-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    form.action = "/torrents/type:pc-iso/";
    form.submit();
});

New and working one:

$('#pc-iso-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    var input = $("<input>")
        .attr("type", "hidden")
        .attr("name", "type").val("pc-iso");
    $('#beBossButtons').append($(input));
    form.action = "search";
    form.submit();
});

And That's all. Thanks for you help.

Answer 2

You would have better luck with a list of links tied to an ajax request

<a href="http://example.com/torrents/type:pc-iso/" class="button">Category 1</a>
<a href="http://example.com/torrents/type:mac-os/" class="button">Category 2</a>

<script>
$("a.button").click(function(){
    $.ajax({
        url: $(this).attr('href'),
        type: "GET",
        success: function(data){

            // Load your categories data on success

        }
    });
});
</script>

Clicking on either category loads up the required content. Using a form to post your data to which seems like a GET request will be overkill