Jquery сложная привязка данных к полям ввода - PullRequest
0 голосов
/ 15 августа 2011

Я пытаюсь добавить некоторые Jquery функционалы в мою форму.

Хочу я хочу сделать:

.greenDiv является стандартным и должен иметь непрозрачность 100% При нажатии .blackDiv или .redDiv .greenDiv должен иметь непрозрачность 50%. И выбранный div должен иметь непрозрачность 100%, а остальные 50%.

У меня есть это в моем Jquery:

$('#webhost_navn').data('myData', 'i');

Вместо этого я хочу выбрать ближайший входной файл без добавленной «информации» и привязать к нему данные.

И при отправке все данные, которые связаны с входами, должны быть сохранены.

Пример:

I пользователь нажимает на .redDiv данные, которые я добавляю в ближайший входной файл без информации, добавленной к его имени.

Пользователь щелкает другое поле ввода с помощью .blackDiv, и p добавляется в поле ввода без слова «добавлено к его имени».

Когда пользователь отправляет форму, i и p добавляются в правильные поля ввода.

Мой Jquery:

$('.redDiv').click(function() {
    $('#webhost_navn').data('myData', 'i');
});
$('.greenDiv').click(function() {
    $('#webhost_navn').data('myData', null);
});
    $('.blackDiv').click(function() {
    $('#webhost_navn').data('myData', 'p');
});

$('#smt').click(function() {
    var myData = $('#webhost_navn').data('myData'),
        val = $('#webhost_navn').val();
    if (myData) {
        $('#webhost_navn').val(myData + val);
    }
});

Мой HTML:

<div class="input numeric integer optional"><label for="company_ekstratrafik" class="integer optional"> Pris pr.</label><input type="number" step="1" size="50" name="company[ekstratrafik]" id="company_ekstratrafik" class="numeric integer optional"></div>
<div class="button-row">
            <button style="font-size: 11px; display: none;" type="button" class="add">Add info</button>
            <button style="font-size: 11px; display: inline;" type="button" class="remove">Remove</button>
<input type="input" step="1" size="50" name="company[ekstratrafikinfo]" id="company_ekstratrafikinfo" class="infoinput"><div class="redDiv"></div><div class="greenDiv"></div><div class="blackDiv"></div></div>
...