Как проверить поле из базы данных с помощью jquery и показать проверку или кросс?

Question

У меня есть страница, и я спрашиваю их почтовый индекс. Пока они заполняют форму сразу после того, как они закончили писать 5 чисел почтового индекса, она проверит, покрыта ли она из моей базы данных, и покажет галочку или крестик рядом с ней, и отключит отправку.

Подводя итог.

1. будет ждать, пока посетитель введет 5-значный почтовый индекс (если мы сможем проверить, вводит ли клиент только номер, это будет плюсом и здорово)
2. Он проверит, находится ли он в базе данных (я не прошу часть php. Возможно, мы отправим его как POST в файл php)
3. Если он существует в базе данных, он покажет флажок, иначе он покажет крестик и не позволит отправить форму.

Я проверил некоторые сайты, но не смог найти точное решение.

Спасибо

Answer 1

Возможно, вам нужен тег изображения, кроме текстового поля почтового индекса с атрибутом src, установленным на невидимое изображение. Затем выполните ajax для события blur.

HTML:

<input type="text" id="zip" name="zip">&nbsp;<img id="imgconf" src="images/blank.png">

Javascript:

$('#zip').blur(function() {
   $.ajax({
     url: "script.php",
     type: "POST",
     data: "zip=" + $('#zip').val(),
     dataType: "text",
     success: function (data){
         if (data=="1"){
            $('#imgconf').attr("src", "images/correct.png");
         } else {
            $('#imgconf').attr("src", "images/wrong.png");
         }
       }
     });
});

Для числовой проверки вы можете использовать тот же PHP-скрипт, чтобы вернуть другой флаг, кроме «1», и отобразить его в другом элементе span, что введенные данные не являются числовыми. Просто добавьте еще одну пару ключ-значение в часть данных, возможно.

Answer 2

Вам нужно будет использовать AJAX.JQuery имеет встроенную функцию AJAX.На каждом событии keyup вы можете запустить эту функцию AJAX.PHP должен возвращать значение 1 или 0, чтобы упростить его.1, очевидно, соответствует, а 0 не соответствует.

$('#YourObjectID').keyup(function (event) {
    searchZips();
})

function searchZips()
{

    var myJSON = $.ajax({
        url: options.script + '?Q=' + curValue,
        type: 'POST',
        contentType: 'application/json',
        success: function (msg) {
            if(msg==="1"){
                // CODE TO SHOW YOUR X DIV
            }
        }

}

Вы также захотите добавить функциональность при очистке поиска, проверке нулевой или пустой строки и т. Д., И т. Д., Но этоосновы, которые должны помочь вам.Я использую это все время.Как только вы это освоите, это ОЧЕНЬ полезно.Затем посмотрите на создание плагина jQuery.Как только вы сможете выполнить вышеуказанную функциональность, вы можете встроить ее в плагин (с кучей классных опций!) УДАЧИ и счастливого программирования.