How to get the state of a checkbox in a Simple Form uib-element?

[shanedmurphy]

Before I jump in and open an issue I just want to check if I am missing something...

I want to use a checkbox in a form to control enable/disable of a feature. I read the state from its source, then generate the form using a function node (content is dynamic) and pass it to the uib-element node configured as a simple form. I can render the state correctly by including a checked property for the checkbox if it should be checked, and removing it if it should not be checked. But when a button is pressed and I get an event in node-red with the state of the other form fields, I can't see anything in the event which tells me the state of the checkbox. The value property at the top level seems irrelevant for a checkbox and there is no checked property. I note if the checkbox has been interacted with I get something in the _ui.form.{checkboxId}.data but this doesn't tell me the final state of the checkbox.

I can create an issue if this is a bug, and possibly try to contribute a solution depending if this doesn't involve anything too invasive. But I am also not 100% confident I am not just missing something here...

[TotallyInformation]

Hi, sorry about the delayed response.

Do you have a simple flow to illustrate the issue? It is perfectly possible that there is a bug. Forms processing is certainly a work in progress. I'll try to get some time to test it myself but if you have a simple example flow, that would help.

[vovadpua]

Hello, I have created a test code for myself that can get data from a web page of a completed form
``

HTML:

<div><form>
<label for="name">Name:</label>
<div class="contr">
<textarea maxlength = "500" placeholder="Подсказка для текста..." required id="meName" name="name">....</textarea>
</div>
<label for="color">Color:</label>
<input type="color" id="color" name="color">
<label for="tel">Tel:</label>
<input type="tel" id="tel" name="tel">
<label for="date">Date:</label>
<input type="date" id="date" name="date">
<label for="number">Number:</label>
<input type="number" id="number" name="number">
<label for="time">Time: </label>
<input id="time" type="time" name="time" value="13:30" />
<input type="hidden" id="hidden" name="hidden" value="34657">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="selector">Размер:</label>
<select id="meSelector" name="selector">
<option value="Size_M">M</option>
<option value="Size_L">L</option>
<option value="Size_XL">XL</option>
<option value="Size_XXL">XXL</option>
</select>
<label for="checkbox">1 checkbox:</label>
<input type="checkbox" id="ch1" name="ch1" value = {"chec-x":"per","choos":"perv"}><br>
<label for="checkbox">2 checkbox:</label>
<input type="checkbox" id="ch1" name="ch1" value = {"chec-x":"vtor","choos":"perv"}><br>
<label for="checkbox">3 checkbox:</label>
<input type="checkbox" id="ch1" name="ch1" value = {"chec-x":"tret","choos":"perv"}><br>
</form>
<button onclick="submitForm()">Submit</button>
</div>

JavaScript:

function submitForm() {
let name = document.getElementById("meName").value;
let selector = document.getElementById("meSelector").value;
let email = document.getElementById("email").value;
let colors = document.getElementById("color").value;
let tel = document.getElementById("tel").value;
let hidden = document.getElementById("hidden").value;
let number = document.getElementById("number").value;
let date = document.getElementById("date").value;
let time = document.getElementById("time").value;
let checkboks = document.getElementsByName("ch1");
let ch = "", chl = {}
for (var i=0;i<checkboks.length; i++) {
chl = checkboks[i]
if (chl.checked) { ch = ch + ""Checkboks" + i + "":" + checkboks[i].value.slice(-0, -1) + ","stat": true}," } else
{ ch = ch + ""Checkboks" + i + "":" + checkboks[i].value.slice(-0, -1) + ","stat": false}," }
}
uibuilder.send({
topic: "forma",
payload : {Email : email,
Selector : selector,
Name : name,
Colors : colors,
Tel : tel,
Hidden : hidden,
Numbers : number,
Datte : date,
Time : time,
Checkboks : "{" + ch.slice(-0, -1) + "}",
}
})
}

[TotallyInformation]

Hi, thanks for coming back. I have indeed discovered a bug in checkbox handling. Though to excuse myself, it comes from the fact that HTML standards can be utterly stupid sometimes! In this case, an input of type checkbox is the ONLY input that DOES NOT SET THE VALUE ATTRIBUTE!

Extremely annoying.

It is fixed in the next release of uibuilder. Not only have I changed the HTML produced from uib-element for forms to ensure that the value attribute IS always updated, I've also changed the front-end library processing for the eventSend function to copy the checked attribute to value before sending back to Node-RED.

---

By the way, I think you can simplify your code above because all you need to get the check state is checkboks.checked. That will be true if the box is checked and false if not.

[TotallyInformation]

I created an Issue #221 for this for tracking.