stop refresh when form is submitted if any error and refresh if no error

Question

I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.

Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.

I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.

$.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>

Please check the Unwanted close brackets at end " }); " – Antony Jul 01 '16 at 06:56 — Antony, Jul 01 '16 at 06:56

score 0 · Answer 1 · edited May 23 '17 at 10:28

Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".

"#error".val(data)

I think you wanted to write something like this

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

This error would stop "preventDefault" from happening.

Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.

Lastly, I would consider calling, instead of preventDefault:

return false

Please see this thread as for the reasons why event.preventDefault() vs. return false

stop refresh when form is submitted if any error and refresh if no error

1 Answers1