在输入表单中插入值

Question

When one image is selected...

 <div class="selectable"> <img src="https://glarza.com/imagens/tamanho-33.webp" class="ui-widget-content"value="SIZE-33"width="60"height="60"> <img src="https://glarza.com/imagens/tamanho-34.webp" class="ui-widget-content"value="SIZE-34"width="60"height="60"> </div>

this function select the size...

 <script> $(function() { $(".selectable").selectable({ selected: function() { var selectedItemList = $("#medida-selecionada-dalista").empty(); $(".selectable img").each(function(index) { if ($(this).hasClass("ui-selected")) { selectedItemList.append( $(this).attr("value") ); } });}});}); </script>

And show the selected size inside the id...

 <span id="medida-selecionada-dalista"></span>

My problem... I need to insert this value inside this input. I need only this. The others inputs are storeged in mysql.

 <input type="size" class="form-control" id="size" name="size" value="">

Answer 1

Like so?

 $(function() { $(".selectable").selectable({ selected: function() { var selectedItemList = $("#medida-selecionada-dalista").empty(); $(".selectable img").each(function(index) { if ($(this).hasClass("ui-selected")) { selectedItemList.append( $(this).attr("value") ); /* insert into input */ document.getElementById("size").value = this.getAttribute("value"); } }); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input type="size" class="form-control" id="size" name="size" value=""> <span id="medida-selecionada-dalista"></span> <div class="selectable"> <img src="https://glarza.com/imagens/tamanho-33.webp" class="ui-widget-content" value="SIZE-33" width="60" height="60"> <img src="https://glarza.com/imagens/tamanho-34.webp" class="ui-widget-content" value="SIZE-34" width="60" height="60"> </div>

PS avoid jquery whenever you can...