Help: Post Method using AJAX, PHP and HTML

[dsoreal]

Hi I am trying to insert data into a database using a simple html form. I am having trouble with the post method as I have never used it in ajax before.

 

would someone be able to look at my code below and point me in the right direction.

 

javascript from html page

 

<script type="text/javascript">

var XMLHttpRequestObject = false; 
var url = "insertArtist.php";

function postData(url, data, callback)
{

	var XMLHttpRequestObject = false;

	if(window.XMLHttpRequest)
	{
        	XMLHttpRequestObject = new XMLHttpRequest();
        } 
    else if (window.ActiveXObject) 
  	{
       		 XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      	}

	if (XMLHttpRequestObject)
	{
		XMLHttpRequestObject.open("POST", url, data);
		XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	}
		  	
	XMLHttpRequestObject.onreadystatechange = function()
	{
		if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
		{
				var str = document.artist.artist.name+"=" +document.artist.artist.value+"&";
				str+ = document.artist.label.name+"=" +document.artist.label.value+"&";
				str+ = document.artist.artcomments.name+"="+document.artist.artcomments.value+"";				
		}
	}
XMLHttpRequestObject.send(data);
}

</script>

 

html form

<form name="artist" method="post" >
  <table width="75%" border="0">
    <tr> 
      <td colspan="3"><h1>Add Artist:</h1></td>
    </tr>
    <tr> 
      <td width="38%">Artist Name ::</td>
      <td width="23%"><input name="artist" id="artist"  type="text" onBlur="checkInput(this.id)"></td>
      <td width="39%"><div id="artistDiv"></div></td>
    </tr>
    <tr> 
      <td>Record Label ::</td>
      <td><input name="label" id="label"  type="text" onBlur="checkInput(this.id)"></td>
      <td><div id="labelDiv"></div></td>
    </tr>
    <tr> 
      <td>Comments ::</td>
      <td><textarea name="artcomments" id="artcomments"></textarea></td>
      <td><div id="artDiv"></div></td>
    </tr>
    <tr> 
      <td colspan="3"> 
      <input value="Submit" onclick="postData()" type="button">
          
          <input name="resetSong" type="reset" id="resetSong" value="Reset" onClick="resetForm()">
          <br>
          <br>
        <div id="addedDiv"></div></td>
    </tr>
  </table>

 

PHP Code

<?php

$con = mysql_connect("localhost:8888", "donal");

if (!$con)
{
die('Could not connect: ' . mysql_error());	
}

mysql_select_db("test", $con);

$sql="INSERT INTO artist (artist_id, artist_name, record_label, art_comments) VALUES (null, '$_POST[artist]', '$_POST[label]', '$_POST[artcomments]')";

//mysql_query($sql);

if (!mysql_query($sql, $con))
{
die('Error: ' . mysql_error());
}

//echo "Artist Added";

mysql_close($con)

?>