Question

I have this form that’s a simple topsearch bar like below. There’s no submit button. It get submitted when a user hits enter.

<form style="display:inline;" method="GET" action="/printers/" class="searchForm">
<input placeholder="Hit enter to search..." type="text" class="topsearchbar" value="">
</form>

Then comes the jQuery. This is where I take the value from the search box and add it to the current action and need to submit it. But I just cannot figure how to do this. Can you please help?

Here’s my jquery:

$(".searchForm").submit(function(event) {
event.preventDefault();

var action = ($(".searchForm").attr("action"));
var searchStr = ($(".topsearchbar").attr("value"));


if((action && searchStr) != '' &&  (action && searchStr).length >= 5)
{
alert('Ok to proceed')

var serverStr = action+'/'+searchStr;
alert(serverStr)
//Submit the form to serverStr. serverStr is the form's action

}
else
{
alert('To small to be any good')
}

}),

Answer 1

Here is one way to do it;

$(document).ready(function() {

    $('.searchForm').submit(function(event) {

        var $this = $(this),
            action = $this.attr('action'),
            query = $this.find('.topsearchbar').val(); // Use val() instead of attr('value').

        if (action.length >= 5 && query.length >= 5) {

          // Use URI encoding
          var newAction = (action + '/' + encodeURIComponent(query));
          console.log('OK', newAction); // DEBUG

          // Change action attribute
          $this.attr('action', newAction);

        } else {
          console.log('To small to be any good'); // DEBUG

          // Do not submit the form
          event.preventDefault();
        }
    });

});​

jsfiddle.