我的onclick事件是在页面加载时执行的，而不是在单击按钮时执行的，我不知道为什么

Question

    function ajax_post() {

    var xmlhttp=new XMLHttpRequest();
    var working='working';
    xmlhttp.open("POST","process_form.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            // success
            var return_data = xmlhttp.responseText;
            document.getElementById("status").innerHTML = return_data;
        }
    }

xmlhttp.send(working);
alert("The ajax function is running!");
document.getElementById("status").innerHTML = "Processing. Please wait...";

}

var costButton = document.getElementById('cost-value');

costButton.onclick = ajax_post();

I'm trying to learn how to take a variable from javascript and send it to a separate php file for processing (i'm gonna put this in a database). My first problem seems to be that rather than the function running when i click on my cost-value button, it runs when the page loads, and the second problem appears to be that the variable i try to send (working) doesn't actually get sent. This is very new to me. Any solutions?

Answer 1

You're setting the onclick to the return value of the function, since you're executing the function with the parenthesis. Remove the () from the onclick and it will work as expected.

costButton.onclick = ajax_post; 

In order for this to work you need to make sure either:

This script appears just before the closing body tag </body>
or you wrap it in a callback for when the document is ready for JS.

 document.addEventListener("DOMContentLoaded", function() {
   // Your code here
 })