2017-05-25 1 views
2

Ich habe Formular, wo Benutzer seinen Namen eingeben (erforderlich), dob (nicht erforderlich) und bevor Sie das Formular absenden, gibt es eine Bestätigung, ob er/sie sicher ist, das Formular ohne senden dob. Ich benutze ein Modal von dort wird es oben Form vorlegen. Ich habe versucht, meinen Code unten auszuführen, aber ich kann das Problem nicht sehen, warum nicht funktioniert. Wenn es keinen Wert in dob gibt, dann sollte das Modal fragen und sagt: "Es gibt kein dob, ist es in Ordnung fortzufahren?" Wenn der Benutzer auf die Schaltfläche "Senden" klickt, sollte er das obige Formular senden, das nicht modal ist. Ich hoffe, ihr helft mir. Danke.JQuery Modal fragen vor dem Senden

HTML

<form id="createexperience" class="intro-message" method="post" action="./createexperience.php" enctype="multipart/form-data"> 
    <div class="form-group label-floating is-empty"> 
     <input type="text" name="name" required data-msg-required="Please enter your name"> 
    </div> 
    <div class="form-group label-floating is-empty"> 
     <input type="text" id="namefield" name="dob"> 
    </div> 
    <div class="form-group margin18 padbtm30"> 
    <input type="submit" class="btn btn-primary" value="Submit" /> 
    </div> 
</form> 

<div id="portfoliomsgmodal" class="modal fade" tabindex="-1"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h3 class="modal-title">TIP</h3> </div> 
     <div class="modal-body"> 
       <label>There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.</label> 
     </div> 
     <div class="modal-footer"> 
      <input type="submit" class="btn btn-warning" data-dismiss="modal" value="Now"> 
      <input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Later"> 
     </div> 
    </div> 
</div> 
</div> 

JQuery

$(document).bind("click", function (e) { 
    $("#createexperience").validate({ 
     rules: { 
      "language[]": { 
       required: !0 
      } 
     } 
     , messages: {} 
     , submitHandler: function() { 
      return !1 
     } 
     , ignore: ".ignore" 
     , errorElement: "label" 
     , errorClass: "has-error" 
     , submitHandler: function (e) { 
      if ($.trim($('#namefield').val()) == '') { 
       if (jQuery('#submitlater').data('clicked')) { 
        $('#createexperience').submit(); 
        e.submit(); 
       } 
       else { 
        $('#portfoliomsgmodal').modal('show'); 
        return false; 
       } 
      } 
      else { 
       e.submit(); 
      } 
     } 
     , highlight: function (e) { 
      $(e).closest(".form-group").removeClass("success").addClass("has-error") 
     } 
    }) 
}) 
+0

können Sie bitte jsfiddle –

+0

was erwarten Sie von diesem Formular? –

+0

@bRIMOs Ich möchte das Formular (ID = "createexperience") mit Modal-Taste – acmsohail

Antwort

2

Ihre submitHandler Funktion ist falsch. Versuchen Sie diesen Code, hoffe es funktioniert.

$(document).bind("click", function (e) { 
    $("#createexperience").validate({ 
     rules: { 
      "language[]": { 
       required: !0 
      } 
     } 
     , messages: {} 
     , submitHandler: function() { 
      return !1 
     } 
     , ignore: ".ignore" 
     , errorElement: "label" 
     , errorClass: "has-error" 
     , submitHandler: function (e) { 
      if ($.trim($('#namefield').val()) == '') { 
       $('#portfoliomsgmodal').modal('show'); 
       $('#submitlater').click(function() { 
        e.submit(); 
       }); 
      } else { 
      e.submit(); 
      } 
     } 
     , highlight: function (e) { 
      $(e).closest(".form-group").removeClass("success").addClass("has-error") 
     } 
    }) 
}); 
+0

Vielen Dank es funktioniert perfekt :) – acmsohail

+0

Willkommen jederzeit :) – user7152572

Verwandte Themen