Question

158

How to insert into database using ajax on php?

rated 0 times [ 161] [ 3] / answers: 1 / hits: 17379 / 11 Years ago, sun, june 16, 2013, 12:00:00

I have html form with three values fname,lname,age. I want to send it on server side php file and insert into database.

My html form is like this:

<html>

<head>

<script>

function insert(fname,lname,age)

{



if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById(txtHint).innerHTML=xmlhttp.responseText;

    }

  }



xmlhttp.open(GET,ajax_db_php.php?fname=fname&lname=lname&age=age,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form>

<table>



<tr><td>First Name : </td><td> <input type=text fname=fname/> </td> </tr>

<tr><td>Last Name : </td><td> <input type=text fname=lname/> </td> </tr>

<tr><td>City : </td><td> <input type=text fname=age/> </td> </tr>



<input type=submit onclick=insert(fname,lname,age)>



</table>

</form>

</body>

</html>

As I have used ajax it should not load entire page, but when I click submit button it load entire page. why?
And php page which receives values and insert into database is:

<html>

<body>



<?php



$fname=$_GET['fname'];

$lname=$_GET['lname'];

$age=$_GET['age'];



//echo firstname :  $fname;



$con=mysqli_connect('127.0.0.1:3306' ,'root','root','my_db');

if (mysqli_connect_errno())

  {

  echo Failed to connect to MySQL:  . mysqli_connect_error();

  }





$sql=INSERT INTO table1 (fname, lname, age)

VALUES

('$_POST[fname]','$_POST[lname]','$_POST[age]');



$result=mysql_query($sql);



if (!mysqli_query($con,$sql))

  {

  die('Error: ' . mysqli_error($con));

  }

echo 1 record added;

mysqli_close($con);





?>



</body>

</html>

When I click the submit button it shows nothing, no error and no update in database too.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

estefanib

Add To Favorites

Follow

Total Points: 508

Total Questions: 104

Total Answers: 83

Location: Lebanon

Member since Sun, Aug 2, 2020

4 Years ago

estefanib questions

1 JavaScript - wait until element loaded on website using Chrome extension

Sat, Jul 10, 21, 00:00, 3 Years ago

1 How to auto close an alert after few seconds with Bootstrap?

Mon, Jun 28, 21, 00:00, 3 Years ago

1 What is the difference between a User and a GuildMember in discord.js?

Sun, Sep 20, 20, 00:00, 4 Years ago

1 react styled components style inner elements

Fri, Aug 21, 20, 00:00, 4 Years ago

1 How to automatically refresh an interactive grid after clicking on save button or at a fixed interval?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ryanulyssesb · Accepted Answer

Change as said by Nikola
then
Change in HTML

input type=submit

to

input type=button

This will not reload the page.
Then
Remove below tags from PHP

<html>

<body>

</html>

</body>

I'll recommend use jQuery to make ajax calls.

Update how to use ajax and serialize:

This is test.php

<html>

<head>

<script src=http://code.jquery.com/jquery-1.10.1.min.js ></script>

<script>

$(document).ready(function(){

    $(form).on('submit',function(event){

    event.preventDefault();

        alert(Hello);

        data = $(this).serialize();



        $.ajax({

        type: GET,

        url: test2.php,

        data: data

        }).done(function( msg ) {

        alert( Data Saved:  + msg );

        });

    });

});

</script>

</head>

<body>

<form>

<table>



<tr><td>First Name : </td><td> <input type=text name=fname/> </td> </tr>

<tr><td>Last Name : </td><td> <input type=text name=lname/> </td> </tr>

<tr><td>City : </td><td> <input type=text name=age/> </td> </tr>



<input type=submit value=Submit />



</table>

</form>

</body>

</html>

this is test2.php

<?php

if($_GET)

{

$fname=$_GET['fname'];

$lname=$_GET['lname'];

$age=$_GET['age'];



echo firstname : .$fname;

}

?>