Ajax function not working

Question

Hello,

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

That might be because you button is "submit" type, that automatically submits form.. and your ajax request is also actually goes, in parallel. Results depends on which page your 'sigup' element is located.

Please try to replace "button" with "button" and try again.

Answer 2

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.

Answer 3

Make it the onsubmit handler, and add a return false; to disable the redirect.

<form name="myform" onsubmit='ajaxFunction()'>
                <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"/>
            </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){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 name = document.getElementById('name').value;
var message = document.getElementById('message').value;
var queryString = "?email=" + encodeURIComponent(email);
queryString += "&name=" + encodeURIComponent(name);
queryString += "&message=" + encodeURIComponent(message); //included other parameters
ajaxRequest.open("GET", "/sign_up/sign_up_test.php" + queryString, true);
ajaxRequest.send(null);
return false;
}

maybe.