Как добавить данные в несколько полей ввода и сохранить их при отправке?

Я пытаюсь добавить данные в каждое поле ввода.

Пример добавления поля ввода «информация» в поле ввода.

Если: красный div и никакие данные не добавляются, данные должны быть нулевыми, синий div и буква «p» добавляются к добавленному информационному вводу при отправке формы. Синий div и буква «V» добавляются в добавленное поле ввода.

Как мне добавить эти данные к добавленным входам и добавить данные к их значению при отправке?

Мой HTML и jQuery: http://jsfiddle.net/z5qeX/2/

У меня есть пример с одним полем ввода:

    $('.redDiv').click(function() {
        $('#webhost_navn').data('myData', null);
    });
    $('.blueDiv').click(function() {
        $('#webhost_navn').data('myData', 'p');
    });
        $('.blackDiv').click(function() {
        $('#webhost_navn').data('myData', 'V');
    });
// And the form submit button with the id of smt
    $('#smt').click(function() {
        var myData = $('#webhost_navn').data('myData'),
            val = $('#webhost_navn').val();
        if (myData) {
            $('#webhost_navn').val(myData + val);
        }
    });

Как мне создать эту функцию для каждого добавленного ввода и сохранить все данные при отправке?

При нажатии на один из красных, синих или черных:

1. Select the added input field
2. Create a data variable and save p, V or nothing depending on what div that where clicked. 
3 .On submit add all these variable to values of the correct input fields

javascript jquery jquery-selectors
person Rails beginner    schedule 16.08.2011    source источник
comment
Я бы сохранил объект с var mydata = {webhost_navn: {red: null, blue: p, black: V}, ....: {..., ..., ...}} и использовал бы .each для прикрепите щелчок к div   -  person mplungjan    schedule 16.08.2011
comment
Не могли бы вы привести мой пример, как создать ваше решение?   -  person Rails beginner    schedule 16.08.2011

Ответы (2)


arrow_upward
0
arrow_downward

Трудно быть полностью уверенным в том, о чем вы спрашиваете, но я думаю, что вы ищете живую функцию jQuery.

$('.redDiv').live('click', function() {$('#webhost_navn').data('myData', null);});

Функция live привязывает слушателей ко всем вновь созданным элементам управления.

person Will Reese    schedule 16.08.2011
comment
Он должен быть для каждого поля ввода. #Webhost_navn - это конкретное поле ввода. Если, например, добавлено поле ввода с идентификатором #webhost_want, данные должны быть сохранены в добавленном поле ввода с именем webhost [wantinfo]. Поэтому я не могу использовать функцию, которая может обрабатывать только одно поле ввода. В вашем примере это поле ввода с идентификатором #webhost_navn - person Rails beginner; 16.08.2011
comment
$ ('# webhost_navn') можно заменить любым количеством селекторов jquery. См. Все здесь: api.jquery.com/category/selectors. Если все, что вы делаете, - это передача ваших данных из этих красных, синих и черных блоков, то просто используйте селектор, который бы охватывал их все. Хорошим вариантом было бы добавить класс ко всем входам, которые вы могли бы потенциально захотеть настроить таргетингом, и использовать селектор классов: $ ('. YourClassName'), который выбрал бы передачу данных всем - person Will Reese; 16.08.2011
comment
Должен ли я сделать эту функцию для каждого из моих полей ввода ?! (50) - person Rails beginner; 16.08.2011
comment
Нет. Функция $ .live () автоматически добавит его к любому элементу HTML, соответствующему селектору. $ ('. redDiv'). live ('click', function () {$ ('. dynamicInput'). data ('myData', null);}); например, выберет все элементы управления с классом redDiv, сейчас и навсегда, и будут отправлять свои данные в любые элементы управления с классом dynamicInput, которые существуют, когда вы действительно щелкаете. - person Will Reese; 16.08.2011

arrow_upward
0
arrow_downward

Что-то вроде

mydata = { "webhost_navn": {red:null, blue:"p", black:"V"}, "....": { ... , ... , ...}}


$('.blackDiv,.blueDiv,.redDiv').live("click", function() {
  var field = $("#"+this.id.replace(this.className,""));
  if (field) field.val(mydata[field.prop("name")][this.className.replace("Div","")];
});

.
.
.
  'id'   : element.prop('id') + 'info',

$(this).parent().append(element).append('<div class="redDiv" id="'+element.prop('id')+'redDiv" style="background:red;width:20px;height:20px;"></div><div class="blueDiv" id="'+element.prop('id')+'blueDiv" style="background:blue;width:20px;height:20px;"> </div><div class="blackDiv" id="'+element.prop('id')+'blackDiv"style="background:black;width:20px;height:20px;"> </div>');
})
person mplungjan    schedule 16.08.2011