I have a problem in giving Ajax functionality to a hyperlink. I have files Link.html and GetCustomerdata.php. The main function of the HTML is send the data to getCutomerData.php and shows flash as "success".
And also I do not want hyperlinking,
<a href="#"
Instead I need it in terms of:
<a href=GetCustomer.php?id=<format>
Is it possible to clear?
Link.Html
<html> <head> <title>Customer Account Information</title> <script type="text/javascript"> var url = "GetCustomerData.php?id="; // The server-side script function handleHttpResponse() { if (http.readyState == 4) { if(http.status==200) { var results=http.responseText; document.getElementById('divCustomerInfo').innerHTML = results; } } } function requestCustomerInfo() { var sId =10; document.getElementById("txtCustomerId").value; http.open("GET", url + escape(sId), true); http.onreadystatechange = handleHttpResponse; http.send(null); } function getHTTPObject() { var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); if (!xmlhttp){ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlhttp; } var http = getHTTPObject(); </script> </head> <body> <a href="getCustomerData.php?id=10&onclick="requestCustomerInfo();return false;">Show Me</a> <div id="divCustomerInfo"></div> </body> </html>
…
And my PHP file just flashes the suceess message:
getCustomerData.php
<?php echo "Success" ?>
You placed the anchor onclick event inside the href attribute. onclick should be written as a separate attribute:
To prevent the link from redirecting the page, you need to stop the click event from executing the link default action. Inside your function call: