I am experiencing an issue where I am unable to get a value from a div and send it to the database. It was working fine on my localhost, but after uploading the source code to my host, it has stopped functioning properly.
Upon inspecting the console, I encountered the following error:
Uncaught TypeError: Cannot set property 'innerHTML' of null index.php:700
request.onreadystatechange
The AJAX function is implemented on the same page where the div elements are located.
<script type="text/javascript">
// Function to create XMLHttpRequest object based on browser compatibility
function get_XmlHttp() {
var xmlHttp = null;
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// Function to send data to a PHP file via POST method and display the response
function ajaxrequest(php_file, tagID) {
var request = get_XmlHttp();
var the_data = 'pg='+document.getElementById('template').innerHTML;
var the_data2 = 'memid='+document.getElementById('memid').innerHTML;
var the_data3 = 'proid='+document.getElementById('proid').innerHTML;
var the_data4 = 'taipei='+document.getElementById('taipei').innerHTML;
request.open("POST", php_file, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var post_data = the_data + '&' + the_data2 + '&' + the_data3 + '&' + the_data4;
request.send(post_data);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(tagID).innerHTML = request.responseText;
}
}
}
</script>
Below are the div elements:
<div id="template"> some html here </div>
<div id="memid" style="display:none;">4</div>
<div id="proid" style="display:none;">55</div>
<div id="taipei" style="display:none;">sav</div>
Button triggering the AJAX request:
<button value="sasasasasa" onclick="ajaxrequest('temp1.php', 'context')"></button>