Question

下午好，我有一个web项目，准备好了，用ajax和jquery验证的表单，还有一个PHP函数，在我的表单上发送所有数据，我必须休息一个模态窗口boostratp，点击激活提交，问题是jquery阻止将表单传递给php并且不发送只显示模态。我想我是从php激活jquery，但不知道如何做到这一点

这是我的表格：

＆＃13;

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

＆＃13;

    <!-- 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>

＆＃13;

Answer 1

您应该开始学习如何制作网站。如此多的代码用于简单的表单？！

我认为，您最好在发送表单后不再显示模式。

这里是否有理由返回false：

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

这可能会阻止执行其他必要的代码。

表单不提交php和html

1 个答案: