I've got a form in which the user can give a rating from 1 to 5, this is done through radio boxes. But without check the user can click on the same button multiple times how do I prevent this? the code is simply written
echo "<input type='hidden' name='risk' />
<td>1<input type='radio' name='question[]' id=1 value=1 onclick='calculate_score(".$number.",this.value)'/></td>
<td>2<input type='radio' name='question[]' id=2 value=2 onclick='calculate_score(".$number.",this.value)'/></td>
<td>3<input type='radio' name='question[]' id=3 value=3 onclick='calculate_score(".$number.",this.value)'/></td>
<td>4<input type='radio' name='question[]' id=4 value=4 onclick='calculate_score(".$number.",this.value)'/></td>
<td>5<input type='radio' name='question[]' id=5 value=5 onclick='calculate_score(".$number.",this.value)'/></td>
</table></form>";
could anyone tell me how to handle this?
note that the code above is only a snip it from the code and it does actually work. it's purely functional. As you can see once this radio box is clicked it goes to a javascript function do I build the check there and how would I go about something like that?
You need to write the calculate_score() function so that it calculates according to the status of user selections, not according to the action of checking or unchecking a button. It would be bad usability and bad functionality to prevent the user from changing his selection (except perhaps in a special game or test).
You can disable the button that was just checked, enabling all others, once the user changes its value , previous ones will be enabled and the new one will be disabled preventing further clicks by user to that
I would recommend you to use a good framework (like jQuery) and put your javascript logic into a <script> tag, but if you did this way, you must have your reasons. To disable the clicked input element try the following snippet:
// i am assuming (\") will escape the quote (") character to echo
onclick='calculate_score(".$number.",this.value); this.onclick=\"\";'
Related
I have a <form> with a few radio buttons groups:
<form>
Group 1:
<input type='radio' name='a' value='1'>
<input type='radio' name='a' value='2'>
<input type='radio' name='a' value='3'><br>
Group 2:
<input type='radio' name='b' value='1'>
<input type='radio' name='b' value='2'>
<input type='radio' name='b' value='3'>
</form>
How to save, on each selection change event, everything to localStorage, and then on page reload (e.g. after we close and reopen the browser) reload the previously selected items?
All what I think of for this seems unnecessarily complex.
We probably have to assign a listener to event "radio button is selected" or should we detect this simply with "change" event?
NB: This solves the similar problem for <input type="text">: Auto-save all inputs value to localStorage and restore them on page reload
Maybe is there an easier way:
Can we serialize a whole <form> state (input values, selected radio buttons, etc.) into localStorage, and easily restore it, without jQuery? (without having to write specific code for text inputs, other code for radio buttons, other code for checkboxes, etc.)
Create a helper function to retrieve form values: https://stackoverflow.com/a/41262933/4988674
Add event listener to form changes: https://stackoverflow.com/a/10760931/4988674
Inside event listener save form data into localStorage: https://stackoverflow.com/a/2010948/4988674
Create "onload" event and populate form values from localStorage: https://stackoverflow.com/a/7327185/4988674 and https://benalexkeen.com/autofilling-forms-with-javascript/
This is a solution for radio buttons:
document.querySelectorAll('input[type="radio"]').forEach(elt => {
if (localStorage.getItem(elt.name) == elt.value)
elt.checked = true;
elt.addEventListener("change", e => {
localStorage.setItem(e.target.name, e.target.value);
});
});
This works for text <input>: Auto-save all inputs value to localStorage and restore them on page reload.
For the input type text, if i add required attribute, my form won't submit and browser will focus on required field and alert will say please fill this field.
For the input type radio, if i add required attibute, my form won't submit but also it does not provide me any alert or focus on the radio which is unchecked.
If this is not an in-built functionality for HTML5, can i in some way create it and make it look like the same as it looks for text inputs so that style integrity is also preserved?
This code works well, if you not select radio, form will not submit. If you select one and enter text in textbox, form will submit.
<form>
<input type="radio" name="one" value="1" required>
<input type="radio" name="one" value="2" required>
<input type="radio" name="one" value="3" required>
<input type="text" name="two" required>
<button>Submit</button>
<form>
Checked on latest version of Google Chrome. May be you found a bug in your browser, try to update it.
Beside required radio button alerts work "perfectly fine" in Chrome...
jsBin demo
it makes no sense at all to have an alert for a radio button, that's silly.
If you have a radio button:
there's absolutely no need to have only one radio button. → Use checkboxes.
there's absolutely no reason to have all radio buttons unchecked initially.
one must be checked by default - and it's your job to do so
logically there's no need to popup alerts like "This radio button is required" - therefore neither to set a required attribute to a radio button.
if you still don't understand why... well simple because radios are used as UI switch states. Only one can and must be checked. If you make them all initially unchecked - and a client unintentionally hits a radio - he's dead in the devil's loop, because once you enter the circle there's no way out. Therefore makes no sense to have all blanks in the first place. You cannot undo... (well, unless you have another silly checkbox or something that says "uncheck all radio buttons!" nonsense).
I am currently working on a project where we render a dynamic page based on what we are holidng in a SQL table. We have conditional validation for controls where you can say
if x is equal to y then enable controls abc
I have multiple radio buttons in a group, the last control is "Other (please specify)" which when true will enable a textbox to specify so I need to capture when this is set to both true or false. Currently I am doing something like this
<input type="radio" name="test" value="Yes" />
<input type="radio" onchange="onChange()" name="test" value="No" />
<script type="text/javascript">
function onChange() {
alert('Changed')
}
</script>
If I check NO I get an alert. If I then check YES it changes the NO radio button checkstate but doesn't display an alert - any solutions?
The only thing I can suggest is putting an onchange on the whole group and then checking which is selected when they change. Not very elegant but it appears that this is just how the change event works (ie it only responds to a user change, not to a system change of it).
Wondering how to approach this... Best to look at the picture to visualize the, hopeful, UI for a form for choosing options in a list. Users need to be able to make a first choice and a second choice for each option. One and only one can be selected in each column, and for that matter, each row.
At first I thought, naturally, 2 radio button groups might work...but not sure how? Perhaps hidden radio_buttons whose values are manipulated via Javascript/JQuery in a click event on each div? Event should also check/handle "collisions" when user tries to select same option for both choices.
Or, would this perhaps be better with two hidden collection_selects...or even simpler, just two hidden text_fields...which javascript can populate with the ID of the selected option?
Or maybe I'm overlooking something more obvious.
I'm new(ish) to javascripting with Rails so looking for advice/validation.
Thanks.
I think something like this is what your looking for:
HTML:
<form>
<p class="exclusiveSelection">
Selection One
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Two
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Three
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<input type="button" id="submitForm" value="Submit">
</form>
JavaScript:
$(function() {
$(".exclusiveSelection input[type='radio']").click(function() {
$exclusiveSelection = $(this).parent();
$('input[type='radio']', $exclusiveSelection).attr('checked', false);
$(this).attr('checked', true);
});
});
It ensures that the values are unique across column and row and works with jQuery 1.2.6 - 1.7.1. There is also a JSFiddle example.
If you need help adapting this for Rails let me know, however it should be straight forward.
<input type="radio" value="1" id="baby">
I'd like to keep this code like that.
However, can I apply a CSS to it so that the "1" is not displayed to the user?
Edit: For some reason, it is being displayed, I don't know why.
I do have a CSS attached to it though.
The value of "1" is not displayed to the user at all, it's hidden and only has meaning when the form posts. You need to add a <label> tag or just raw text near the radio button to display the value you want the user to see.
For radio buttons, the value attributed is never rendered by the user agent (unless it does something rather weird). Typically, if you need a radio button with a label, you explicitly specify one, ideally using the <label> tag.
The "1" should not display for the user.. it's just a value..
Normally, you'd declare a radio input like so:
<label><input type="radio" value="1" id="baby"> Baby </label>
This will make "Baby" the label for the radio button, this will also make clicking on the Baby text activate the radio button, which is what accessibility rules would require..