Problems about keep in the page with ajax

Question

I have a form. My objective is send and insert the values of the form to my database. Then

Clear the input of the form
Show the successful message. Like this:

My problems:When I press the "save" button, I am redirected to another page.

This is the operating error:

and change the page

¿What is the problem on my code?

html

<html>
<head><title>Insert Data Into MySQL: jQuery + AJAX + PHP</title></head>
<body>

<form id="myForm" action="userInfo.php" method="post">
Name: <input type="text" name="name" /><br />
Age : <input type="text" name="age" /><br />
<button type="submit" id="sub">Save</button>
</form>

<span id="result"></span>

 <script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="script/elscript.js" type="text/javascript"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
</body>
</html

This is my script

$("#myForm").submit( function(e) {

// Prevent the normal form submission event
e.preventDefault();

// Create an object of the form
var form = $(this);

// Make an AJAX request
$.post(this.action, form.serializeArray(), function(info) {

    // Clear the form
    form[0].reset();

    // Display message
    $("#result").html(info); 

});

});

Finally, my code to insert

   <?php 
        $conn = mysql_connect('localhost', 'root', '');
        $db   = mysql_select_db('practicas');

        $name = $_POST['name'];
        $age = $_POST['age'];

        if(mysql_query("INSERT INTO ajaxtabla VALUES('$name', '$age')"))
      echo "Successfully Inserted";
    else
      echo "Insertion Failed";
 ?>

Thanks for help me

mysql_ is long dead, use [mysqli_](http://php.net/manual/en/book.mysqli.php) -- or better [PDO](http://php.net/manual/en/book.pdo.php). And learn about [SQL injection](https://stackoverflow.com/a/2748357/1022914) and [prepared statements](https://stackoverflow.com/questions/24988867/when-should-i-use-prepared-statements/24989031). — Mikey, Mar 17 '18 at 16:14
sorry Mikey, in my university they don't teach us anything about all this. I have to search things to do my homeworks. for that reason I do not understand anything, my colleagues and me, have a bad programming base — Vidal, Mar 17 '18 at 16:21

Mikey · Answer 1 · 2018-03-17T16:04:36.810

You can simplify the code by having just one event handler for when you submit the form. Additionally, you need to include e.preventDefault() which prevents the normal function of the submit button.

$("#myForm").submit( function(e) {

    // Prevent the normal form submission event
    e.preventDefault();

    // Create an object of the form
    var form = $(this);

    // Make an AJAX request
    $.post(this.action, form.serializeArray(), function(info) {

        // Clear the form
        form[0].reset();

        // Display message
        $("#result").html(info); 

    });

});

Give your button a type attribute as well to ensure your form submits upon clicking.

<button type="submit" id="sub">Save</button>

Demo

$(function() {
  $("#myForm").submit(function(e) {

    // Prevent the normal form submission event
    e.preventDefault();
    
    console.log('onsubmit event handler triggered');

    // Create an object of the form
    var form = $(this);

    // Make an AJAX request
    /*$.post(this.action, form.serializeArray(), function(info) {

      // Clear the form
      form[0].reset();

      // Display message
      $("#result").html(info);

    });*/
    
    // fake AJAX request
    setTimeout(function(){
       // Clear the form
      form[0].reset();
      // Display message
      $("#result").html('Successfully Inserted');
    }, 3000);
  });

});

<form id="myForm" action="userInfo.php" method="post">
  Name: <input type="text" name="name" /><br /> Age : <input type="text" name="age" /><br />
  <button type="submit" id="sub">Save</button>
</form>

<span id="result"></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

thanks!! but it does not keep me on the page, it keeps changing :( — Vidal, Mar 17 '18 at 15:59
sorry Mikey, i am a bad programmer, but it does not work. I change my code in the question, can you see it? thanks for help me — Vidal, Mar 17 '18 at 16:16
@Vidal Open up your [browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools), check the console and see if you have any errors. You should only be using *one* jQuery script and it needs to be placed *before* your script. — Mikey, Mar 17 '18 at 16:23
okeey. My console say that i have problem here: `GET http://localhost/PracticaAjax/script/elscript.js net::ERR_ABORTED` is this important? — Vidal, Mar 17 '18 at 16:33
@Vidal Of course. It means it can't find your script. Paste the URL in your browser and see if it loads. If it can't, figure out why that is e.g. wrong filename, wrong location etc. — Mikey, Mar 17 '18 at 16:56
it does not matter, I leave it, I search other things, thank you :) — Vidal, Mar 17 '18 at 17:00

score -1 · Answer 2 · answered Mar 17 '18 at 15:57

-1

In ajax you are posting the form with its action so it will be redirected confirm If you don't want to redirect then send ajax request like this

$.ajax({
method:post,
url:"File name you want to send request"

}).done(function(response){

});

answered Mar 17 '18 at 15:57

Syed Hassaan Ahmed

1
2

Problems about keep in the page with ajax

2 Answers2