I'm trying to submit a form using jquery after modifying it's action attribute. The action attribute updates fine, but I was expecting the browser location to be the same as the action. But it's not that way. Do you see why?
Here's the form:
<form method="GET" class="modForm" action=""> <input type="text" placeholder="Search" class="modSearchValue"> <input type="radio" name="text" value="text" class="text" title="Search"> </form> Here's the jquery:
$('.modForm').submit(function(event) { var $this = $(this), var query = $this.find('.modSearchValue').val(); // Use val() instead of attr('value'). var locale = window.location; if($('.text').is(':checked')){query = '&text='+query;}else{query = '&handle='+query;} route = locale+query; console.log(route); if (query.length >= 1) { // Use URI encoding var newAction = (route); console.log(newAction); // DEBUG // Change action attribute $this.attr('action', newAction); //event.preventDefault(); } else { console.log('Invalid search terms'); // DEBUG // Do not submit the form event.preventDefault(); } }); Here, if the current location is http://localhost/search and the search term is 14, the action will be changed to http://localhost/search/?handle=14 and then submit. But for some reason, it wont.
var $this = $(this),should bevar $this = $(this);