Сохранить четыре отдельных значения в четыре скрытых поля

Question

Сохранить четыре отдельных значения в четыре скрытых поля

В настоящее время у меня есть четыре отдельных раздела: подошва, воротник, подкладка и язык. В каждом разделе есть возможность выбора материала, приведенный ниже код является примером двух из этих разделов.

<div class="sole_panel container active">
    <h3>sole</h3>
    <div id="sole_leather" class="material-btn">leather</div>
    <div id="sole_suade" class="material-btn">suade</div>
    <div id="sole_nubuck" class="material-btn">nubuck</div>
</div>
<div class="collar_panel container">
    <h3>collar</h3>
    <div id="collar_leather" class="material-btn">leather</div>
    <div id="collar_suade" class="material-btn">suade</div>
    <div id="collar_nubuck" class="material-btn">nubuck</div>
</div>

Я создал элементы div, чтобы при нажатии на них они брали идентификатор и передавали его в значение скрытого входного тега.

<input id="sole" class="material-value" type="hidden" value="sole_leather">

Проблема, с которой я столкнулся, заключается в том, что если я выберу кожу, например, для раздела Sole, он заполняет все четыре скрытых ввода, как показано в коде ниже. Есть ли простой способ применить скрытый ввод только к тому разделу, к которому он относится?

<div class="sole_panel container active"></div>
<input id="sole" class="material-value" type="hidden" value="sole_leather">
<div class="collar_panel container"></div>
<input id="collar" class="material-value" type="hidden" value="sole_leather">
<div class="lining_panel container"></div>
<input id="lining" class="material-value" type="hidden" value="sole_leather">
<div class="tongue_panel container"></div>
<input id="tongue" class="material-value" type="hidden" value="sole_leather">

Я также использую JavaScript, чтобы зациклить массив панелей и материалов

panelArray     = ['sole','collar','lining','tongue'];
materialArray  = ['leather','suade','nubuck'];

//loop over array to create selectors
for (x = 0; x < panelArray.length; x++) {

    mtr = '';
    clr = '';               
    var segments = panelArray[x];

    //loop over materials 
    for (y = 0; y < materialArray.length; y++) {

        var material = materialArray[y];
        //console.log(material);

        mtr += '<div class="material-btn" id="' + segments + '_' + material + '">' + material + '</div>';
    }                 

    container += '<div class="' + segments + '_panel container"><h3>' + segments + '</h3>';
    container +=        mtr;
    container +=   '<div class="colour-container">';
    container +=        clr;
    container +=   '</div>';
    container += '</div>';
    container += '<input id="' + segments + '" class="material-value" type="hidden">';

}

ниже приведен код, который передает значение в скрытое поле

$('.material-btn').on('click', function() {              

    $('.material-btn').removeClass('select');
    $(this).addClass('select');

    // passes material type selction to hidden field
    var value = $(this).attr('id');    
    var result = $('.material-value').attr('value', value);
    //console.log(result);
});

0

javascript html hidden-fields

Источник

user4568553 04 май '15 в 19:41

3 ответа

Решение

Вы можете добавить еще один атрибут: сегмент данных

mtr += '<div class="material-btn" id="' + segments + '_' + material + '" data-segment="' + segments + '">' + material + '</div>';

и тогда вы можете использовать

var value = $(this).attr('id');    
var result = $($(this).data('segment')).attr('value', value);

выбрать правильное поле ввода

0

Источник

user4303873 04 май '15 в 19:55

Просто для демонстрации цели сохранен тип ввода текста.

var a = document.querySelectorAll('.material-btn');
for(i=0;i<a.length;i++){
    a[i].onclick = function(){
                var type= this.getAttribute('target');
                document.getElementById(type).value = this.innerHTML
              }
}

<div class="sole_panel container active">
    <h3>sole</h3>
    <div id="sole_leather" class="material-btn" target="sole">leather</div>
    <div id="sole_suade" class="material-btn" target="sole">suade</div>
    <div id="sole_nubuck" class="material-btn" target="sole">nubuck</div>
</div>
<div class="collar_panel container">
    <h3>collar</h3>
    <div id="collar_leather" class="material-btn" target="collar">leather</div>
    <div id="collar_suade" class="material-btn" target="collar">suade</div>
    <div id="collar_nubuck" class="material-btn" target="collar">nubuck</div>
</div>

<div class="sole_panel container active"></div>
<input id="sole" class="material-value" type="text" value="sole_leather">
<div class="collar_panel container"></div>
<input id="collar" class="material-value" type="text" value="sole_leather">
<div class="lining_panel container"></div>
<input id="lining" class="material-value" type="text" value="sole_leather">
<div class="tongue_panel container"></div>
<input id="tongue" class="material-value" type="text" value="sole_leather">

0

Источник

user3462952 04 май '15 в 20:20

Другие вопросы по тегам javascript html hidden-fields

user1447509 04 май '15 в 20:11 2015-05-04 20:11 · Accepted Answer · 2015-05-04 20:11

Попробуй это:

jsFiddle Demo

$('.material-btn').click(function(){
    var part = this.id.split('_')[0];
    var matl = this.id.split('_')[1];
    $('#'+part).val(matl);
});

Заметки:

(1) Использование this.id (чистый JavaScript) вместо $(this).attr('id') только потому, что это немного быстрее и легче набирать. Для этого примера они будут работать одинаково. Чтобы сделать то же самое со всеми jQuery: var matl = $(this).attr('id').split('_')[1];

(2) this.id.split('_')[1] принимает идентификатор, такой как sole_leather и превращает его в массив, разбивая строку в каждом _ голец. Следовательно, вы остаетесь с таким массивом: array('sole','leather') - и [1] выбирает элемент в позиции 1 (кожа)

(3) Чтобы сохранить материал (нубук) в скрытом поле части (подошвы), мы используем сохраненные переменные, созданные на шаге 2. $('#'+part) становится $('#sole') - который является идентификатором скрытого поля для единственной части.

(4) В демонстрационной версии jsFiddle скрытые поля были скрыты ТОЛЬКО для того, чтобы вы могли видеть, что значения обновляются внутри поля.

/*
http://stackru.com/questions/30038608/how-would-i-go-about-saving-four-separate-values-to-four-hidden-fields
*/
$('.material-btn').click(function(){
    var part = this.id.split('_')[0];
    var matl = this.id.split('_')[1];
    $('#'+part).val(matl);
});

#hiddenDIVs{width:80%;margin:30px auto;border:1px solid orange;}
.material-value{height:25px;width:60%;margin:5px auto;background:palegoldenrod;padding:2px 5px;}
.material-btn:hover{cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sole_panel container active">
    <h3>sole</h3>
    <div id="sole_leather" class="material-btn">leather</div>
    <div id="sole_suade" class="material-btn">suade</div>
    <div id="sole_nubuck" class="material-btn">nubuck</div>
</div>
<div class="collar_panel container">
    <h3>collar</h3>
    <div id="collar_leather" class="material-btn">leather</div>
    <div id="collar_suade" class="material-btn">suade</div>
    <div id="collar_nubuck" class="material-btn">nubuck</div>
</div>
<div class="sole_panel container active"></div>
<div class="collar_panel container"></div>
<div class="lining_panel container"></div>
<div class="tongue_panel container"></div>
<div id="hiddenDIVs">
    <input id="sole" class="material-value" type="text" value="" /> SOLE<br>
    <input id="collar" class="material-value" type="text" value="" /> COLLAR<br>
    <input id="lining" class="material-value" type="text" value="" /> LINING<br>
    <input id="tongue" class="material-value" type="text" value="" />TONGUE<br>
</div>