It appears that the framework being used is unfamiliar to me. Based on the code snippet
events:{'click button.chooseit': 'chooseIt',}
, it seems that a click event is bound to a function named
chooseIt. It would be helpful to also see the implementation of this function.
In response to the question "Are buttons handled differently?" - the handling depends on the type of button being used. Different types include <input type="button">, <input type="submit">, <input type="image">, <input type="reset">, <button type="button">, <button type="submit">, <button type="menu">, and <button type="reset">. For instance, if the type is "submit" or "image", the form gets submitted. If it's "reset", the form controls revert to their initial values. The behavior varies based on the button type, with specific actions triggered accordingly.
To address the issue at hand, in pure JavaScript, there should not be any distinction. Below is an example where various input elements such as <input type="radio">, <input type="checkbox">, <input type="button">, <button type="button">, and <select> all utilize the same function to update the value displayed by <output>. Each element interacts similarly with the function, ensuring consistent behavior across different types of inputs.
If troubleshooting is needed, delve into the workings of the framework to identify any potential issues. One common pitfall is inadvertent form submission, which can appear instantaneous. Enabling features like "sticky log" in the developer console can help monitor activities even after page reloads, facilitating error detection.
var output = document.getElementById('output');
function setOutput(event) {
var value = this.value;
if (this.type === 'checkbox') {
if (!this.checked) value = '';
}
output.value = value;
}
document.querySelectorAll('input, button').forEach(
function (elem) {
elem.addEventListener('click', setOutput);
}
);
document.querySelectorAll('select').forEach(
function (elem) {
elem.addEventListener('change', setOutput);
}
);
fieldset{
display:inline-block;
width:150px;
height:50px;
vertical-align:top;
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0;
font-size:80%;
}
<p>Proof of concept that the type of input element doesn't matter in this case.</p>
<form id="form1">
<fieldset>
<p><input type="radio"></p>
<label><input value="5" type="radio" name="radioValue">5</label>
<label><input value="10" type="radio" name="radioValue">10</label>
<label><input value="20" type="radio" name="radioValue">20</label>
</fieldset>
<fieldset>
<p><input type="checkbox"></p>
<label><input value="5" type="checkbox" name="chkValue">5</label>
<label><input value="10" type="checkbox" name="chkValue">10</label>
<label><input value="20" type="checkbox" name="chkValue">20</label>
</fieldset>
<fieldset>
<p><input type="button"></p>
<input value="5" type="button" name="ibtnValue">
<input value="10" type="button" name="ibtnValue">
<input value="20" type="button" name="ibtnValue">
</fieldset>
<fieldset>
<p><button type="button"></p>
<button value="5" type="button" name="btnValue">5</button>
<button value="10" type="button" name="btnValue">10</button>
<button value="20" type="button" name="btnValue">20</button>
</fieldset>
<fieldset>
<p><select></p>
<select>
<option value="">--Select value---</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</fieldset>
<fieldset>
<p>Last selected value: <output id="output"></output></p>
</fieldset>
</form>