Submit search query to URL

[jack21]

Hi,

What’s the best way to have the following form data be sent to a domain in the following method: domain.com/search/q/query instead of domain.com/search.php?q=query

<form class="navbar-form navbar-right" role="search" action="/search.php" method="get">
<div class="input-group">
    <input type="text" name="q" class="form-control">

  <span class="input-group-btn"><button class="btn btn-default search-button" type="submit">Search</button></span>
</div>
</form>

Thanks.

[__]

You’d have to use javascript to rewrite the form’s action before submit.

[Nate Wiley]

This is how I would go about it.

Assuming this was your only form on page

$(function(){

 var theForm = $(".navbar-form"),
     textInput = $(".form-control");   

  theForm.on("submit", function(e){
    e.preventDefault(); // stop form from submitting
    window.location = "/search/q/" + textInput.val() + "/";
  });

});

You should probably unique ID’s or classes to the input elements and the form itself. Instead of using the bootstrap classes as your selectors.

Edit: This solution is assuming that you would be using jQuery

[stevet]

Why not just change:

<form class="navbar-form navbar-right" role="search" action="/search.php" method="get">

to

<form class="navbar-form navbar-right" role="search" action="/search/q/query" method="get">

[jack21]

I tried something similar to this before however got the same thing which is: domain/search/q/query?q=laptop

[__]

@stevet he wants the search term that the user inputs to appear in the URL, not the literal text “search/q/query”.

@Nate’s suggestion is the way to go. It would not be difficult to do via plain JS either, if you weren’t using jQuery.

[jack21]

Hi,

I have solved my own question.

I used the following code to do what I wanted.

<?php

$text   = $_GET['q'];

header('Location: ../search/q/'.$text.''); 
exit();


?>

[Nate Wiley]

Yes, that is a way to go about it. However, I would consider doing some checks and you definitely want to URL encode the value.. To build on your code just a tad.

<?php
//make sure the value isn't empty
  if(isset($_GET['q']) && !empty($_GET['q'])){
     $text   = urlencode($_GET['q']); // encode the value 
     header('Location: ../search/q/'.$text.'');
     exit(); 
 } else {
    // do something else
      echo "Your search was empty.. please enter a keyword.. ";
}

?>

You may want to do it all on the same page, and just load different html if($_GET…) is set etc.. This way you won’t have to redirect them to a different page..

[Author]

Posts