Как получить значение с input'ов?

224

12 декабря 2016, 10:05

Есть 10 input'ов:

<form action="method_post.php" method="post" style="width: 500px;">
    <div id="picker" style="float: right;"></div>
    <div class="form-item">
        <label for="color1">Цвет 1:</label>
        <input type="text" id="color1" name="color1" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color2">Цвет 2:</label>
        <input type="text" id="color2" name="color2" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 3:</label>
        <input type="text" id="color3" name="color3" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 4:</label>
        <input type="text" id="color4" name="color4" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 5:</label>
        <input type="text" id="color5" name="color5" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 6:</label>
        <input type="text" id="color6" name="color6" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 7:</label>
        <input type="text" id="color7" name="color7" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 8:</label>
        <input type="text" id="color8" name="color8" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 9:</label>
        <input type="text" id="color9" name="color9" class="colorwell" value="#eadc9a" />
    </div>
    <div class="form-item">
        <label for="color3">Цвет 10:</label>
        <input type="text" id="color10" name="color10" class="colorwell" value="#eadc9a" />
    </div>
    <input type="submit" value="Отправить">
</form>

И есть скрипт:

$(document).ready(function() {
    var f = $.farbtastic('#picker');
    var p = $('#picker').css('opacity', 0.25);
    var selected;
    $('.colorwell')
    .each(function () { f.linkTo(this); })
    .focus(function() {
        if (selected) {
            $(selected).removeClass('colorwell-selected');
        }
        f.linkTo(this);
        p.css('opacity', 1);
        $(selected = this).addClass('colorwell-selected');
    });
    $('.colorwell').on('input', function () {
        console.log($(this).val());
    });
});

Мне нужно получить значение input'a, а потом с помощью .css применить этот цвет для ссылок или фонов определенных div.

Проблема в том, что мой способ:

$('#color1').on('input', function () {
    console.log($(this).val());
});

Работает только когда добавляешь/удаляешь что либо в input (то есть по клику). А у меня цвет добавляется с помощью скрипта (color picker). http://ssmaker.ru/1d2e1691.jpg

http://jsfiddle.net/43htgf7p/

Answer 1

Предположу, что вам нужно вручную вызывать событие change. Замените в этом коде:

// Change linked value
$(fb.callback).each(function() {
  if (this.value && this.value != fb.color) {
    this.value = fb.color;
  }
});

это

    this.value = fb.color;

на это:

    this.value = fb.color;
    $(this).trigger('change');

После этого событие change срабатывает:

$('.colorwell').on('change', function () {
    console.log($(this).val());
});

Answer 2

У вас ошибка в ивенте, попробуйте 'keydown'

$('.colorwell').on('keydown', function () {
        console.log($(this).val());
    });

http://jsfiddle.net/gdxzvkmw/

Вот список стандартных ивентов http://www.w3schools.com/js/js_events.asp берем оттуда, к примеру, 'onclick' и пишем с jquery

$('.colorwell').on('click', function () {
        console.log($(this).val());
    });

Answer 3

Не могу коментарием написать а не ответом(( Собственно вам уже написали что событие стоит использовать не 'input' или 'keydown' а 'change'

$('.colorwell').on('change', function () {
        console.log($(this).val());
    });

Answer 4

Mетод linkTo может принимать не только DOM-элемент, но и функцию, которая вызывается при каждом изменении. Я использовал эту возможность на вашем примере. Вот ссылка