HTML-форма для вызова PHP с использованием AJAX - PullRequest
1 голос
/ 25 февраля 2012

Я пытаюсь POST и ввести адрес электронной почты из HTML-формы в PHP-скрипт, чтобы сохранить результат в базе данных. Сценарий также отвечает за выдачу сообщения об ошибке, если пользователь вводит неверный адрес электронной почты и т. Д. Я хотел бы, чтобы весь процесс включал вызов AJAX, чтобы страница не перезагружалась каждый раз, когда пользователь нажимает кнопку подтверждения. кнопка на форме.

На данный момент, каждый раз, когда пользователь нажимает кнопку отправки формы, страница обновляется, и я получаю ответ от вызова ajax, но он немедленно перезаписывается из-за обновления.

Вот мой HTML и Javascript / ajax:

<div id="emailform">
<form method="post"><!--action="planethome.php"-->
<input class="emailinput" type="text" name="email" maxlength="80" placeholder="enter your email address"/>
<input class="submitemailbutton" name="send_button" type="submit" value="Send" onClick="ajaxFunction()/>
<input type="hidden" name="submitted" value="TRUE"/>
</form>
</div>

<div id="errororsuccess">
</div>


<!--ajax stuff:---------------------------------->


<script language="javascript" type="text/javascript">
//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("Ajax is struggling in your browser.");
                return false;
            }
        }
    }

    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){

            document.getElementById('errororsuccess').innerHTML = ajaxRequest.responseText;     

            }
    }

    // Create a function that will receive data sent from the server
    ajaxRequest.open("POST", "addemailtodatabase.php", true);
    ajaxRequest.send(null); 
}

и вот мой PHP:

<?php

    require_once ('planetconfig.php');

    if (isset($_POST['submitted'])) { /

        require_once (MYSQL);

        $email = FALSE;


        $trimmed = array_map('trim', $_POST);


        if (!empty($_POST['email'])) 
        {

            if (preg_match('/^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[@][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$/',$_POST['email'])) {

                $email = mysqli_real_escape_string ($dbc, $trimmed['email']);

            } else {
                echo "Invalid";         
            }

        } else {
                echo "You need to enter an email address";

        }


        if ($email) { 

            $q = "INSERT INTO planetemail (email, time) VALUES (AES_ENCRYPT('$email', 'password'), NOW())";

            $r = mysqli_query ($dbc, $q) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));

            if (mysqli_affected_rows($dbc) == 1) { 

                echo "Thanks, we'll be in touch";

                exit();

            } else { 
                echo '<p class="error">We\'re sorry, something has gone wrong.</p>';
            }
        }

    mysqli_close($dbc);

} 
?>

Я уверен, что это как-то связано с моим методом POST или с настройкой моего вызова ajax.

Я новичок во всем этом, может кто-нибудь сказать мне, что я делаю неправильно, или предложить лучшую реализацию. У меня есть срок завтрашнего утра, чтобы сделать это.

Ответы [ 4 ]

3 голосов
/ 25 февраля 2012

Вы проблема в том, что вы используете кнопку отправки. Кнопка отправки отправит форму, изменит ее с type = "submit" на type = "button", и она сработает, и, как предложил @juzerali, используйте jQuery, этот код вредит моей голове.

2 голосов
/ 25 февраля 2012

1-й, да, это ужасно, используйте jquery.2-й, хотя вы связали ajax-вызов нажатием кнопки отправки, вы не помешали выполнению поведения по умолчанию.Форма все равно будет отправлена ​​обычным способом.

0 голосов
/ 26 февраля 2012

return false; в конце скрипта, чтобы предотвратить его отправку обычным способом.

0 голосов
/ 25 февраля 2012
if (isset($_POST['submitted'])) { /

В вашем коде есть паразит.

Кроме того, измените type = "submit" на type = "button"

Обработчик события onClick заберет отправкупотому что вы делаете запрос AJAX, не нужно POST.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...