Question

I have a contact form i want to use Ajax for.

My contact.php script works fine, and the query string is being built fine, but when i click submit button, the page just refreshes and shows the query string in the url bar after index.php, not contact.php

this is my code:

<form name="myform">
                <input class="field" id="name" name="name" type="text" />
                <label for="name">Name *</label>

                <input class="field" id="email" name="email" type="text" />
                <label for="email">E-mail *</label>

                <label class="large" for="message">Message *</label>
                <textarea id="message" name="message" cols="10" rows="10"></textarea>

                <input class="submit" type="submit" value="Submit" onclick='ajaxFunction()'/>
            </form> 

<!-- 

//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('signup');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}
var email = document.getElementById('email').value;
var queryString = "?email=" + email;
ajaxRequest.open("GET", "/sign_up/sign_up_test.php" + queryString, true);
ajaxRequest.send(null); 

}

//–>

Any ideas?

Answer 1

put a return false on your submit button

<input class="submit" type="submit" value="Submit" onclick='ajaxFunction(); return false;'/>

your code is submitted on ajax but is also submitted on submit since you are not preventing your form not be submitted, putting return false on onclick event prevents your form to be submitted on the action given in the form, in this case in the same page since you did not put an action to your form. that’s why you see the input fields as query string in your url.