Need to hide html input inside for loop

91 Views Asked by At

I am using swig/twig to create a loop inside a select statement. I am doing this because I need a value from a variable as you will see. I have it so the values are all good but When I load the page it shows all but the top option in the loop outside the select. Like right below it. Here is my loop:

<select class="form-control selectpicker" title="Asset" name="asset" data-live-search="true">
 {%  for asset in assets  %}
  <option value="{{ asset.assetNumber }}">{{ asset.model }} | {{ asset.assetNumber }}</option>
  <input type="hidden" name="assetID" value="{{asset.id}}">
 {% endfor %}
</select>

I can have unlimited things in the array but still only the 1 will be in the selector. This causes it so I can't use the selector for what I need to and defeats the whole page since it is based off that value.

I also tried <button value="{{asset.id}}"></button> but it would not show up in console when I logged out the variable in the post route. How can I get it to show up in the post route but not affect my selector?

<select class="form-control selectpicker" title="Asset" name="assignSel" data-
 live-search="true">
 {%  for assign in assigns  %}
   <option name="assign" value="{{ assign.id }}">{{ assign.subuser }} | {{ 
  assign.asset.num }}</option>
  <input type="hidden" name="outdate" value="{{ assign.checkoutDate }}"/>
 {% endfor %}
</select>
1

There are 1 best solutions below

1
DarkBee On

As suggested in the comments use a data attribute, but you still need some javascript to assign the data value to your form

javascript

$('select[name="asset"]').on('change', function() {
    $('input[name="assetID"]').val($('option:selected', this).data('asset-id'));
    console.log($('input[name="assetID"]').val());
});

twig

<select class="form-control selectpicker" title="Asset" name="asset" data-live-search="true">
{% for asset in assets %}
     <option value="{{ asset.assetNumber }}" data-asset-id="{{ asset.id }}">{{ asset.model }} | {{ asset.assetNumber }}</option>
{% endfor %}
</select>
<input type="hidden" name="assetID" value="">