Concatenate user input in Html form and assigning an ID to it, in order to submit in JavaScript

Question

everyone I am newbie to JavaScript and Html and i am trying to concatenate the user input in html form and giving an ID and submit, in order to give command to my controller to act accordingly.

This is basically setting up schedule for port 1 and command goes like [NORMAL 122(STARTTIMESTOPTIME DAYSESSION)I haven't included session yet.

function Port1_sch_On_off(){
        if(connected_flag==1){
            client.subscribe("lazy/test");
            message = new Paho.MQTT.Message("NORMAL 122 + document.getElementById('port1_timeday'.value)");
            message.destinationName = "lazy/test";
            client.send(message);
            }
            else {
                console.log("not connected")
            }
        return false;   
    }

<tr height=40>
        <td><style="text-align:middle">PORT1_SCH_ON_OFF</td>
        <td width=40></td>
        <td><form id="port1_timeday" oninput="port1_timeday.value = start_time.valueAsNumber start_day.valueAsNumber stop_time.valueAsNumber stop_day ">
            <input name="start_time" id="start_time" type="time" min="00:00" max="24:00" required/> 
            <span class="hours"></span> 
            <label for="start_day">Day:</label> 
            <select name="start_day" id="start_day"> 
                <option value="1">MON</option>
                <option value="2">TUES</option>
                <option value="3">WED</option>
                <option value="4">THRUS</option>
                <option value="5">FRI</option>
                <option value="6">SAT</option>
                <option value="0">SUN</option>
            </select>           
            </label>
            <input name="stop_time" id="stop_time" type="time" min="00:00" max="24:00" required/> 
            <label for="stop_day">Day:</label> 
            <select name="stop_day" id="stop_day"> 
                <option value="1">MON</option>
                <option value="2">TUES</option>
                <option value="3">WED</option>
                <option value="4">THRUS</option>
                <option value="5">FRI</option>
                <option value="6">SAT</option>
                <option value="0">SUN</option>
            </select>
            </label>
            <output name="port1_timeday" for="start_time start_day stop_time stop_day"></output></td>
            <input type="button" onclick="Port1_sch_On_off()" value="Port1_timeday">
            </form>
    </tr>
    </table>

And also I have to add eventlistener for the same with which i haven't started yet.

Answer 1

Here are two main ways to concatenate in javascript :

using the + operator :

message = new Paho.MQTT.Message("NORMAL 122 " + document.getElementById('port1_timeday'.value));

or

using string interpolation :

message = new Paho.MQTT.Message(`NORMAL 122 + ${document.getElementById('port1_timeday'.value)}`);

I hope this answers your question :D

edit 1 :

This function will return your user input cancatenated as such "STARTDAYSTARTTIMESTOPTIMESTOPDAY", you can modify it to return the values in any order :

function cancat_day_time() {
    start_time = document.getElementById("start_time").value;
    start_day = document.getElementById("start_day").value;
    stop_time = document.getElementById("stop_time").value;
    stop_day = document.getElementById("stop_day").value;

    return `${start_day}${start_time}${stop_day}${stop_time}`; 
}

You can then use it in your function Port1_sch_On_off() like this :

function Port1_sch_On_off() {
    if (connected_flag == 1) {
        client.subscribe("lazy/test");
        message = new Paho.MQTT.Message("NORMAL 122 " + cancat_day_time());
        message.destinationName = "lazy/test";
        client.send(message);
    } else {
        console.log("not connected")
    }
    return false;
}

edit 2 :

This is the HTML code that works for me :

<tr height=40>
    <td></td>
    <td width=40></td>
    <td>
        <form id="port1_timeday" oninput="">
            <input name="start_time" id="start_time" type="time" min="00:00" max="24:00" required/>
            <span class="hours"></span>
            <label for="start_day">Day:</label>
            <select name="start_day" id="start_day">
                <option value="1">MON</option>
                <option value="2">TUES</option>
                <option value="3">WED</option>
                <option value="4">THRUS</option>
                <option value="5">FRI</option>
                <option value="6">SAT</option>
                <option value="0">SUN</option>
            </select>
            </label>
            <input name="stop_time" id="stop_time" type="time" min="00:00" max="24:00" required/>
            <label for="stop_day">Day:</label>
            <select name="stop_day" id="stop_day">
                <option value="1">MON</option>
                <option value="2">TUES</option>
                <option value="3">WED</option>
                <option value="4">THRUS</option>
                <option value="5">FRI</option>
                <option value="6">SAT</option>
                <option value="0">SUN</option>
            </select>
            </label>
    </td>
    <input type="button" onclick="Port1_sch_On_off()" value="Port1_timeday">
    </form>
</tr>