# HTML \<select\> tag don't send option payload selection

**URL:** <https://discourse.nodered.org/t/html-select-tag-dont-send-option-payload-selection/57449>\
**Category:** Developing Nodes\
**Created:** [29 January 2022 09:11 UTC](https://discourse.nodered.org/t/html-select-tag-dont-send-option-payload-selection/57449 "2022-01-29T09:11:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NicoloToscani](https://avatars.discourse-cdn.com/v4/letter/n/f19dbf/32.png) [@NicoloToscani](https://discourse.nodered.org/u/NicoloToscani)\
**Post date:** [29 January 2022 09:11 UTC](https://discourse.nodered.org/t/html-select-tag-dont-send-option-payload-selection/57449/1 "2022-01-29T09:11:10Z")

</div>

Hi,  
I need to select actual option value in its select tag.  
Two different tags are enable based on previous selection (node-input-device).

If I select "device1" in Device selection I can see the corrects "node-input-data-device1" in Measure selection field and I receive the correct payload during the node execution.

If I select "device2" in Device selection I can see the corrects "node-input-data-device2" in Measure selection field but the value doesn't appear in the payload.

```auto
<script type="text/javascript">
    RED.nodes.registerType('measure',{
        category: 'a',
        color: '#009999',
        defaults: {
            name: {value:""},
            unitId: {value: "1",required:true},
            device: {value: "test",required:true},
            data: {value: "", required: true}
        },
        inputs:1,
        outputs:1,
        icon: "serial.png",
        label: function() {
            return this.name||"measure";
        },
        oneditprepare: function() {
        
            $("#node-input-device").on("change",function() {
            
                if (this.value === "") {
                    $("#node-input-data-device1").hide();
                    $("#node-input-data-device2").hide();
                } 
                
                else if (this.value === "device1") {
                    $("#node-input-data-device1").show();
                    $("#node-input-data-device2").hide();
                }
                else if (this.value === "device2") {
                    $("#node-input-data-device1").hide();
                    $("#node-input-data-device2").show();
                }     
            }).trigger("change");
        },
          
    });
</script>

<script type="text/x-red" data-template-name="measure">
        
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-unitId"><i class="icon-tag"></i> Unit ID</label>
        <input type="text" id="node-input-unitId" placeholder=" 123">
    </div>
    <div class="form-row">
        <label for="node-input-device"><i class="icon-tag"></i> Device</label>
        <select id="node-input-device" name="node-input-device">
           <option disabled value="device1">DEVICE 1</option>
           <option disabled value="device2">DEVICE 2</option>
        </select>
    </div>

    <div id="node-input-data-device1" class="form-row">
       <label for="node-input-data"><i class="icon-list"></i> Measure</label>
       <select id="node-input-data" name="node-input-data">
           <option value="value-1">Value 1</option>
           <option value="value-2">Value 2</option>
       </select>
   </div> 

    <div id="node-input-data-device2" class="form-row">
       <label for="node-input-data"><i class="icon-list"></i> Measure</label>
       <select id="node-input-data" name="node-input-data">
        <option value="value-1">Value 1</option>
        <option value="value-2">Value 2</option>
        <option value="value-3">Value 3</option>
        <option value="value-4">Value 4</option>
       </select>
   </div>
   
</script>

```

Can you give me some suggestions ?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [29 January 2022 09:23 UTC](https://discourse.nodered.org/t/html-select-tag-dont-send-option-payload-selection/57449/2 "2022-01-29T09:23:30Z")

</div>

The problem is both select boxes have the same id - `node-input-data`

You cannot have two elements with the same id.

You will need to give them different IDs, and then add an `oneditsave` function that contains the logic to pull the value out of the right select based on the value of the first option.

---

<div class="post-metadata">

**Author:** ![NicoloToscani](https://avatars.discourse-cdn.com/v4/letter/n/f19dbf/32.png) [@NicoloToscani](https://discourse.nodered.org/u/NicoloToscani)\
**Post date:** [29 January 2022 10:16 UTC](https://discourse.nodered.org/t/html-select-tag-dont-send-option-payload-selection/57449/3 "2022-01-29T10:16:30Z")

</div>

Hi thanks,

thanks for your feedback.  
Your solution works.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [12 February 2022 10:16 UTC](https://discourse.nodered.org/t/html-select-tag-dont-send-option-payload-selection/57449/4 "2022-02-12T10:16:47Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.