connecting HTML to PHP file using ajax

Question

I have created an application using xampp (apache and mysql). I have the following HTML code:

     <!DOCTYPE html>
        <html>
        <head>
        <title>Name</title>
        </head>
        <body>

    <div id="main">
    <h1>Details</h1>
    <div id="name">
    <h2>Name</h2>
    <hr/>

    <Form Name ="form1" Method ="POST" ACTION = "name.php">

    <label>Name: </label>
    <input type="text" name="per_name" id="name" required="required" placeholder="please enter name"/><br/><br />

    <label>Age: </label>
    <input type="text" name="per_age" id="age" required="required" placeholder="please enter age"/><br/><br />

<input type="submit" value=" Submit " name="submit"/><br />

      </form>
     </div>    
    </div>   
   </div>   
  </body>
</html>

and the following PHP code:

<?php
if(isset($_POST["submit"])){
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "details";

$connection = new mysqli($servername, $username, $password, $dbname);


if ($connection->connect_error) {
die("Connection failed: " . $connection->connect_error);
}

$sql = "INSERT INTO persons (person_name, person_age)
VALUES ('".$_POST["per_name"]."','".$_POST["per_age"]."')";

if ($connection->query($sql) === TRUE) {
echo "person added";
} else {
echo "person not added";
}

$connection->close();
}
?>

Instead of calling the php file using <Form Name ="form1" Method ="POST" ACTION = "name.php"> how would i create a simple ajax file to call the PHP file? i have tried to do this but can't seem to get anywhere, can anyone help me please? AJAX:

$(document).ready(function(){
$("#submit").click(function(){

// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "name.php",
data: dataString,
cache: false,
success: function(result){
alert(result);

});
}
return false;
});
});

Any error from somewhere? js, php, mysql...Anyway, you don't jhave a Submit ID — Damien Pirsy, Mar 21 '16 at 12:19
`"can't seem to get anywhere"` - Maybe you can be a *little* more specific? In what way is this actually failing? — David, Mar 21 '16 at 12:20
Welcome to Stack Overflow! Your current code has SQL injections, which means anyone can read or destroy any data. Please read: [How can I prevent SQL-injection in PHP?](http://stackoverflow.com/q/60174/660921) — Martin Tournoij, Mar 21 '16 at 12:27

Vincent Decaux · Accepted Answer · 2016-03-21T12:24:21.133

0

Better to handle form submit : Add ID to your form :

<Form id="form1">

Then :

$(document).ready(function(){
    $("#form1").submit(function(e) {
        e.preventDefault();

       $.post('name.php', $('#form1').serialize(), function(data) {
           alert(data);
       });
       return false;
});

edited Mar 21 '16 at 12:24

answered Mar 21 '16 at 12:20

Vincent Decaux

9,857
6
56
84

Wouldn't this trigger every time the client clicks in the form? Shouldn't the event handler be listening for the submit event rather than the click event? – NewToJS Mar 21 '16 at 12:22
1

Right ... thanks for your remark. I edit. – Vincent Decaux Mar 21 '16 at 12:24

score 0 · Answer 2 · answered Mar 21 '16 at 12:22

0

In form

remove these in <form>

Method ="POST" 
ACTION = "name.php"

add ID in submit button

<input type="submit" value=" Submit" id="submit" name="submit"/>

In AJAX

<script>
    $(function(){
        $( "#submit" ).click(function(event)
        {
            event.preventDefault(); # add this ++Important++ 
            var name= $("#name").val();
            var age= $("#age").val();

            $.ajax(
                {
                    type:"post",
                    url: "name.php",
                    data:{ name:name, age:age },
                    success:function(result)
                    {
                        alert(result);
                    }
                });
        });
    });
</script>

answered Mar 21 '16 at 12:22

Abdulla Nilam

36,589
17
64
85

If it's important to use `preventDefault();` wouldn't it be just as important to explain why? I agree that `preventDefault();` should be use in forms but since the OP will be removing the `action` and `method` attributes what is the use for the form tag? Why not just remove the form tags altogether since the function isn't listening for a submit event... – NewToJS Mar 21 '16 at 12:27
hi i have made these changes but the users name and age aren't saving to the database, once the submit button is clicked on the page refreshes? – userps1990 Mar 21 '16 at 12:29
@userps1990 track your error on inserting page. First check submit button sends your data to `name.php` – Abdulla Nilam Mar 21 '16 at 12:31

connecting HTML to PHP file using ajax

2 Answers2

In form

In AJAX