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

Developing Nodes
1

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.

<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 ?

2

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.

3

Hi thanks,

thanks for your feedback.
Your solution works.

4

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