Пустое поле в модальном Предотвращение AJAX от выполнения при принятии

Question

У меня есть модальный, который открывается по щелчку кнопки. Тогда есть текстовое поле, которое является обязательным, если ничего не введено и не принимается, нажатие на всплывающее высказывание, пожалуйста, введите имя дилера. Проблема в том, что по моему он по-прежнему принимает закрытие модального и подчиняется базе данных. Я думаю, что из-за этой строки, когда я вызываю JSON после этого $('#addDealer').on('submit', function (e) { и перезаписывает предупреждение. Где он должен просто остановиться и ждать, когда что-то будет введено, если не будет отменено отмену, когда модаль будет просто закрываться. Iv пытался объединить на submit и .click, но я не получаю ничего.

Я не хочу, чтобы ajax запускался, если выбран accept, и ничего не вводится в $("#NewDealerName"), потому что нет необходимости ничего посылать в базу данных.

Любая помощь была бы принята с благодарностью.

http://jsfiddle.net/spe2mv5t/

HTML

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#NewDealer"><u>N</u>EW</button> 

    <!-- New Dealer Modal --> 
    <div class="modal fade" id="NewDealer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 

     <div class="modal-content"> 
      <form id="addDealer"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
      <h4 class="modal-title" id="NewDealerLabel">New Dealer</h4> 
      </div> 
      <div class="modal-body"> 

      <div class="row"> 
       <div class="col-xs-12"> 
        <label for="NewDealerName">Please enter the dealer name:</label> 
        <input type="text" class="form-control" name="NewDealerName" id="NewDealerName" maxlength="50"> 
       </div> 
      </div> 


      </div> 
      <div class="modal-footer group"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
      <button type="submit" class="btn btn-primary dealer_accept">Accept</button> 
      </div> 
       </form> 
     </div> 
     </div> 
    </div> 
    <!-- End New Dealer Modal --> 

JS

$(document).ready(function() { 
    // What happens when a user hits the "Accept" button on the dealer form 
    $(".dealer_accept").click(function(){ 
     var NewDealerName = $("#NewDealerName").val(); 
     if (!NewDealerName){ 
      alert("Please enter the dealer name."); 
     } else { 
     $('#NewDealer').modal('hide'); 
     } 
    }); 

    $('#addDealer').on('submit', function (e) { 
     e.preventDefault(); 
     //alert($(this).serialize()); 
     $.ajax({ 
      // the location of the CFC to run 
      url: "proxy/NewDealerSession.cfm", 
      // send a GET HTTP operation 
      type: "post", 
      // tell jQuery we're getting JSON back 
      dataType: "json", 
      // send the data to the CFC 
      data: $('#addDealer').serialize(), 
      // this gets the data returned on success 
      success: function (data) { 
       console.log(data); 
       window.location.reload(); 
      }, 
      // this runs if an error 
      error: function (xhr, textStatus, errorThrown) { 
       // show error 
       console.log(errorThrown); 
      } 
     }); 
    }); 
}); 

Answer 1

Вы должны return false в обработчике, если вы не хотите, чтобы форма представить.

Updated fiddle