CODEWITHSUNDEEP
jquery
sebas
sebas

Reputation: 742

Jquery set input field value as selected options from multiple selects

How to set value of input field with name "entry.1471599855" as selected options of every select dropdown (each selected value sepparated by comma)?

HTML

<div class="hardwareValidation">

<div class="select">
    <label for="hwA-qty">CANTIDAD DE PARES</label><br />
    <label>1 <input type="radio" name="hwA-qty" value="1" checked /></label>
    <label>2 <input type="radio" name="hwA-qty" value="2" /></label>
    <label>3 <input type="radio" name="hwA-qty" value="3" /></label>

</div>




<fieldset id="hwA-1">
   <div class="form-group"><select class="form-control" id="talle1" name="entry.978809450"><option selected value="seleccione">-- Seleccione Talle --</option><option value="35-andrea">35</option><option value="36-andrea">36</option><option value="37-andrea">37</option><option value="38-andrea">38</option><option value="39-andrea">39</option><option value="40-andrea">40</option></select></div>
</fieldset>                     

<fieldset id="hwA-2" class="fieldsetstalles">
   <div class="form-group"><select class="form-control" name="entry.978809450"><option selected value="seleccione">-- Seleccione Talle --</option><option value="35-viviana">35</option><option value="36-viviana">36</option><option value="37-viviana">37</option><option value="38-viviana">38</option><option value="39-viviana">39</option><option value="40-viviana">40</option></select></div>
</fieldset>

<fieldset id="hwA-3" class="fieldsetstalles">
  <div class="form-group"><select class="form-control"name="entry.978809450"><option selected value="seleccione">-- Seleccione Talle --</option><option value="35-francesca">35</option><option value="36-francesca">36</option><option value="37-francesca">37</option><option value="38">38</option><option value="39-francesca">39</option><option value="40-francesca">40</option></select></div>
</fieldset>

<br><br><br><br><br>
<fieldset><legend for="1284324650">TALLES DE CADA MODELO:<br>
</legend>

<div class="form-group"><input class="form-control" id="1471599855" name="entry.1471599855" placeholder="Los talles de cada modelo seleccionado" required="" type="text"></div>
</fieldset>

</div>

Javascript function:

$('input[name="hwA-qty"]').click(function(){
     $('fieldsetstalles').show();
    var selected = $(this).val();

    for(i=1;i<=3;i++){
       if(i<=selected)$('fieldset#hwA-'+i).show();
       else $('fieldset#hwA-'+i).hide();
    }
});

JSFIDDLE

http://jsfiddle.net/147qsojv/6/

Upvotes: 0

Views: 141

Answers (1)

elkefreed
elkefreed

Reputation: 964

You will want to capture the selected value of your selects once they change. Then concatenate those values and set the input value to the concatenated values.

Something like this will work but you will want to probably strip the last comma off.

var val1, val2, val3 = "";
var theval = $("#1471599855");

$("#talle1").change(function(){
    val1 = $(this).children("option:selected").val();
    //addVals = addVals + val1;
    theval.val(theval.val() + val1 + ", ");             
});

$("#talle2").change(function(){
    val2 = $(this).children("option:selected").val();
    //addVals = addVals + val2;
    theval.val(theval.val() + val2 + ", ");             
});

$("#talle3").change(function(){
    val3 = $(this).children("option:selected").val();
            //addVals = addVals + val3;
    theval.val(theval.val() + val3);                
});

Upvotes: 1

Related Questions