为什么我的Ajax加载两次相同的功能？

Question

I'm trying to create a subscription form which basically let's you select a game, then load's a bunch of subscription prices for that game. Up to this point, everything works perfectly. The problem is, when I try to input 3 radio buttons to select payement for 1 month/ 6 months/ 1 year, the function that I call with ajax onchange="" in the dropdown seems to load twice, and the content is not accessed.

The first time, it works perfectly, it echo's the information, and calculates everything. but the second time, it just gives me a php error.

I've figured out what happens, it call's the function once, with the requested subscription price id (alert(planId);), and it echo's perfectly as I wanted it. Then it just calls the function again, but the alert(planId); returns me undefined, and echo's a new row (which was meant to happen) with the error code, saying that the sql request failed because of line 78.

Which brings me back to my question, why does AJAX call the function twice?

var xhr = {
    planData:function(){
        if (httpRequest.readyState==4) {
            if (httpRequest.status==200) {
                document.getElementById('plan_select').innerHTML = 'ready';
                var price = httpRequest.responseText;
                //alert(price);
                var six = 6*parseInt(price);
                var year = 12*parseInt(price);
                if (document.getElementById('diff')) {
                    var ctnt = '';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="one" />&nbsp;';
                    ctnt += 'Month to month subscription plan ($'+price+' USD per month) &nbsp;';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="six" />&nbsp;';
                    ctnt += 'Six months subscription plan ($'+six+' USD per 6 months) &nbsp;';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="year" />&nbsp;';
                    ctnt += 'One year subscription plan ($'+year+' USD per year)';
                    document.getElementById('diff').innerHTML = ctnt;
                } else {
                    var yearPrices = document.getElementById('order').insertRow(3);
                    var cell = yearPrices.insertCell(0);
                    cell.id='diff';
                    cell.colSpan = 3;
                    var ctnt = '';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="one" />&nbsp;';
                    ctnt += 'Month to month subscription plan ($'+price+' USD per month) &nbsp;';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="six" />&nbsp;';
                    ctnt += 'Six months subscription plan ($'+six+' USD per 6 months) &nbsp;';
                    ctnt += '<input class="radio" type="radio" name="typeOfPlan" value="year" />&nbsp;';
                    ctnt += 'One year subscription plan ($'+year+' USD per year)';
                    cell.innerHTML = ctnt;
                }
            }
        }
    },
    updatePrice:function(planId){
        alert(planId);
        xhr.ajaxCall('GET', 'requests.php?action=getprices&planId='+planId, null, true, xhr.planData);
    },
    ajaxCall:function(method,url,postData,async,handler) {
        httpRequest = new XMLHttpRequest();
        httpRequest.open(method,url,async);
        if (postData != null)
            httpRequest.setRequestHeader("Content-Type","x-www-form-urlencoded");
        if (async)
            httpRequest.onreadystatechange = handler;
        httpRequest.send(postData);
    }
};

This is the part of the code, you'll see the alert(planId); in the updatePrice function.

Here's a link to the actual working thing: http://www.nitroflox.com/temp/

Answer 1

I just looked at your supplied link. You are calling the updatePrice function twice:

onchange="xhr.updatePrice(xhr.updatePrice(this.options[this.selectedIndex].value))

Change to:

onchange="xhr.updatePrice(this.options[this.selectedIndex].value)

Let me know if it works.