Поиск числа из массива (доработка скрипта)
Здравствуйте. Прошу помочь с доработкой скрипта.
Собственно сам скрипт устанавливается на обычной 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, время: 04:04. |