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();
});

did you try form post method? Refer http://www.w3schools.com/tags/att_form_method.asp for more info about method attribute of the form — Kira, Jun 20 '15 at 12:27
Yes I tried. With post method the url is okay, but the page is blank. And to load the page I have to click enter into the url address in the browser box (refresh doesn't work too) — beBoss, Jun 20 '15 at 12:30
Are you opening a new link on button click ? If so use an anchor tag instead of form — Kira, Jun 20 '15 at 12:34
@Anand 'where you should select the category and to click search buttons and then you're navigated to the category', so he did needs to send something I believe? — fuyushimoya, Jun 20 '15 at 12:34
Yes new link, not part of the page. Their search is not important, I can get to every category with link http://example.com/torrents/type:pc-iso/ http://example.com/torrents/type:docs/ and blabla so I don't need thir form. Only buttons with these links — beBoss, Jun 20 '15 at 12:36
If you have access to the .htaccess file on your host you could edit that... Check this answer if you would be interested in using the .htaccess http://stackoverflow.com/questions/16388959/url-rewriting-with-php — NewToJS, Jun 20 '15 at 12:44
I have created a simple fiddle to open a link using form post method http://jsfiddle.net/xo1e2h7p/2/ — Kira, Jun 20 '15 at 12:44
@fuyushimoya, you can also send data through a anchor tag by dynamically creating the link in javascript — Kira, Jun 20 '15 at 12:49
Well I don't have access to any file of the site, it's not my site. Just creating userscript for this site. It's like to create javascript for stackoverflow. The idea is to create buttons with every category and when click them to navigate me to category page, instead of select item from down list and them to click search button. — beBoss, Jun 20 '15 at 12:59
@Anand Yes, I can, and the link would be very long if I want to attach lots of data on it, right? However, it seems that in this quesition, anchor tag is enough. — fuyushimoya, Jun 20 '15 at 13:04

score 0 · Answer 1 · answered Jun 20 '15 at 13:39

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.

William · Answer 2 · 2015-06-20T14:46:33.667

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

Send form with jquery without question mark in url

2 Answers2