エラーが発生した場合にフォームが送信され、エラーがなければリフレッシュするときにリフレッシュを停止する

Question

2つのフォームがログインして同じindex.phpにサインアップし、ユーザーのニーズに応じてトグルします。 .phpのサインアップフォームは非表示になっており、ここのサインアップリンクをクリックしたときにのみ表示されます。

私の問題は、エラー（検証、データベースエラー）があった場合、送信ボタンが明示的にクリックされたときにページがリフレッシュされ、index.phpを開く/リフレッシュするときに表示されるログインフォームに戻ります。もう一度私はエラーを解決するためにここにサインアップリンクをクリックしなければならない。

エラーが表示されたときに登録フォームにとどまりたいので、送信時にクリックしたときにページを更新する必要はありませんが、エラーが表示されてそこから解決されたければなりません。

$.ajax({ 
 
      type: "POST", 
 
      url: "phpindex.php", 
 
      data: $("#signUpForm").serialize(), 
 
      success:function(data) 
 
      { 
 
      if ("#error".val(data)) 
 
      { 
 
       e.preventDefault(); 
 
      } 
 

 
      } 
 
      
 
     }); 
 

 
     });

My validation and database code is written in phpindex.php

***************signup form************************ 
 

 
<form method="post" id="signUpForm"> 
 
    <div class="container" id="signupContainer"> 
 
    <h1>Sign Up</h1> 
 

 
    <div id="error"><?php if ($error!="") { 
 
    echo '<div class="alert alert-danger" role="alert">'.$error.'</div>'; 
 
    
 
} ?></div> 
 
    
 
    <div class="form-group row"> 
 
    <label class="col-sm-2 form-control-label">Name</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="name" placeholder="Your name"> 
 
     <span class="fa fa-user"></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group row"> 
 
    <label class="col-sm-2 form-control-label">Address1</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" id="address1" class="form-control" name="address1" placeholder="Home address"> 
 
     <span class="fa fa-map-marker"></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group row"> 
 
    <label class="col-sm-2 form-control-label">Address2</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode...."> 
 
     <span class="fa fa-map-marker"></span> 
 
    </div> 
 
    </div> 
 
    
 
<div class="form-group row"> 
 
    <label class="col-sm-2 form-control-label">Email</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" class="form-control" name="email" placeholder="Email Address"> 
 
     <span class="fa fa-envelope"></span> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group row"> 
 
    <label class="col-sm-2 form-control-label">Password</label> 
 
    <div class="col-sm-10"> 
 
     <input type="password" class="form-control" name="password" placeholder="Password"> 
 
     <span class="fa fa-key"></span> 
 
    </div> 
 
    </div> 
 

 
    
 
    <div class="form-group row"> 
 
    <div class="col-sm-offset-5 col-sm-10"> 
 
     <input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit"> 
 
    </div> 
 
    </div> 
 

 
<p><a class="toggleForms">Back to Log in</a></p> 
 

 

 

 
    </div> 
 
</form> 
 

 
***************login form***************** 
 
<form method="post" id="logInForm"> 
 
    <div class="container" id="logInContainer"> 
 
    <h1>Log In</h1> 
 
    <div id="success"><?php if ($success!="") { 
 
    echo '<div class="alert alert-success" role="alert">'.$success.'</div>'; 
 
    
 
} ?></div> 
 
    <div class="form-group row"> 
 
    <label class="col-sm-3 form-control-label">Emai</label> 
 
    <div class="col-sm-8"> 
 
     <input type="email" class="form-control" placeholder="Email" name="email"> 
 
     <span class="fa fa-envelope"></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
    <label class="col-sm-3 form-control-label">Password</label> 
 
    <div class="col-sm-8"> 
 
     <input type="password" class="form-control" placeholder="Password" name="password"> 
 
     <span class="fa fa-key"></span> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="form-group row"> 
 
    <div class="col-sm-offset-4 col-sm-10"> 
 
    <input type="hidden" name="signUp" value="0"> 
 
     <input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit"> 
 
    </div> 
 
    </div> 
 

 
    <p><a class="toggleForms">Sign Up Here</a></p> 
 

 
    </div> 
 
</form>

まず

Answer 1

、あなたが提出したコード内の多数の誤りがあります。主に不器用なコピーと貼り付けが原因だと思いますが、コード内にあると思うものがあります。これは "#error"のjQueryリファレンスが欠けています。

"#error".val(data) 

私はあなたがこのエラーが起きてから "でpreventDefault" を停止すると、この

$("#error").val(data) 

のようなものを書きたいと思います。

第2に、これらのフォームの送信ハンドラはどこにあり、どのように見えるのでしょうか。何も持っていなければ、答えがあります。あなたはちょうど送信イベントをキャッチしません。最後に

は、私が代わりにでpreventDefaultで、呼び出しを検討します：

return false 

}「なぜ event.preventDefault() vs. return false