Функция Ajax не работает

Question

У меня есть контактная форма, для которой я хочу использовать Ajax.

Мой скрипт contact.php работает нормально, и строка запроса строится нормально, но когда я нажимаю кнопку отправки, страница просто обновляется ипоказывает строку запроса в строке URL после index.php, а не contact.php

, это мой код:

<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> 

<!-- 

// Код поддержки браузера function ajaxFunction () {var ajaxRequest;// Переменная, которая делает возможным Ajax!

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); 

}

// ->

Есть идеи?

Answer 1

поставить возврат false на кнопку отправки

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

ваш код отправляется в ajax, но также отправляется при отправке, так как вы не препятствуете отправке вашей формы, добавление return false в событие onclick предотвращает отправку вашей формы на действие, указанное в форме, в данном случае на той же странице, так как вы не поместили действие в вашу форму. вот почему вы видите поля ввода в виде строки запроса в вашем URL.

Answer 2

Сделайте его обработчиком onsubmit и добавьте return false;, чтобы отключить перенаправление.

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

возможно.

Answer 3

Это может быть потому, что ваша кнопка имеет тип «submit», который автоматически отправляет форму ... и ваш ajax-запрос также выполняется параллельно.Результаты зависят от того, на какой странице находится ваш элемент 'sigup'.

Пожалуйста, попробуйте заменить "кнопку" на "кнопку" и повторите попытку.