Im not sure what I have done wrong but this is the code
Index.html
- <html>
- <head><title>Button input sql ajax</title>
- </head>
- <body>
- <a href="#" onClick="loadiv('form.html'); return false">Add person</a>
- <div id="load"> </div>
- <div id="result"> </div>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- <script src="my_script.js" type="text/javascript"></script>
- </body>
- </html>
form.html
- <form id="myForm" action="user_add.php" method="post">
- Username: <input type="text" name="username" /><br />
- Password: <input type="text" name="pass" /><br />
- <button id="sub">Save</button>
- </form>
user_add.php
- <?php
- include_once('connect.php');
-
- $name = $_POST['username'];
- $pass = $_POST['pass'];
-
- if(mysql_query("INSERT INTO admin VALUES('$name', '$pass')"))
- {
- echo "Successfully Inserted";
- }else{
- echo "Insertion Failed";
- }
- ?>
my_script.js
- $("#sub").click( function() {
- $.post( $("#myForm").attr("action"),
- $("#myForm :input").serializeArray(),
- function(info){ $("#result").html(info);
- });
- clearInput();
- });
-
- $("#myForm").submit( function() {
- return false;
- });
-
- function clearInput() {
- $("#myForm :input").each( function() {
- $(this).val('');
- });
- }
- function loadiv(temp){
- var req = new XMLHttpRequest();
- req.open("GET", temp, false);
- req.send(null);
- var page = req.responseText;
- document.getElementById("load").innerHTML = page;
- };
Not posting the connection.php because I am not having a connection problem, I am having a problem
with where you click the save button it's supposed print out "Successfully Inserted" instead it just
refreshes the page and says it. I dont want it to do that I want it to print it below the save button.
A live demo can be seen here:
http://kush.phr33k.org/test/index.htmlWhen you add in the user it's supposed to return the "successful or not" below the buttom you click to save. Refreshes the page instead.. What'd I do wrong?