Note that there are some explanatory texts on larger screens.

plurals
  1. POSubmtting An animated form using jquery ajax and php to mysql database
    primarykey
    data
    text
    <p>I have been having problems for the past two days trying to submit a form using jquery ajax, php to mysql database. I reused a code for an animation form which I found online. The html code as follows (file name: "Slider.html"):</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div id="form_wrapper" class="form_wrapper"&gt; &lt;form class="register" style="right:-500px;backgroundcolor:grey;"&gt; &lt;h3&gt;Register&lt;/h3&gt; &lt;div class="column"&gt; &lt;div&gt; &lt;label&gt;First Name:&lt;/label&gt; &lt;input type="text" /&gt; &lt;span class="error"&gt;This is an error&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;label&gt;Last Name:&lt;/label&gt; &lt;input type="text" /&gt; &lt;span class="error"&gt;This is an error&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;div&gt; &lt;label&gt;Username:&lt;/label&gt; &lt;input type="text"/&gt; &lt;span class="error"&gt;This is an error&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;label&gt;Email:&lt;/label&gt; &lt;input type="text" /&gt; &lt;span class="error"&gt;This is an error&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;label&gt;Password:&lt;/label&gt; &lt;input type="password" id="r_passwordField"/&gt; &lt;span class="error"&gt;This is an error&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="bottom"&gt; &lt;div class="remember"&gt; &lt;input type="checkbox" /&gt; &lt;span&gt;Send me updates&lt;/span&gt; &lt;/div&gt; &lt;input type="submit" id="registrationform" value="register"/&gt; &lt;a href="index.html" rel="login" class="linkform"&gt;You have an account already? Log in here&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;form class="login active"&gt; &lt;h3&gt;Login&lt;/h3&gt; &lt;div&gt; &lt;label&gt;Username:&lt;/label&gt; &lt;input type="text" /&gt; &lt;span class="error"&gt;This is an error&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;label&gt;Password: &lt;a href="forgot_password.html" rel="forgot_password" class="forgot linkform"&gt;Forgot your password?&lt;/a&gt;&lt;/label&gt; &lt;input type="password" id="l_passwordField" size="10"/&gt; &lt;span class="error"&gt;This is an error &lt;/span&gt; &lt;/div&gt; &lt;div class="bottom"&gt; &lt;div class="remember"&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;Keep me logged in&lt;/span&gt;&lt;/div&gt; &lt;input type="submit" id="loginform" value="Login"&gt;&lt;/input&gt; &lt;a href="register.html" rel="register" class="linkform"&gt;You don't have an account yet? Register here&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;form class="forgot_password"&gt; &lt;h3&gt;Forgot Password&lt;/h3&gt; &lt;div&gt; &lt;label&gt;Username or Email:&lt;/label&gt; &lt;input type="text" /&gt; &lt;span class="error"&gt;This is an error&lt;/span&gt; &lt;/div&gt; &lt;div class="bottom"&gt; &lt;input type="submit" id="forgortform" value="Send reminder"&gt;&lt;/input&gt; &lt;a href="index.html" rel="login" class="linkform"&gt;Suddenly remebered? Log in here&lt;/a&gt; &lt;a href="register.html" rel="register" class="linkform"&gt;You don't have an account? Register here&lt;/a&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="graph-wrapper" class="graph-container" style="display:none"&gt; &lt;h3&gt;Standard Diviation Bell Curve&lt;h3&gt; &lt;div class="graph-info"&gt; &lt;a href="javascript:void(0)" class="visitors"&gt;Visitor&lt;/a&gt; &lt;a href="#" id="lines" class="active"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="graph-container"&gt; &lt;div id="graph-lines"&gt;&lt;/div&gt; &lt;div id="graph-bars"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>jquery ajax code as follows (jquery script on the same file as the html code):</p> <pre><code>&lt;script&gt; $(document).ready(function(){ //animated code and other codes omitted ("#registrationform").click(function(){ $.post("postdata.php", {fname:"Ibrahim",lname:"Ahmadu",email:"ibrostay@yahoo.com",uid:"ibro2stay",pwd:"ibro2stay",mean:"0.1",varience:"0.1",sdev:"0. 1",duration:"0.1"},function(responce){ if(responce==0){ alert("There was an error updating the record"); }else{ alert("update successful"); } }); }); }); &lt;/script&gt; </code></pre> <p>Below is the php code (php code file name: "postdata.php"):</p> <pre><code>&lt;?php $fname=$_REQUEST["fname"]; $lname=$_REQUEST["lname"]; $email=$_REQUEST["email"]; $uid=$_REQUEST["uid"]; $pwd=$_REQUEST["pwd"]; $mean=$_REQUEST["mean"]; $varience=$_REQUEST["varience"]; $sdev=$_REQUEST["sdev"]; $duration=$_REQUEST["duration"]; $con=mysql_connect('localhost','root',''); if(!$con) { die("Error Connecting to database;"+mysql_error()); } $database=mysql_select_db('mydb'); if(!$database) { die("Error Connecting to database;"+mysql_error()); } $update = mysql_query("insert into users values('$fname','$lname','$email','$uid','$pwd','$mean','$varience','$sdev','$duration')"); if(!$update) { die("Update wasn't Success full"+mysql_error()); } echo "update successfull"; mysql_close($con); ?&gt; </code></pre> <p>Whenever I click the register button nothing happens. The page only refreshes back to the login form since it has class "active" as the default form, and the browser address bar changes from this url: "localhost/slider.html" to this url: "localhost/slider.html?".</p> <p>I hope my question was explicit enough, because I need an urgent answer, as this is my thesis project and I am running out of options.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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