Question

I’m developing a form that submits several user inputs to a database via post and handled by php. In order to do so, I’m using ajax (I know jquery is sometimes easier, but I’d prefer to get a grasp on ajax first).

However, it is not working properly – namely that it doesn’t work at all. I know for a fact that the php file works fine when the form isn’t passed through ajax.

Here’s what I have right now – the form itself:

<table border="0" cellpadding="2" cellspacing="5">
                <th colspan="2" align="center">Check Out</th>
                <form name="checkOut" method="post" onSubmit="return(validate(this))" action=""> 
                    <tr><td>Territory Number</td><td><input type="text" name="numberOut" tabindex="1" maxlength="3" size="3" /></td>
                    </tr><tr><td>First Name of Publisher</td><td><input type="text" onKeyUp="showHint(this.value)" name="fName" tabindex="2" maxlength="15"/></td>
                    </tr><tr><td>Last Name of Publisher</td><td><input type="text" onKeyUp="showHint_l(this.value)" name="lName" tabindex="3" maxlength="15" /></td>
                    </tr><tr><td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/> Special Campaign</td>
                    </tr><tr><td><input type="button" onClick="clearForm()" value="Reset" /></td><td><input type="submit" value="Check Out" /></td>
                </form>
                <p>Suggestions: <span id="txtHint"></span></p>
            </table>

The javascript/ajax handler function:

<script type="text/javascript">
        function validate(form)
        {
            fail = validateTerrNum(document.checkOut.numberOut.value);
            fail += validateFirstName(document.checkOut.fName.value);
            fail += validateLastName(document.checkOut.lName.value);
            if (fail == "")
            {
                //Begin preparing values for submission to server
                var params = "numberOut="+document.getElementsByName("numberOut")[0].value;
                    params+="?fName="+document.getElementsByName("fName")[0].value;
                    params+="?lName="+document.getElementsByName("lName")[0].value;
                var isSc = document.getelementsByName("specialC")[0].checked;
                if(isSc)
                {
                    params+="?specialC=Yes";
                }

                //Send those values to the server
                checkOut(params);
                return true;            
            }           
            else 
            {
                alert(fail);
                return false;
            }
        }
    </script>

And finally the ajax function via post:

function checkOut(params)
{
var urlString = params;
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("test").innerHTML=xmlhttp.responseText; 
    }
}
//Setup for post submission 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.open("POST","checkOut.php",true);
xmlhttp.send(urlString);
}

My suspicion is that I’m not submitting the post request correctly. I’ve had other ajax functions work with this form correctly, but it was through get – and I do want to use post because it is changing data in the database.

If anyone has some insight on this, it would be appreciated.

Edit: New Form with general button:

<table border="0" cellpadding="2" cellspacing="5">
                <th colspan="2" align="center">Check Out</th>
                <form name="checkOut" method="post" action=""> 
                    <tr><td>Territory Number</td><td><input type="text" name="numberOut" tabindex="1" maxlength="3" size="3" /></td>
                    </tr><tr><td>First Name of Publisher</td><td><input type="text" onKeyUp="showHint(this.value)" name="fName" tabindex="2" maxlength="15"/></td>
                    </tr><tr><td>Last Name of Publisher</td><td><input type="text" onKeyUp="showHint_l(this.value)" name="lName" tabindex="3" maxlength="15" /></td>
                    </tr><tr><td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/> Special Campaign</td>
                    </tr><tr><td><input type="button" onClick="clearForm()" value="Reset" /></td><td><input type="button" onClick="return(validate(this))" value="Check Out"/></td>
                </form>
                <p>Suggestions: <span id="txtHint"></span></p>
            </table>

Answer 1

You have to cancel the form submit if you’re posting the data via ajax, otherwise the form will submit and that may cancel your ajax request.

Also you have to call setRequestHeader after you call open