Crestron Components Lib - Showcase App

ch5-form: submitId

ch5-form submitId

When hideSubmitButton='true', this field is the id of an element in which a 'click' event can be used to trigger the submit functionality. This element should also honor the standard 'disabled' attribute to allow the form to disable the element if any of the inputs are in error

Open the browser console to see that signals are send when "Trigger Submit" button is clicked. ( See JS tab )

Preview

Room X

Do not disturb

Temperature

HTML
JS
CSS

<ch5-form 
    id="demo"
    submitId="room_submit_id" 
    cancelId="room_cancel_id"
    hidesubmitbutton="true"
    submitbuttonlabel="Submit"
    submitbuttonicon="fa fa-play"
    submitbuttontype="success"
    submitbuttonstyle="border: 1px solid blue"
    hidecancelbutton="true"
    cancelbuttonlabel="Off"
    cancelbuttonicon="fa fa-times"
    cancelbuttontype="danger"
    cancelbuttonstyle="border: 1px solid red"
> 
    <h2>Room X</h2>
    
    <h5>Do not disturb</h5>             
    <ch5-toggle 
        labelOn="On"
        labelOff="Off"
        feedbackMode="submit" 
        receiveStateValue="room_donotdisturb_selected" 
        sendEventOnClick="room_donotdisturb_clicked">
    </ch5-toggle> 
     
    <br><br>

    <h5>Temperature</h5>
    <ch5-slider 
        feedbackMode="submit" 
        receiveStateValue="room_thermostat_set_fb" 
        sendEventOnChange="room_thermostat_set" 
        step="10" 
        min="0" 
        max="100"> 
    </ch5-slider>
</ch5-form>

<button id="trigger_submit">Trigger Submit</button>

$(document).ready(function() {
    var submitButton = $('#room_submit_id');
    var triggerSubmit = $('#trigger_submit');

    triggerSubmit.on('click', function(){
        submitButton.click();
    });
})

Execute JS before HTML