Question

My goal is to submit an entire form through an ajax function which will then send those values to a php file. I’m using Post for several reasons – one being that I will be changing data within a MySQL database.

I’ve seen a few examples while I was searching for an answer, but none of them seem to have addressed the issue I’m having directly.

For instance, this example:

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

// Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

// Call a function when the state changes.
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

starts to address it.

To be specific, I am not sure how to go about sending multiple values. In the example I found above, I see that they hard coded two values into their statement in the variable params. I’m wanting to know how to pass those values to the function without having to hard code them.

My form:

<table border="0" cellpadding="2" cellspacing="5">
    <th colspan="2" align="center">Check Out</th>
    <form name="checkOut" method="post" onSubmit="return(validate(this))"> 
        <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>Special Campaign</td>
            <td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/></td>
        </tr>
        <tr>
            <td><input type="button" onClick="clearForm()" value="Reset" /></td>
            <td><input type="submit" value="Check Out" /></td>
        </tr>
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
</table>

Here, I want to pass the values of numberOut, fName, lName, and specialC. I know how to pass each of them individually, but not as a group. Ultimately, I want to then be able to access those value through php with $_POST[‘fName’] for instance.

From seeing several answers to similar questions on this site, a number of people say to use jQuery. I’m aware that it is easier, but I want to learn to use ajax first as I’m new to web-based languages.

Answer 1

You will have to create the params

Here is a sample code for you

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";
}