Question

我有2个表单登录并在同一个index.php上注册并根据用户需要进行切换。当您在注册表单被隐藏时打开index.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

首先，您提交的代码中存在大量错误。我相信它们主要是由于笨拙的复制和粘贴，但我认为你的代码中只有一个，它是＃34;＃error＆＃34;

的缺失jQuery参考。

"#error".val(data)

我想你想写这样的东西

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

此错误将停止＆＃34; preventDefault＆＃34;从发生。

其次，我想知道这些表单的提交处理程序在哪里以及它的外观。如果你没有，那么你有答案。你只是没有抓住提交事件。

最后，我会考虑调用，而不是preventDefault：

return false

请参阅此主题的原因 event.preventDefault() vs. return false

如果有任何错误，则在提交表单时停止刷新，如果没有错误则刷新

1 个答案: