Поиск числа из массива (доработка скрипта)
Здравствуйте. Прошу помочь с доработкой скрипта.
Собственно сам скрипт устанавливается на обычной HTML страничке. Есть список определенных кодов (купонов) и в итоге нужна форма для проверки этих кодов на подлинность (соответствие). Вот что есть на данный момент (скрипт + css + сама форма): $(function () { var array = [123, 1234, 12345], $input = $('[data-type="search"]'), $button = $('[data-action="search"]'); $button.on('click', function(e) { var object = parseInt($input.val()), answer = $.inArray(object, array); if ( answer == '-1' ) { alert("Наши купоны: " + array + ". Купона №" + object + " нет в массиве."); } else { alert("Наши купоны: " + array + ". Купон №" + object + " есть в массиве под номером " + answer + '.'); } e.preventDefault(); }); }); @import "compass/css3"; body{ background: #f0f0f0; } .form-container{ padding: 20px; } .form{ width: 300px; margin: 0 auto; padding: 20px; background: #fff; } .form-field, .form-label, .form-submit{ display: block; } .form-input, .form-submit{ width: 100%; padding: 10px; } .form-input{ box-sizing: border-box; margin: 10px 0; } <div class="form-container"> <form class="form"> <label class="form-field"> <span class="form-label">Введите номер купона:</span> <input class="form-input" type="text" data-type="search"> </label> <button class="form-submit" data-action="search">Найти</button> </form> </div> Или же как вариант ссылка на codepen http://codepen.io/dpismenny/pen/VLLNgw ЧТО НУЖНО: Чтобы сообщение о проверке выводилось не в виде всплывающего окна, а сразу под самой формой в виде "Да, код верный" и "Нет, код не верный". И без перезагрузки окна конечно же. |
Заменить alert на следующий код
document.createElement('div')&&div.innerHTML = "Наши купоны: " + array + ". Купона №" + object + " нет в массиве."; Также со вторым alert |
Цитата:
Да и собственно само сообщение не должно содержать список существующих кодов. Только по факту "Да, такой есть" или "Нет, такого нету". Могли бы помочь с этим? |
TRIGUN,
раздел работа - требуется указать сумму и надеюсь вы понимаите что любой может увидеть нужные номера и такую проверку лучше делать на сервере. <!DOCTYPE html><html class=''> <head><meta charset='UTF-8'> <style class="cp-pen-styles"> body { background: #f0f0f0; } .form-container { padding: 20px; } .form { width: 300px; margin: 0 auto; padding: 20px; background: #fff; } .form-field, .form-label, .form-submit { display: block; } .form-input, .form-submit, .form-span { width: 100%; padding: 10px; } .form-input, .form-span{ box-sizing: border-box; margin: 10px 0; } .form-span { display: inline-block; border: #ABADB3 1px solid; text-align: center; } </style></head><body> <div class="form-container"> <form class="form"> <label class="form-field"> <span class="form-label">Введите номер купона:</span> <input class="form-input" type="text" data-type="search"> </label> <button class="form-submit" data-action="search">Найти</button> </form> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function () { var array = [ 123, 1234, 12345 ], $input = $('[data-type="search"]'), $button = $('[data-action="search"]'); $button.on('click', function (e) { var object = parseInt($input.val()), answer = $.inArray(object, array), text, span; if (answer == '-1') { text = 'Нет, код не верный'; } else { text = 'Да, код верный'; } span = $(this).next().length ? $(this).next() : $('<span/>' , {"class" : "form-span"}).insertAfter(this); span.text(text); e.preventDefault(); }); }); </script> </body></html> |
Свой Skype в личку
|
Часовой пояс GMT +3, время: 14:12. |