The thing is, I've done a code that adds data into a mysql database, but I don't want to reload the page.
This is my HTML page (there's extra code but only for decorating): --------------------------- <script src="saving.js"></script> ... <form method="POST"> <table width="350"> <tr><td><b>First Name:</b></td><td><input type="text" name="fname" /></td></tr> <tr><td><b>Last Name:</b></td><td><input type="text" name="flast" /></td></tr> <tr><td><b>Phone Number:</b></td><td><input type="text" name="fphone" /></td></tr> <tr><td><b>Address:</b></td><td><input type="text" name="faddr" /></td></tr> <table> <br> <br> <input type="Submit" value="Submit" onClick="User(fname,flast,fphone,faddr);"/> </form> <p> <div id="txtHint"><b>Info here.</b></div> </p> --------------------------
This is my JS code: -------------------------- var xmlHttp;
function User(str1,str2,str3,str4) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } var url="insert.php"; url=url+"?fname="+str1+"&flast="+str2+"&fphone="+str3+"&faddr="+str4; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }
function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }
function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } -----------------------------------
This is my PHP code: ----------------------------------- <?php
This example would alert whatever was echoed at test.php. The $.post function sends the parameters "first" and "second" through POST with the values "1" and "2" respectively. Read more at the jQuery Docs page.