2016-09-16 11 views
0

午後、私はウェブプロジェクトを準備しました。フォームはajaxとjqueryで検証され、フォームにすべてのデータを送信するPHP関数があり、モーダル副作用をクリックして起動するウィンドウboostratpは、問題は、jqueryがPHPのフォームの通過をブロックしているだけで、モーダルを表示していないことです。私はフォームはphpとhtmlを提出していません

にそれにこの私のフォームを行うに正確にどのように私はPHPからjqueryのを有効推測ではなく:

// What to do on submit - example of success message 
 

 
    // ------------------------------------------------- 
 

 
    submitHandler: function(form) { 
 

 
     $('#successForm').modal('show'); 
 

 
     return false; 
 

 
    } 
 

 
    }); 
 

 

 
// Reset the contact form when success message shown as bootstrap modal is dismissed 
 

 
// --------------------------------------------------------------------------------- 
 

 
$('#successForm').on('hidden.bs.modal', function() { 
 

 
    $('#contactForm').trigger("reset"); 
 

 
    $('#contactForm .form-group').find('.glyphicon').removeClass('glyphicon-ok'); 
 

 
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="js/js-theme/jquery-1.11.3.js"></script> 
 
    
 
    <!-- Include all plugins (below), or include individual files as needed --> 
 
    <script src="js/js-bootstrap/affix.js"></script> 
 
    <script src="js/js-bootstrap/alert.js"></script> 
 
    <script src="js/js-bootstrap/button.js"></script> 
 
    <script src="js/js-bootstrap/carousel.js"></script> 
 
    <script src="js/js-bootstrap/collapse.js"></script> 
 
    <script src="js/js-bootstrap/dropdown.js"></script> 
 
    <script src="js/js-bootstrap/modal.js"></script> 
 

 

 
<form id="contactForm" name="contactForm" action="enviar.php" method="post" enctype="multipart/form-data" target="_top"> 
 
        <div class="col-lg-6"> 
 
        <div class="form-group has-feedback wow flipInX" data-wow-duration="600ms"> 
 
         <label for="nombre">Nombre*</label> 
 
         <input id="nombre" class="form-control input-lg" type="text" name="nombre" value="" placeholder="" aria-label="nombre" /> 
 
         <span id="nombre1" class="glyphicon form-control-feedback"></span> 
 
        </div> 
 
        <!-- end .form-group --> 
 
    
 
        <div class="form-group wow flipInX" data-wow-duration="900ms"> 
 
         <label for="celular">Celular</label> 
 
         <input id="celular" class="form-control input-lg" type="text" name="celular" value="" placeholder="" aria-label="celular" /> 
 
        </div> 
 
        <!-- end .form-group --> 
 
    
 
        <div class="form-group has-feedback wow flipInX" data-wow-duration="800ms"> 
 
         <label for="email">Email*</label> 
 
         <input id="email" class="form-control input-lg" type="email" name="email" value="" placeholder="" aria-label="email" /> 
 
         <span id="email1" class="glyphicon form-control-feedback"></span> 
 
        </div> 
 
        <!-- end .form-group --> 
 
        </div> 
 
    
 
        <div class="col-lg-6"> 
 
        <div class="form-group has-feedback wow flipInX" data-wow-duration="1000ms"> 
 
         <label for="mensaje">Mensaje*</label> 
 
         <textarea id="mensaje" class="form-control" name="mensaje" rows="10" ></textarea> 
 
         <span id="mensaje1" class="glyphicon form-control-feedback"></span> 
 
        </div> 
 
        <!-- end .form-group --> 
 
        </div> 
 
    
 
        <div class="clearfix"></div> 
 
    
 
        <div class="text-center"> 
 
        <div class="form-group wow zoomInDown" data-wow-duration="800ms"> 
 
         <button id="submitContact" type="submit" class="btn btn-default btn-lg">Enviar</button> 
 
         <button class="btn btn-danger btn-lg" type="reset">Borrar</button> 
 
        </div> 
 
        <!-- end .form-group --> 
 
        </div> 
 
        <!-- end .text-center --> 
 
       </form> 
 

 

 

 

 

 
    <!-- Modal success on submit --> 
 
    <div class="theme-submit-success-modal"> 
 
     <div class="modal fade" id="successForm" tabindex="-1" role="dialog" aria-labelledby="successFormModalLabel"> 
 
     <div class="modal-dialog" role="document"> 
 
      <div class="modal-content"> 
 
      <div class="modal-body"> 
 
       <div class="text-center"> 
 
       <span class="fa fa-comments-o"></span> 
 
       </div> 
 
       <h4 class="text-center" name="modal_contact" id="successFormModalLabel">Enviado Con Éxito</h4> 
 
       <p class="text-center">Gracias por contactarnos, en breve contestaremos a su mensaje. </p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <div class="text-center"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">OK</button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

+3

もっと短い例を投稿するとよいでしょう。プラグインのように、問題に重要ではないものは切り取ってください。彼らはあなたの例をテストすることをより困難にします。 – David

+0

コンソールのエラーを確認しましたか? JSかPHPのどちらかが、問題がどこにあるかのヒントを投げかけるべきです。 –

答えて

0

あなたがウェブサイトを作る方法を学び始めなければなりません。シンプルなフォームのための多くのコード?

フォームが送信された後にモーダルを表示したほうがよかったと思います。

submitHandler: function(form) { 
    $('#successForm').modal('show'); 
    return false; 
} 

その他の必要なコードのこの多分防止実行:

偽ここに戻るための理由があります。

関連する問題