jquery click() page is refreshing in safari? - php

Question

After posting data I can't see the success message in safari browser because page is refreshing after submitting the data. Other browsers shows the success message they are not refreshing. Please find the below code and help me to find out the issue?
HTML
<form action="" method="post" id="form-add-vehicleDetails">
<ol style="visibility:hidden;"></ol>
<div id="successvehicleadded"></div>
<div class="addvehicledetailsform">
<div id="validatevehicledetails"></div>
<div class="form-group form-group-default required">
<label for="Producer">Producer</label>
<input type="text" name="producer" id="producer" class="form-control" maxlength="100" autocomplete = "off" >
</div>
<div class="form-group form-group-default required">
<label for="Model">Model</label>
<input type="text" name="model" id="model" class="form-control" maxlength="100" autocomplete = "off" >
</div>
<div class="form-group form-group-default required">
<label for="Motor">Motor</label>
<input type="text" name="motor" id="motor" class="form-control" maxlength="100" autocomplete = "off" >
</div>
<div class="form-group form-group-default required">
<label for="LicensePlate">License Plate</label>
<input type="text" name="licenseplate" id="licenseplate" class="form-control" maxlength="20" autocomplete = "off" >
</div>
<div class="form-group form-group-default required">
<label for="Freetext">Freetext</label>
<textarea class="form-control" rows="9" id="freetext" name="freetext"></textarea>
</div>
<div class="modal-footer">
<input type="hidden" name="_token" value="{!! csrf_token() !!}">
<button class="btn btn-primary btn-cons m-b-10" type="button" id="addvehicle">Add Vehicle Details</button>
</input>
</div>
</div>
</form>
js
$(document).ready(function(){
$('[data-toggle="modal"]').click(function() {
var id = $(this).attr('data-id');
$("#addvehicle").click(function(e){
e.preventDefault();
var producer = $('#producer').val();
var model = $('#model').val();
var motor = $('#motor').val();
var licenseplate = $('#licenseplate').val();
var freetext = $('textarea#freetext').val();
var token = $('input[name=_token]').val();
var addvehicle = $('#addvehicle').val();
var dataString = 'producer='+producer+'&model='+model+'&motor='+motor+'&licenseplate='+licenseplate+'&freetext='+freetext+'&token='+token+'&addvehicle='+addvehicle+'&id='+id;
$.ajax({
type: "post",
url: "{!! URL::to('socialaddvehicle') !!}",
data: dataString,
success: function(data) {
//alert(data);
//$('.addvehicledetailsform').fadeOut('slow'); //hiding form
var successContent = '<div class="alert alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span></button><strong>Well done!</strong> Vehicle added successfully.</div>';
$('#successvehicleadded').html(successContent);
},
error: function(data) {
if( data.status === 422 ) {
//process validation errors here.
var errors = data.responseJSON;
errorsHtml = '<div class="alert alert-danger"><ul>';
$.each( errors , function( key, value ) {
errorsHtml += '<li>' + value[0] + '</li>';
});
errorsHtml += '</ul></div>';
$( '#validatevehicledetails' ).html( errorsHtml );
}
}
});
return false;
});
});
});

Answer 1

Remove the action attribute and add onsubmit="return false;" to your form.
This should fix Opera trying to send the form.

Answer 2

This should do the trick.
$('#form-add-vehicleDetails').on('submit', function(e){
return false;
});
This do two things in to the submit event, fired after send the form.
Cancel the default event. e.prventDefault();
And stops the propagation prevent the event from bubbling up. e.stopPropagation()
As karim79 explains in his answer.