Laravel 4.2 Form SUbmit Friendly URL - php

Question

I have a form in Laravel 4.2
{{Form::open(array('url'=>'search', 'method'=>'get', 'class'=>'navbar-form navbar-left' ,'role'=>'search'))}}
<div class="form-group ">
<input list="browsers" name="topic" class="form-control " placeholder="Search">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</div>
<button class="gray-button"><span>Search</span></button>
{{Form::close()}}
When I Click on submit button, I get URL like
http://localhost/car/public/search?topic=dfg
But I want to have a URL like
http://localhost/car/public/search/dfg
Do I need to change some code in Form?
Or in Router.
Can anyone help me please?
Thanks in advance for helping.

Answer 1

You do need JavaScript if you don't want to do a server redirect as #lukasgeiter pointed in the comments. You also need to setup a route for that particular search URL. The route should look something like this using a route closure:
Route::get('search/{topic}', function ($topic)
{
// code goes here
});
For the client side you need to stop the form from submitting and go to a manually built URL when submitting the form. So you could have something like this:
{{Form::open(array('url'=>'search', 'method'=>'get', 'id' => 'searchForm', 'class'=>'navbar-form navbar-left' ,'role'=>'search'))}}
<div class="form-group ">
<input list="browsers" name="topic" class="form-control " placeholder="Search">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</div>
<button class="gray-button"><span>Search</span></button>
{{Form::close()}}
<script>
document.getElementById('searchForm').onsubmit = function (event)
{
// Prevent the form from submitting
event.preventDefault();
// Build the url using the form action and the topic value
var topic = document.querySelectorAll('input[name="topic"]')[0];
window.location.href = this.action + '/' + encodeURIComponent(topic.value);
};
</script>