Displaying a confirmation message after doing a query with AJAX and PHP - php

Question

I am trying to call a function with Javascript, HTML, AJAX, and PHP.
I am still new to Javascript, AJAX, and PHP.
Background info: I am trying to add a new customer to my database but I am now trying to get a confirmation message on the same page without the page refreshing.
This is what I have:
<script type="text/javascript">
function addCustomer(ln,fn,pn,dob)
{
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","addCustomer.php?add_LN="+ln+"?add_FN="+fn+"?add_PN="+pn+"?add_DOB="+dob,true);
xmlhttp.send();
}
</script>
<p>Suggestions: <span id="txtHint"></span></p>
<form action="return addCustomer(this.add_LN, this.add_FN, this.add_PN, this.add_DOB);">
<input type="text" name="add_LN" id="add_LN" />
<br />
<br />
<input type="text" name="add_FN" id="add_FN" />
<br />
<br />
<input type="text" name="add_PN" id="add_PN" />
<br />
<br />
<input type="text" name="add_DOB" id="add_DOB" />
<br />
<br />
<input type="submit" name="add_Customer" id="add_Customer" value="Add Customer" />
</form>
<span id="txtHint"></span>
</p> </td>
</tr>
</table>
</div>
I get a "This link appears broken"
With:
http://127.0.0.1/cpsc471/return%20addCustomer(this.add_LN,%20this.add_FN,%20this.add_PN,%20this.add_DOB);?add_LN=ee&add_FN=123&add_PN=eee&add_DOB=eee&add_Customer=Add+Customer
in the url bar.
What am I doing wrong? :) I do not want the page to refresh. I am trying to just get the confirmation or non-confirmation to display.
Thanks again for all the help!

Answer 1

Your problem is here:
<form action="return addCustomer(this.add_LN, this.add_FN, this.add_PN, this.add_DOB);">
You don't want the form action to be a javascript call, you need to do this onclick or something.
The arguments above by #thiefmaster and #martin are correct: using jquery is much simpler. You are right about the framework thing, but in this case you need to go and code for a lot of troubles (responses, when is there a successfull AJAX call, different browsers etc)

Answer 2

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// put your codes here like
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
// document.getElementById("show_label").innerHTML='text as you wish like updated enjoy';
}
}
And add a label with the id of show_label