Manipulate path from a form input sent to url

Question

I’m testing a search field that sends what the user types directly to the site I chose (in a new tab), searching the site itself, and it works perfectly. However, I wonder if there is any way I can manipulate this address that is sent to the url.

For example (searching for Youtube): If the user types "best serials" in the form, and presses Enter, the form completes the action with the name (q) and searched term and sends it to the url. Staying: https://www.youtube.com/results?q=best + serials

In this way I wanted it to send the url without the "name" and "?" only with "/" and the searched term, as if it were a normal link. Example: https://www.youtube.com/results/best+ serials

Does anyone know if there is any way to manipulate this, with php or javascript?

Follow the form code:

<form name="searchfield" method="get" action="http://www.youtube.com/results" target="_blank">
<input type="text" id="input" name="q" autocomplete="off" maxlength="100" size="36" placeholder="Pesquise no YouTube">
<input type="image" id="search" name="btnG" src="img/search.png">
</form>

Answer 1

You can manipulate the action of your form at the time it is submitted:

$('form').submit(function(e) {

    var $this = $(this),
        value = $this.find('input[name="q"]').val(),
        url   = $this.attr('action');

    var newTargetUrl = (url+value).replace(" ", "+");

    $this.attr("action", newTargetUrl);

    // Para simular, comentar ou remover para ver a funcionar.
    e.preventDefault();
    alert(newTargetUrl);
});

See on the Jsfiddle.

But with Youtube, you have a problem, it doesn’t present results with friendly Urls because it doesn’t have support for them.