Можно ли сохранить данные формы без отправки пользователем формы?

Question

Я пытаюсь создать форму регистрации/регистрации. Я хочу иметь одно поле формы. Когда пользователь вводит свой адрес электронной почты в поле, адрес электронной почты проверяется на базе пользовательской базы данных. Если электронное письмо найдено в базе данных пользователя, отображается поле пароля, и пользователь регистрируется после ввода пароля.

Если электронное письмо не было найдено в базе данных пользователя, отображается форма создания учетной записи. Введенное электронное письмо затем сохраняется в автоответчике (почтовый шимпанзе) автоматически, когда пользователь продолжает создавать свою учетную запись в этот момент или нет.

Как я могу это сделать, используя JS/jQuery?

В качестве отправной точки я думал, что я могу сделать что-то вроде этого:

<input onchange="checkDatabase();" onkeyup="this.checkDatabase();" onpaste="this.checkDatabase();" oninput="this.checkDatabase();"> 

Однако срабатывает событие на каждое нажатии клавиши, которые будут давать ложные срабатывания, пока весь адрес электронной почты не введен. Как я могу написать этот код, чтобы он срабатывал только после того, как он обнаружил «.com» (плюс любые другие имена TLD, которые я добавляю)

Answer 1

использовать ajax, чтобы сделать вещь.

function load(id,url,type,data,json,callback) { 
    var xmlhttp; 

    (window.XMLHttpRequest)?xmlhttp = new XMLHttpRequest():xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

    xmlhttp.onreadystatechange=function() { 
     if(xmlhttp.readyState==4 && xmlhttp.status==200) { 
      ((id != "")?(document.getElementById(id).innerHTML = xmlhttp.responseText):(((json == true)?(callback(JSON.parse(xmlhttp.responseText))):(callback(xmlhttp.responseText))))); 
     } 
    } 

    xmlhttp.open(type,url,true); 

    if(type == "POST") { 
     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
     xmlhttp.send(data); 
    } else { 
     xmlhttp.send(); 
    } 

} 

затем просто назвать его, когда пользователь вводит в поле

window.onload = function() { 
    document.getElementById('email-field').addEventListener('keyup',function() { 
     load("","php/check_password.php","POST","email="+document.getElementById('email-field').value+"",false,function(data) { 
       if (data === true) { 
       document.getElementById('password-field').style.display = "block"; 
       document.getElementById('create-account-form').style.display = "none"; 
       } else { 
       document.getElementById('create-account-form').style.display = "block"; 
       document.getElementById('password-field').style.display = "none"; 
       } 
     }); 
    }); 
}; 

db_config.php:

<?php 

    DEFINE("HOST","localhost");       // Host Name 
    DEFINE("USER","root");        // Database Username 
    DEFINE("PASSWORD","");        // Database Password 
    DEFINE("DATABASE","db_osgamdrp");     // Database Name 
    DEFINE("TIMEZONE","Asia/Manila");     // Server Timezone 

?> 

db_connect.php:

<?php 

    include_once "db_config.php"; 

    date_default_timezone_set(TIMEZONE); 

    class Connection { 
     function con() { 

      $con = mysqli_connect(HOST,USER,PASSWORD,DATABASE); 

      if (!$con) { 
       die("Error :" . mysqli_error()); 
      } 

      return $con; 
     } 
    } 

?> 

check_password.php

Answer 2

То, что вы ищете, называется XHR или AJAX.

XMLHttpRequest (XHR) - это API, доступный для языков сценариев веб-браузера, таких как JavaScript. Он используется для отправки HTTP или HTTPS-запросов на веб-сервер и загрузки данных ответа сервера обратно в скрипт. 1 Разрабатываемые версии всех основных браузеров поддерживают схемы URI, помимо HTTP и HTTPS, в частности, BLOB URL-адреса поддерживаются

JQuery имеет форму проверки плагинов можно использовать и найти после быстрого поиска Google.

В качестве альтернативы вы можете попробовать что-то вроде примера this. Я изменил его работать на всех основных браузерах:

<script type="text/javascript"> 
function validateEmail(semail) { 
document.body.style.cursor='wait'; 
// Create an instance of the XML HTTP Request object 

var oXMLHTTP; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    oXMLHTTP=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    oXMLHTTP=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

// Prepare the XMLHTTP object for a HTTP POST to our validation ASP page 
var sURL = "http://mysite/mypath/validateemail.asp?email=" + semail 
oXMLHTTP.open("POST", sURL, false); 
// Execute the request 
oXMLHTTP.send(); 
if (oXMLHTTP.responseText == "exists") 
alert("Sorry - the Email " + semail + " already exists."); 
document.body.style.cursor='auto'; 
} 
</script> 

Тогда просто ваш скрипт на стороне сервера отвечают «существует», если адрес электронной почты существует.