Databases
StackOverflow2013
Postsdbo
POPHP HTML Form Returning to wrong jQuery tab?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP HTML Form Returning to wrong jQuery tab?
    text
    copied!<p>OK so I wrote a register and log-in using HTML, jQuery's $.post() and PHP.</p> <p>The only issue is when on the second tab (register) and the form is submitted it returns to the first tab (log-in). I want it to just echo out the error/success message in the same tab without taking me back.</p> <p>Register Form:</p> <p><img src="https://i.stack.imgur.com/ETSCt.png" alt=""></p> <p>After register form was submitted:</p> <p><img src="https://i.stack.imgur.com/DfD9d.png" alt=""></p> <p>Clicked Register tab again:</p> <p><img src="https://i.stack.imgur.com/GACQo.png" alt=""></p> <p>As you can see it outputs the error(s) but doesn't return me to the proper tab although it sill shows that the Register tab is active.</p> <p>PHP:</p> <pre><code>&lt;?php include_once('../php/db.php'); echo ' &lt;link rel="stylesheet" href="./css/styles.css" type="text/css" /&gt; &lt;script src="./plugins/loader.js" type="text/javascript"&gt;&lt;/script&gt; '; $values = array( 'email' =&gt; @$_POST['email'], 'password' =&gt; sha1(@$_POST['password']), 'confirm_password' =&gt; sha1(@$_POST['confirm_password']), 'register_ip' =&gt; $_SERVER['REMOTE_ADDR'], 'register_date' =&gt; date("F j, Y"), 'login_date' =&gt; 'N/A', 'user_rights' =&gt; 0, 'last_ip' =&gt; $_SERVER['REMOTE_ADDR'], ); if($values['password'] == $values['confirm_password'] &amp;&amp; filter_var($values['email'], FILTER_VALIDATE_EMAIL)) { echo '&lt;p class="message valid"&gt;You have been successfully registered. Click "Log-In."&lt;span class="close"&gt;X&lt;/span&gt;&lt;/p&gt;'; $insertUser = $db-&gt;prepare("INSERT INTO `users` (`email`, `register_ip`, `register_date`, `login_date`, `password`, `user_rights`, `last_ip`) VALUES (:email, :register_ip, :register_date, :login_date, :password, :user_rights, :last_ip)"); $insertUser-&gt;execute(array( ':email' =&gt; $values['email'], ':register_ip' =&gt; $values['register_ip'], ':register_date' =&gt; $values['register_date'], ':login_date' =&gt; $values['login_date'], ':password' =&gt; $values['password'], ':user_rights' =&gt; $values['user_rights'], ':last_ip' =&gt; $values['last_ip'], )); } else { echo '&lt;p class="message invalid"&gt;There was an error with your registration.&lt;span class="close"&gt;X&lt;/span&gt;&lt;/p&gt;'; } ?&gt; </code></pre> <p>HTML:</p> <pre><code>&lt;ul class="navigation clearfix"&gt; &lt;li&gt; &lt;a class="current" href="#tab1"&gt;Log-In&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2"&gt;Register&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab3"&gt;Recover Password&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;!--tab1--&gt; &lt;div class="tab" id="tab1"&gt; &lt;form action="./php/login_process.php" method="POST" class="form loginForm"&gt; &lt;span class="loginResult"&gt;&lt;/span&gt; &lt;p class="field"&gt; &lt;label&gt;E-mail Address &lt;/label&gt; &lt;input class="large" name="email" type="text"&gt; &lt;/p&gt; &lt;p class="field"&gt; &lt;label for="username"&gt;Password &lt;/label&gt; &lt;input id="username" name="password" class="large" type="password"&gt; &lt;/p&gt; &lt;p class="field"&gt; &lt;button class="logBtn"&gt;Log-In&lt;/button&gt; &lt;button type="reset" class="secondary"&gt;Reset&lt;/button&gt; &lt;/p&gt; &lt;/form&gt; &lt;/div&gt; &lt;!--tab2--&gt; &lt;div class="tab" id="tab2"&gt; &lt;form action="./php/register_process.php#tab2" method="POST" class="form registerForm"&gt; &lt;span class="registerResult"&gt;&lt;/span&gt; &lt;p class="field"&gt; &lt;label for="username"&gt;E-mail Address &lt;/label&gt; &lt;input id="username" name="email" class="large"&gt; &lt;/p&gt; &lt;p class="field"&gt; &lt;label for="username"&gt;Password &lt;/label&gt; &lt;input name="password" type="password" class="large" id="email"&gt; &lt;/p&gt; &lt;p class="field"&gt; &lt;label for="username"&gt;Repeat Password &lt;/label&gt; &lt;input name="confirm_password" name="confirm_password" class="large" id="email" type="password"&gt; &lt;/p&gt; &lt;p class="field"&gt; &lt;button type="submit" class="registerBtn"&gt;Register&lt;/button&gt; &lt;button type="reset" class="secondary"&gt;Reset&lt;/button&gt; &lt;/p&gt; &lt;/form&gt; </code></pre> <p>jQuery:</p> <pre><code>&lt;script type="text/javascript"&gt; $(".registerBtn").click( function() { $.post( $(".registerForm").attr("action"), $(".registerForm :input").serializeArray(), function(info){ $(".registerResult").html(info); }); }); $(".registerForm").submit( function() { return false; }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload