Question

In the form below, I change the action attribute and submit the form. That works fine. What goes on is: if the current location is http://localhost/search/?mod=all and the search term is 14, the action will be changed to http://localhost/search/?mod=all&handle=14 and so will the url in the browser.

But the next time I try to search, since the url now is http://localhost/search/?mod=all&handle=14, I get http://localhost/search/?mod=all&handle=14&handle=15. It’ll keep going on and on with each search term.

Any idea how I can retain the orginal url http://localhost/search/?mod=all through this all.

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

Answer 1

There are few ways to do it. I would rather not mess with window.location and do something simpler:

<form method="GET" class="modForm" action="">
    <input type="hidden" name="mod" value="all"> <!-- mod is a hidden variable -->
    <input type="text" id="modSearchValue">      <!-- name not defined yet -->
    <input type="checkbox" id="textOrHandle">    <!-- name not required -->
</form>

$(".modForm").submit(function() {
    $("#modSearchValue").attr("name", $("#textOrHandle").is(":checked") ? "text" : "handle");
    // let the form submit!
});