savagenoob Posted December 1, 2009 Share Posted December 1, 2009 OK, I am trying to create a page (car insurance based) that a user can add drivers via AJAX and the page would display each driver submitted with the form. If i just echo something it works, the database is updated, but I cant display all the drivers in the database with AJAX. So if there is 3 drivers, I want the page to update as the drivers are added. Here is the scripts Java and Form: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> </head> <script type="text/javascript" language="javascript"> var http_request = false; function makePOSTRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('POST', url, true); http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http_request.setRequestHeader("Content-length", parameters.length); http_request.setRequestHeader("Connection", "close"); http_request.send(parameters); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { //alert(http_request.responseText); result = http_request.responseText; document.getElementById('myspan').innerHTML = result; } else { alert('There was a problem with the request.'); } } } function get(obj) { var poststr = "firstname=" + encodeURI( document.getElementById("firstname").value ) + "&middlename=" + encodeURI( document.getElementById("middlename").value ) + "&lastname=" + encodeURI( document.getElementById("lastname").value ); makePOSTRequest('adddriver.php', poststr); } </script> <form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform"> <tr><th colspan = "%100">Drivers</th></tr> <form id="driver" onsubmit="return false;"> <tr><td>First Name:</td><td><input type="text" name="firstname" id="firstname" ></td><td>Middle Name:</td><td><input type="text" name="middlename" id="middlename" ></td><td>Last Name:</td><td><input type="text" name="lastname" id="lastname" ></td></tr> <br> <input type="button" name="button" value="Submit" onclick="javascript:get(this.parentNode);"> </form> <br><br> Drivers:<br> <hr> <span name="myspan" id="myspan"></span> <hr> </body> The Server Page: <?php require_once('config.php'); //Array to store validation errors $errmsg_arr = array(); //Validation error flag $errflag = false; //Connect to mysql server $link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD); if(!$link) { die('Failed to connect to server: ' . mysql_error()); } //Select database $db = mysql_select_db(DB_DATABASE); if(!$db) { die("Unable to select database"); } if($_POST["firstname"] == "") echo "name is empty"; else $firstname = $_POST["firstname"]; $middlename = $_POST["middlename"]; $lastname = $_POST["lastname"]; $query = "INSERT INTO drivers (firstname, middlename, lastname) VALUES ('$firstname', '$middlename', '$lastname')"; $result = mysql_query($query) or die(mysql_error()); $driverres = mysql_query("SELECT * FROM drivers") or die(mysql_error()); while($row = mysql_fetch_array('$driverres')){ echo $row['firstname'] . " " . $row['middlename'] . " " . $row['lastname']; } ?> Quote Link to comment https://forums.phpfreaks.com/topic/183532-ajax-form-submit-and-update-from-database/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.