Checkbox value: optional or required? - javascript

According to MDN the value attribute is optional except when the value of the type attribute is radio or checkbox. But it doesn't seem to be correct. Is there anything wrong with the following:
<input type="checkbox" id="input">
<script>
document.getElementById('input').onchange = function () {
alert('Checked!');
};
</script>
DEMO

The value attribute is only required if you want the checkbox to post through a value when you submit a form. If you're not submitting a form but just want to know when it's clicked, then there's nothing wrong with your example.
Note that your example will also alert "Checked!" when the user un-checks the box too. That's why you might also want to look at the value of the checked attribute in your Javascript.

I think document says that it is mandatory to have the value when you need the selected option when posted back and to know what value is selected, i am not sure how why do you think your code should not work . In current case if you submit the form and you have to checkbox you will not come know what value is being selected.
checkbox: A check box. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).

For checkbox you may check for the 'checked' propoerty is true or false since checkbox is always used either as a flag / Boolean expression .
document.getElementById('input').onchange = function () {
alert('Checked!');
alert(document.getElementById('input').checked);
};

Related

Unable to Check Radio-button on (click) of another Radio Button: Angular Reactive Form

i wan to change the radio button checked status when user clicks on a radio button in another group.
i am trying to do it on click event, when user clicks on one Radio-button.
i am checking for the value and changing the radio-button value in another group.
i have added stackblitz problem-statement link for the same. please let me know what am i doing wrong here.
But i am unable to achieve this
please help.
// Getter for form value
this.form.controls.frequency.value = 'freq6'; // Wrong, not working
const value = this.form.controls.frequency.value; // Correct, only for read value
This syntax is only for get values, not for set.
To set values please use setter .setValue()
In your case: this.form.controls.frequency.setValue('freq6');
You can read more about it in documentation. https://angular.io/guide/reactive-forms#replacing-a-form-control-value
In order to change the value in the controller you have to use controller.setValue().
this.form.controls.frequency.setValue('freq6');
Your changeFrequency function should be like
changeFrequency(event){
if(event.target.value === "dash2"){
this.form.controls.frequency.setValue('freq6');
}
}
Demo

How to automatically disable a text field after checkbox is ticked

I am currently working on a project, that requires me to implement the following:
I've got 2 input fields - a regular text field, and a checkbox.
What I want to do is - if the user fills in the text field, the checkbox should be automatically disabled. If the checkbox is checked instead, the text field should be disabled.
What I've come up with so far is:
<input type="text" name="num-input1" id="dis_rm" value=""
onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
onblur="document.getElementById('dis_rm').disabled = (''!=this.value);" >
If I fill in the text field, the checkbox is successfully disabled. However, if I tick the checkbox, the text field remains available.
What am I missing?
If I were you I would:
Move my JS code out of the HTML and into a separate file or at least into a script element.
Use document.getElementById to find an item in the DOM. See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Once you have the element from the DOM, add an event listener for the blur events like this myElement.addEventListener('blur', myCallbackMethod). See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener for more info.
Inside your callback method you can use event.target.checked to see if the element you've added the event listener to is checked.
Here is a little snippet to get you going:
const
textInput = document.getElementById('element-ID-here'),
checkbox = document.getElementById('element-ID-here');
function onTextInputBlurHandler(event) {
// if textinput value is empty then
// set disabled for checkbox to false
// else
// set disabled for chexbox to true
}
textInput.addEventListenet('blur', onTextInputBlurHandler);
<input type="text" name="num-input1" id="dis_rm" value=""/>
<input type="checkbox" name="num-input2" id="dis_per" value=""/>
With this info you should be able to get (a little) further. When you do, update your question with your JavaScript code and I am sure people will be happy to help you further.
People are bringing up great suggestions in the comments and answers for better code design and quality, but from a purely functional point of view, there are two core things that you should do to get the functionality that you are describing:
1) As mentioned by Paul S. use the checked property for your checkbox logic. Right now, you are checking to see if the checkbox value is not an empty string, but it will always be an empty string, because that's the value that you've assigned to the element:
<input type="checkbox" name="num-input2" id="dis_per" value="" <----- *here*
Nothing else in your code is changing that, so it will always fail the logic check.
However, the checked property automatically switches between true and false as you check and uncheck the input. To do the logic check that you are looking for using that, do this for your JavaScript!
document.getElementById('dis_rm').disabled = this.checked;
2) Switch the event that you are binding for (at least) the checkbox to the "change" event instead of "blur". For checkboxes, the "change" event will trigger when you click on the checkbox (or hit space bar), but the element still maintains its focus. The blur event Will only fire once the user moves the focus to another element of the page.
I'd also recommend using "change" for the text field (there's no point in running the check, if the value is the same when you leave the field as it was when you entered it), but it's not as important since, from a timing point of view, when the "change" event fires, it happens immediately after the "blur" event, so, from the user's point-of-view, the behavior would be the same.
When it's all said and done, if you made no other changes to your code to improve the code design/quality (Thijs made some great suggestions, BTW), this is the minimum change that you would need to get the functionality that you want:
<input type="text" name="num-input1" id="dis_rm" value=""
onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
onchange="document.getElementById('dis_rm').disabled = (this.checked);" >

