2017-05-07 4 views
0

meine Kontaktseite, ein Pop-up soll zeigen und verschwinden, wenn ich eine Nachricht sende, aber nichts passiert. bitte helfenPop-Up funktioniert nicht nach dem Senden einer Nachricht

die Kontakt-Seite und Pop-up-modal

   <!-- The Contact Us Page --> 
       <div class="jumbotron jumbotron-sm"> 
       <div class="container"> 
        <div class="row"> 
        <div class="col-sm-12 col-lg-12 header"></div> 
        </div> 
       </div> 
       </div> 
       <div class="container card"> 
       <div class="row"> 
        <div class="col-sm-12 col-lg-12"> 
        <h1 class="h1">Contact us <span class="fa fa-envelope"></span> <!--<small class="col-xs-12" style="padding-left: 0">We will get back to You</small>--></h1> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-12 col-md-12"> 
        <div class="cardStyle"> 
         <form name="contact" id="form" data-toggle="validator"> 
         <div class="row"> 
          <div class="col-md-6"> 
          <div class="form-group"> 
           <label for="name"> 
           Name</label> 
           <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> 
          </div> 
          <div class="form-group"> 
           <label for="email"> 
           Email Address</label> 
           <div class="input-group"> 
           <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> 
           </span> 
           <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /> 
           </div> 
          </div> 
          <div class="form-group"> 
           <label for="subject"> 
           Subject</label> 
           <select id="subject" name="subject" class="form-control" required="required"> 
           <option value="none" selected="" disabled>Choose One:</option> 
           <option value="general">General Customer Service</option> 
           <option value="collaborate">Collaborate with Us</option> 
           <option value="bug">Found a Bug/Issue</option> 
           <option value="other">Any other Queries</option> 
           </select> 
          </div> 
          </div> 
          <div class="col-md-6"> 
          <div class="form-group"> 
           <label for="name"> 
           Message</label> 
           <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea> 
          </div> 
          </div> 
          <div class="col-md-12"> 
          <button type="submit" class="btn btn-success pull-right" id="btnContactUs">Send Message</button> 
          </div> 
         </div> 
         </form> 
        </div> 
        </div> 
       </div> 
       </div> 

dies ist die Pop-up-modal, die

       <!-- Form submitted Thank You Modal --> 
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
            <div class="modal-dialog" role="document"> 
            <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
             <h4 class="modal-title text-center" id="myModalLabel">Contact</h4> 
            </div> 
            <div class="modal-body"> 
             <h3 class="h3 text-center">Thank you for your feedback! We will get back to you.</h3> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-success" data-dismiss="modal">Close</button> 
            </div> 
            </div> 
            </div> 
            </div> 

die JavaScript

$(document).ready(function() { 
     $('#form').validator().on('submit', function(e) { 
     if (e.isDefaultPrevented()) { 
      // handle the invalid form... 
      $('#myModal').modal('hide'); 
     } else { 
      // everything looks good! 
      $('#myModal').modal('show'); 
     } 
     }) 

    }); 

Antwort

2

Datei erscheinen soll Seit Sie versuchen, das Modal nur dann zu zeigen, wenn preventDefault() NICHT aufgerufen wurde, d Es wird eine Standardaktion stattfinden, die das Formular absendet. Dies führt zu einem Seitenladevorgang, und da Sie kein action Attribut auf dem Formular angegeben haben, wird es auf derselben Seite übergeben. Mit anderen Worten, die Seite wird einfach neu geladen.

Wenn Sie keine Seite neu laden möchten, müssen Sie immer preventDefault() aufrufen und dann die Daten mit AJAX senden.

Verwandte Themen