Jquery set input field value as selected options from multiple selects

Question

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/

elkefreed · Accepted Answer · 2019-09-06 20:24:32Z

1

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);                
});

answered Sep 6, 2019 at 20:24

elkefreed

9651 gold badge15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sebas Over a year ago

this is good but when you select an option and then you change the first value still remains in the input field. how to avoid that? also hw to remove the last comma?

elkefreed Over a year ago

You can use the substring function to strip the last comma. To update the text if you change the selected value you'd first want to retrieve what is in there, and then depending on the position replace the text that is in place. You can use the javascript function "split" to do that. You split based on the comma and then replace the value in the array. Then set the new value to the input. I realize I oversimplified this but with a little research you should be able to figure it out.

Collectives™ on Stack Overflow

Jquery set input field value as selected options from multiple selects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related