jquery is select selected

Ok, first off this isn't to find a value of a select boxes selected option. But its along the lines there of. I have a function I am working on that will check to see if the value selected matches that of the one being compared to from somewhere else, where if the match is found it does one thing if not it does another. However. Due to a recent requirement. The original function breaks cause there is not the probability that the select wont even be touched prior to the need of function.
So Im trying to tell if theres anyway to check to see if the select in question has had anything chosen or not prior to it doing anything else. I'm thinking of the concept of checking for an empty array with length, but I'm not looking to see if the select is empty or not. I need to know if there is a selected value or not so I can act accordingly with that. Hope this makes sense.
I'm totally not sure if I get you right, but wouldn't this be enough:
if( $('option:selected').length ) {
// at least one option element was selected
}
Easiest way to find if a select has a selected value:
var selectedValue = $('#someSelect option:selected').val();
There will always be a selected option. Use:
var $val = $('select option:selected').val();
to capture the value. If no option is selected by the user, the first option will be selected by default. So check against that value. If no value is given to the first option, it will pass back the text of the option. See the following jsFiddle.
However, it is important to note that assuming the first option will always be chosen isn't full proof. Some browsers such as FireFox can cache the value of form elements. In order to ensure that the form element acts as expected use the autocomplete attribute like so:
<select name='something' autocomplete='off'>
See: FireFox Doc on Autocomplete

radio button default value inconsistencies

I am creating a survey. For my purposes, JS validation is fine, and I want to ensure that a radio button in each group is selected. By default, no radio buttons are selected. As I understand it, the user agent automatically sets the value to the first radio buttons value in that group.
For example:
<input type="radio" name="question_1" value="1">
<input type="radio" name="question_1" value="2">
<input type="radio" name="question_1" value="3">
Although none are pre-selected(visually) I can check the value of this group:
$('input[name="question_1"]').val();
this will return "1", the value of the first radio button. This is making it hard for me to see a "group" with no value.
Now heres where it get's weird. When I am ready to post the data to my php script, I grab it from the form like this:
$(pagesArray[currentPage]).children('form').serialize();
This grabs all of my form data nicely BUT doesn't return values for radio group that has no button checked. Why is it that I am not getting the value of the first button in the group when nothing is checked?
$('input[name="question_1"]').val();
Think about what this does. It selects all the elements that match the selector. This is all three elements. It then calls the val method, which gets the value property of the first one. (When you have multiple elements in a selection, the value of the first is returned.) Which (if any) element is checked is irrelevant: unselected elements still have a value property set.
$(pagesArray[currentPage]).children('form').serialize();
This, however, does very different logic. It looks at what fields the browser would send to the server. Since unchecked radio fields are not sent, they are not serialized.
So to quote from your question:
the user agent automatically sets the value to the first radio buttons value in that group
This is false. There is no one global input[name="question_1"] element that has a value set. There are multiple elements (none of which is selected) and you're just getting the value of the first.
To get the value of the radio button group you should use the :checked filter. Like
$('input[name="question_1"]:checked').val()
Example - jsFiddle
And serialize would only select successful controls as per the jQuery api, and a group of radio buttons with none checked is not successful
Excerpt:
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
The requirement for selecting the initial radio button in HTML 4 was never really well followed by all user agents, and was done away with in HTML5. I would manually check the first button in the list and have done with it.
http://css-tricks.com/5972-indeterminate-radio-buttons/

ExtJS ToolBar radio group change menu item manually

How to manually change selected radio item in "Radio Options" menu?
http://www.extjs.com/deploy/dev/examples/menu/menus.js
Don't pay attention on id absent (for menu), I just want to know which method should be use.
I tried setActiveItem but it didn't work.
Thanks
I might misunderstand your question, but what about using the method
setValue( value {String/Boolean} ) : Ext.form.Field
"Sets either the checked/unchecked status of this Radio, or, if a string value is passed, checks a sibling Radio of the same name whose value is the value specified."
I would think that the radio group would make sure that the already checked button would be unchecked.
finally I found a solution:
Ext.getCmp("our_id").menu.items.get(index).setChecked(true, true);
I found that this method has some issues, for example, setChecked works fine
from firebug (only needed item checked), but if it run from javascript file, it
doesn't work like radiobutton, but like checkbox.
For this case, you should run across all items and explicitly checked and unchecked them.
Also be sure, to suppress emit signal (second parameter in setChecked method), to avoid recursion.

Categories

Resources