insert data into the mysql database using ajax

Question

santhanalakshmi -2 Junior Poster in Training

15 Years Ago

The below coding is the javascript coding in which i have used AJAX coding also.its only pagenavigation coding.

function change(which)
{
   if(which=="page1")
   { 
     document.getElementById(which).style.borderBottomColor="white"; 
     document.getElementById("page2").style.borderBottomColor="#778";
     document.getElementById("page3").style.borderBottomColor="#778";
     document.getElementById("page4").style.borderBottomColor="#778";
   }
   else if(which=="page2")
   {
     document.getElementById(which).style.borderBottomColor="white";
     document.getElementById("page3").style.borderBottomColor="#778";
     document.getElementById("page4").style.borderBottomColor="#778";
     document.getElementById("page1").style.borderBottomColor="#778";
   }
   else if(which=="page3")
   {
     document.getElementById(which).style.borderBottomColor="white";
     document.getElementById("page4").style.borderBottomColor="#778";
     document.getElementById("page1").style.borderBottomColor="#778";
     document.getElementById("page2").style.borderBottomColor="#778";
   }
   else if(which=="page4")
   {
     document.getElementById(which).style.borderBottomColor="white";
     document.getElementById("page1").style.borderBottomColor="#778";
     document.getElementById("page2").style.borderBottomColor="#778";
     document.getElementById("page3").style.borderBottomColor="#778";
   }
}

var please_wait = null;
function open_page(url,target)
{
 if(!document.getElementById) 
 {	
   return false;
 }
 if(please_wait != null) 
 {
   document.getElementById(target).innerHTML = please_wait;

 }
 if(window.ActiveXObject) 
 {
    link = new ActiveXObject("Microsoft.XMLHTTP");
 	    
 }
 else if(window.XMLHttpRequest) 
 {
    link = new XMLHttpRequest();
 }
 if(link == undefined) 
 {
 	return false;
 }
 link.onreadystatechange = function() { response(url, target);
         
  }
 	link.open("GET", url, true);
	link.send(null);
}
function response(url, target) 
{    
   if(link.readyState == 4) 
  {
    set_loading_message("<img src='load-image.gif'>");
    document.getElementById(target).innerHTML = link.responseText;
  }
}
function set_loading_message(msg) {
       	please_wait = msg;
}

index.html page

letters which i have been bolded,please see through it carefully.I am calling PHP page and the remaining pages are normal HTML page.Here again take a look of javascript coding.

In the PHP file ,i have added 2 textboxes and 1 submit button.when i clicked submit button, data(2 textboxes value) must be inserted into mysql database.

for inserting ,did i want to add some more ajax codings in the javascript file.please help me out.datas are not inserting into the database.i think in PHP coding there is an no problem.i want to change the coding only in the javascript file.

<html>

<head>
<link rel="stylesheet" type="text/css" href="tab.css"/>
<script type="text/javascript" src="ajax_navigation.js">
</script>
</head>

<body>
<ul class="displaytabs">
<li><a id="page1" href="javascript:void(0)" onClick="open_page('page1.html','content'); javascript:change('page1');"style='border-bottom-color:white;'>page1</a></li>
[B]<li><a id="page2" href="javascript:void(0)" onClick="open_page('page2.php','content'); javascript:change('page2');">page2</a></li>[/B]
<li><a id="page3" href="javascript:void(0)" onClick="open_page('page3.html','content'); javascript:change('page3');">page3</a></li>
<li><a id="page4" href="javascript:void(0)" onClick="open_page('page4.html','content'); javascript:change('page4');">page4</a></li>
</ul>

<div id="content" style="border:1px solid gray; width:94%; margin-bottom: 1em;">
<table align=center width=90%>
<tr><td align=left style="font-size:13px;padding:5px;color:#3D366F;font-family:arial,verdana;">
Page1</td></tr></table>
</div>




</body>
</html>

javascript mysql

5 Contributors
4 Replies
5K Views
1 Year Discussion Span
Latest Post 13 Years Ago Latest Post by mytool.parekh

Thirusha 20 Posting Whiz

15 Years Ago

I dont know much about php, but I do know that you can only insert data into a database using a server side language, so you are going to have to edit your php page.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

chandru7 -1 Junior Poster in Training · Answer 1 · 2009-10-20T15:19:24+00:00

Just you are sending data to the server,change function like url,target,textboxdata,in php page retrieve those values and update in database.
send data like

link.send("data="+textboxdata)

you can easily retrieve using $_GET["data"]

vishvendranagar 0 Newbie Poster · Answer 2 · 2010-07-17T15:33:32+00:00

first create a database like[create database tree5] in mysql, then create table like (create table login (username varchar(20), password(20));)

then copy this PHP code

<?php
        $dbhost = "localhost";
        $dbuser = "root";
        $dbpass = "";
        $dbname = "tree5";

        mysql_connect($dbhost, $dbuser, $dbpass);

        mysql_select_db($dbname) or die(mysql_error());

        $un = $_GET['username'];
        $pw= $_GET['password'];



     mysql_query ("INSERT INTO  `tree5`.`login` (`username` ,`password`)VALUES ('$un',  '$pw');");


?>

save this php file as "ajax-example3.php"

now create new ajax file like

<html>
    <head>
        <script type="text/javascript">

            function getin()
            {
                    if (window.XMLHttpRequest)
                    {
                        xmlhttp=new XMLHttpRequest();
                    }
                    else
                    {
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    }
                }

                var password = document.getElementById('password').value;
                var username = document.getElementById('username').value;

                var queryString = "?username=" + username + "&password=" + password;
                xmlhttp.open("GET", "ajax-example3.php" + queryString , true);
                xmlhttp.send(); 
            }
        </script>
    </head>

    <body>
        <div id="myDiv"><h2>CREATE ACCOUNT</h2></div>
        <form name='myForm'>
            username: <input type='text' id='username' /> <br/>
            password: <input type='password' id='password' /> <br />

                    <input type='button' onclick='getin()' value='login' />
        </form>


    </body>
</html>

now save this file as "ajaxexample.html"

now run this file in browser.

mytool.parekh 0 Newbie Poster · Answer 3 · 2011-10-05T13:27:06+00:00

mytool.parekh 0 Newbie Poster

13 Years Ago

thanks its too easy to understand