Форум

TRIGUN · #1 (**permalink**) 16.05.2015, 15:20

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

ЧТО НУЖНО:
Чтобы сообщение о проверке выводилось не в виде всплывающего окна, а сразу под самой формой в виде "Да, код верный" и "Нет, код не верный". И без перезагрузки окна конечно же.

vvkk · #2 (**permalink**) 16.05.2015, 15:41

Заменить alert на следующий код

document.createElement('div')&&div.innerHTML = "Наши купоны: " + array + ". Купона №" + object + " нет в массиве.";

Также со вторым alert

TRIGUN · #3 (**permalink**) 16.05.2015, 15:56

Сообщение от vvkk

Заменить alert на следующий код

document.createElement('div')&&div.innerHTML = "Наши купоны: " + array + ". Купона №" + object + " нет в массиве.";

Также со вторым alert

Хм. Вообще скрипт перестает работать и выдает ошибку "Invalid left-hand side in assignment".
Да и собственно само сообщение не должно содержать список существующих кодов. Только по факту "Да, такой есть" или "Нет, такого нету".
Могли бы помочь с этим?

рони · #4 (**permalink**) 16.05.2015, 16:04

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>

vvkk · #5 (**permalink**) 16.05.2015, 16:06

Свой Skype в личку

Форум

Справочник

Discord чат

Курсы javascript