更多的boostrap模态表单,提交不正常

时间:2018-02-13 17:37:23

标签: javascript php jquery bootstrap-4

我有两个问题!

1st:在我的页面上有更多引导表单(loginFrom,signUpForm,...),如果我点击loginForm提交的提交按钮,但signUpForm NOT和submit( )根本没有调用signUpForm的函数。 结构是一样的,所以我不知道为什么?可能是什么问题?

大部分内容都在PHP文件中,因为我将它们包含在一起。 (多页网站)

modal.php

  <form id="loginModal" method="post" name="loginModal" class="modal fade modal-full-height" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
      <div class="modal-dialog cascading-modal" role="document">
          <!--Content-->
          <div id="loginModalDiv" class="modal-content">
              <!--Header-->
              <div class="modal-header myModalHeader">
                  <h4 class="title"><i class="fa fa-user-lg"></i> Login:</h4>
              </div>
              <!--Body-->
              <div class="modal-body">
                  <div class="md-form form-sm">
                      <i class="fa fa-envelope prefix"></i>
                      <input type="text" id="logF_email" name="email" class="form-control">
                      <label for="logF_email">E-mail address:</label>
                  </div>

                  <div class="md-form form-sm">
                      <i class="fa fa-lock prefix"></i>
                      <input type="password" id="logF_passw" name="password" class="form-control">
                      <label for="logF_passw ">Password:</label>
                  </div>

                  <div class="text-center mt-2">
                      <div id="errorLogin"></div>
                      <button id="btnLogin" type="submit" name="submitLogin" class="btn btn-default myModalBtn">Login <i class="fa fa-sign-in ml-1"></i></button>
                  </div>
              </div>
              <!--Footer-->
              <div id="footerLogin" class="modal-footer">
                  <div class="options text-center text-md-center mt-1">
                      <p>You don't have an account? <a class="loginToSignUp myGreenClass" data-toggle="modal" href="#"> Sign up!</a></p>
                      <p>Forget <a class="forgetPassword myGreenClass" data-toggle="modal" href="#"> password?</a></p>
                  </div>
                  <button type="button" class="btn btn-outline-default waves-effect ml-auto myModalBtn" data-dismiss="modal">Close</button>
              </div>
          </div>
          <!--/.Content-->
      </div>
  </form>
<form id="signUpModal" method="post" name="signUpModal" class="modal fade modal-full-height" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div id="signUpModalDiv" class="modal-content">
            <!--Header-->
            <div class="modal-header myModalHeader">
                <h4 class="title"><i class="fa fa-user-plus"></i> Sign up:</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input type="text" id="regF_email" name="email" class="form-control">
                    <label for="regF_email">E-mail address:</label>
                </div>
                <div class="row mx-auto" style="width: 50%;">
                    <span id="passLED1" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">a-z</span>
                    <span id="passLED2" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">A-Z</span>
                    <span id="passLED3" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">0-9</span>
                    <span id="passLED4" value='red' class="passCheck badge badge-danger col-sm-2 m-auto mx-1">[0]</span>
                </div>

                <div class="md-form form-sm">
                    <i class="fa fa-lock prefix"></i>
                    <input type="password" id="regF_passw" name="passwordReg" class="form-control">
                    <label for="regF_passw">Password:</label>
                </div>

                <div class="md-form form-sm">
                    <i class="fa fa-lock prefix"></i>
                    <input type="password" id="regF_passwConf" name="passwordRegConfirmation" class="form-control">
                    <label for="regF_passwConf">Confirmation password:</label>
                </div>

                <div class="text-center mt-2">
                    <div id="errorSignUp"></div>
                    <button id="btnSignUp" type="submit" name="submitSignUp" class="btn btn-default myModalBtn">Sign up!<i class="fa fa-sign-in ml-1"></i></button>
                </div>
            </div>
            <!--Footer-->
            <div id="footerSignUp" class="modal-footer">
                <div class="options text-center text-md-center mt-1">
                    <p>Do you have an account? <a class="signUpToLogin myGreenClass"href="#"><br>Log in!!</a></p>
                </div>
                <button type="button" class="btn btn-outline-default waves-effect ml-auto myModalBtn" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!--/.Content-->
    </div>
</form>

validation.js

//Login form
$("#loginModal").submit(function(){  //  OK
    console.log('fut');
    var errorMsg = "";
    errorMsg += checkEmailField('#logF_email');
    errorMsg += checkPasswordField('#logF_passw');
    if (errorMsg == "") { $('#errorLogin').html('<div class="alert alert-success" role="alert">Please wait...</div>');
                          $('#loginModalDiv *').prop('disabled',true);    $('#footerLogin').hide();
                          return true;}
    else {$('#errorLogin').html('<div class="alert alert-danger" role="alert"><big>An error occurred while logging in!</big>' + errorMsg + '</div>'); return false;}
});

//Sign-up Form
// check the fields when the button is clicked!
// $(document).on('click', '#btnSignUp', function(event){
$("#signUpModal").submit(function(){
    console.log('fut');
    var errorMsg = "";
    errorMsg += checkEmailField('#regF_email');
    errorMsg += checkPasswordField('#regF_passw', 'regF_passwConf');
    if (errorMsg == "") { $('#errorSignUp').html('<div class="alert alert-success" role="alert">Please wait...</div>');
                          $('#signUpModalDiv *').prop('disabled',true);   $('#footerSignUp').hide();
                          return true;}
    else {$('#errorSignUp').html('<div class="alert alert-danger" role="alert"><big>An error occurred while sending request!</big>' + errorMsg + '</div>'); return false;}
});

第二名:点击提交按钮(LoginForm)后,页面会刷新,但我无法从&#39; $ _ post&#39;中提取任何数据。变量

 if ($_SERVER['REQUEST_METHOD'] == 'POST'){
    $mail     = $_POST['email'];
    $password = $_POST['password'];
    ...

if ( $_POST ){

if (!empty($_POST)){

我没有任何解决方案尝试了很多变化。请帮助!

0 个答案:

没有答案