Making a PUT without refreshing the page - php

Question

I have a blade form in Laravel
{!! Form::open(array('url' => '/'.$cpe_mac.'/device/'.$device_mac.'/update', 'class' => 'form-horizontal', 'role' =>'form','method' => 'PUT')) !!}
<span class="pull-left">
<div class="col-sm-6">
<p>Downlink </p>
<select type="text" class="form-control" name="max_down" >
#foreach ($rate_limit as $key => $value)
<option value="{{$value or ''}}">{{$value or ''}} Kbps</option>
#endforeach
</select>
</div>
<div class="col-sm-6">
<p>Uplink</p>
<select type="text" class="form-control" name="max_up" >
#foreach ($rate_limit as $key => $value)
<option value="{{$value or ''}}">{{$value or ''}} Kbps</option>
#endforeach
</select>
</div>
</span><br>
{!! Form::hidden('cpe_mac', $cpe_mac)!!}
{!! Form::hidden('device_mac', $device_mac)!!}
<span class="pull-right">
<button class="saveRateLimitBTN btn btn-xs btn-info pull-right">Save</button>
</span>
{!! Form::close();!!}
I want to be make a Ajax HTTP PUT without refresh my page.
How should my form look like ?
Right now, it keep redirecting me to url/update, and then redirecting it back.
How do I send all those data to my controller in the background ?
Any hints / suggestion on this will be a huge helps !

Answer 1

Usually I place my forms in a modal popup with a data-dismiss button that will simply close after you hit submit and run everything in the background.
For your case, after hitting submit without refreshing the page after hitting the submit button would seem a bit odd wouldn't it?
However here's a bit of jQuery to get you going either way:
$("#mySubmitButton").on('click', function(event){
var form = '#myForm';
$.post($(form).attr('action'),$(form).serialize());
});
Add an ID to your form:
{!! Form::open(array('url' => '/'.$cpe_mac.'/device/'.$device_mac.'/update', 'class' => 'form-horizontal', 'role' =>'form','method' => 'PUT', 'id' => 'myForm')) !!}
Add an ID to your button:
<button id="mySubmitButton" class="saveRateLimitBTN btn btn-xs btn-info pull-right">Save</button>
Add a TYPE to your button (to prevent it from submitting/refreshing);
<button type="button" id="mySubmitButton" class="saveRateLimitBTN btn btn-xs btn-info pull-right">Save</button>
If your routes are properly setup to lead to your controller then all your form input variables are now accessible via $request or Input:
public function processForm(Request $request)
{
$variable1 = $request->input('myforminputname1');
$variable2 = $request->input('myforminputname2');
// Or get it through Input
$variable1 = \Input::get('myforminputname1');
$variable2 = \Input::get('myforminputname2');
}