Question

发布数据后，我无法在safari浏览器中看到成功消息，因为提交数据后页面正在刷新。其他浏览器显示他们没有刷新的成功消息。请找到以下代码并帮我找出问题？

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;
});
});
});

Answer 1

删除action属性并在表单中添加onsubmit="return false;"。

这应该会修复Opera尝试发送表单。

Answer 2

这应该可以解决问题。

$('#form-add-vehicleDetails').on('submit', function(e){
    return false;
});

这样做会在发送表单后触发提交事件。

取消默认活动。 e.prventDefault();
停止传播，防止事件冒泡。 e.stopPropagation()

正如karim79解释in his answer。

jquery click（）页面在safari中令人耳目一新？

2 个答案: