Блог

Главная - Вопросы по программированию - модальное всплывающее окно отображает различный текст в зависимости от ввода

модальное всплывающее окно отображает различный текст в зависимости от ввода

#javascript #jquery #conditional

#javascript #jquery ( jquery ) #условный

Вопрос:

Итак, я пытаюсь создать модальное всплывающее окно, которое отображает два сообщения в зависимости от того, что пользователь вводит в текстовое поле. Я хочу, чтобы скрипт проверял, содержит ли ввод одну из двух строк, либо ME, либо TN (поскольку я рассматриваю возможность проверки почтового индекса).

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

Вот ссылка на то, что у меня есть до сих пор (представьте, что значок закрытия находится в правом верхнем углу)..

 $(document).ready(function () {

    var formResult = $('#postcode-form')
    var postcodeMe = /^[me] $/;

    $("#postcode-form").click(function () {
        if (formResult.val().indexOf(postcodeMe)) {
            $("#basic-modal-content").html("<h2>Yes it works</h2>")
        } else {
            $("#basic-modal-content").html("<h2>no its wrong</h2>")
        }
    });
});

http://www.muchmorecreative.co.uk/modal_test/basic-modal-testing-jquery-conditions/

Комментарии:

1. Есть ли причина, по которой вы не просто используете $(‘#postcode-input’).val(), чтобы получить значение почтового индекса?

Ответ №1:

попробуйте это:

 $(document).ready(function() {


var formResult =  $('#postcode-form')
var postcodeMe= /^[me] $/;

$( "#postcode-form" ).click(function(e) {

e.preventDefault();

if ($(this).val().contains(postcodeMe)){

    $( "#basic-modal-content").html("<h2>Yes it works</h2>")

}
    else {

    $( "#basic-modal-content").html("<h2>no its wrong</h2>")    
    }

});
});

Ответ №2:

Проблема в том, что вы устанавливаете formResult как «глобальную» переменную (вроде). Оно получает свое значение при загрузке страницы и никогда не меняется. Вы должны изменить свой код, чтобы получить значение, когда оно вам действительно нужно, а не сразу после загрузки страницы.

 $(document).ready(function () {
    var postcodeMe = /^[me] $/;

    $("#postcode-form").click(function () {
        //move it to here so that you get the value INSIDE the click event
        var formResult = $('#postcode-form')

        if (formResult.val().indexOf(postcodeMe)) {
            $("#basic-modal-content").html("<h2>Yes it works</h2>")
        } else {
            $("#basic-modal-content").html("<h2>no its wrong</h2>")
        }
    });
});

Несколько других второстепенных моментов, которые следует учитывать:

indexOf возвращает число. Вероятно, вам следует выполнить indexOf(postcodeMe)> = 0

Вы можете посмотреть индекс ЗДЕСЬ

Ответ №3:

Попробовали эти два, но не получилось, поиграли с этим и нашли решение..

 $(document).ready(function() {



var formResult =  $('#postcode-input')

 $( "#postcode-button" ).click(function(e) {

 e.preventDefault();


 if ($('#postcode-input').val().indexOf("ME")!==-1 || $('#postcode- input').val().indexOf("me")!==-1 ){
// perform some task
 $( "#basic-modal-content").html("<h2>Yes it works</h2>")
  }

else {

$( "#basic-modal-content").html("<h2>no its wrong</h2>")    
}

 });
 });

Спасибо за помощь, хотя!

Метки: