jquery click() page is refreshing in safari?

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">&times;</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;
});
});
});

Maybe it's a submit button in a form? Can you show HTML? Is that button inside a form element? — Allan Chua, Aug 07 '15 at 11:57
Is this happening only on Safari? I bet it also happens on other browser. — Allan Chua, Aug 07 '15 at 11:58
if #addvehicle is submit then there is preventDefault. Html can explain more about issue. please include html — Farhan, Aug 07 '15 at 12:00
@AllanChua I have already mentioned it happens only in safari. — Sarath TS, Aug 07 '15 at 12:01
btw... .click is deprecated you shoud use the newer jquery library and change .click with .on('click', function(){}); — Indra, Aug 07 '15 at 12:25

score 0 · Answer 1 · answered Aug 07 '15 at 12:16

0

Remove the action attribute and add onsubmit="return false;" to your form.

This should fix Opera trying to send the form.

answered Aug 07 '15 at 12:16

JiFus

959
7
19

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

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.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 07 '15 at 12:20

Crisoforo Gaspar

3,740
2
21
27

Basically because you are cancel the default behavior of the submit event. Here http://stackoverflow.com/a/1357151 you have a better explanation about this. – Crisoforo Gaspar Aug 07 '15 at 14:02
I review this post as a part of the low quality posts queue. Please edit the explanation into the answer. – Ram Aug 07 '15 at 16:09

jquery click() page is refreshing in safari?

2 Answers2