Disabling input field based on radio button in Angular 2 - javascript

Say i have these radiobutton, i make a click function localClick and for first button it should have 1 and second give value 2
<div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"></p-radioButton></div>
<div class="ui-g-12"><p-radioButton name="group1" value="Remote" label="Remote" (click)=localClick(2) ></p-radioButton></div>
now i want my input field
Example
<input id="pass" type="text" style="width:80%" disabled="exampleFlag" pInputText [(ngModel)]="password">
I googled a bit and added this thing, disabled=exampleFlag and now in the ts file i set it to true or false based on which radiobutton was clicked so i do
exampleFlag=false; // set it to false initially so box is not disabled
localClick(x) {
if(x==1){
this.exampleFlag=true;
}
else{
this.exampleFlag=false;
}
}
basically what im doing here is that if the first radiobutton is clicked then set it to true (so that the box will get disabled) but otherwise it should be enabled whether no buttons are selected or whether the 2nd radio button is selected.
I am new to this but i googled aa bit and came up to solutions like this however for me the box always stays disabled no matter what i do.
I think the mistake im making is the way the (click) thing is being defined in html file and maybe in the ts file also but im not sure.

Wrap disabled in square brackets to bind it to an attribute value.
<input id="pass" type="text" style="width:80%" [disabled]="exampleFlag" pInputText [(ngModel)]="password">

Related

accessibility - grouped checkboxes where one checkbox has a related textarea

I have a feedback form where I am asking users for a reason for cancellation, something like this:
label {
display: block
}
button {
display: block;
}
<form>
<fieldset>
<legend> Reason for cancellation? </legend>
<label>
<input type="checkbox"> Reason 1 </input>
</label>
<label>
<input type="checkbox"> Reason 2 </input>
</label>
<label>
<input type="checkbox"> Reason 3 </input>
</label>
<label>
<input type="checkbox"> Reason 4 </input>
</label>
<label>
<input type="checkbox"> Other </input>
</label>
<textarea aria-label="other reason"></textarea>
<button> Submit </button>
</fieldset>
</form>
The textarea is related to the Other checkbox, i.e, it only gets activated if the user selects the Other option, otherwise it remains disabled
How do I represent that association in markup?
Should I group the checkbox and the textarea using another fieldset? I am not sure if this is semantically correct, and also in general this is discouraged.
https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/#:~:text=It%20is%20possible%20to%20nest,fields%20belong%20within%20which%20fieldset.
Should I use something like aria-controls or aria-owns?
Would it be enough to just mention Other (Please fill the reason below) in the checkbox label, so that when the label is announced, the user can get to know that there is a textarea just after the checkbox which can be reached by tab
It might also be ok to change the UX to always allow the user to optionally fill in the text area for any of the selected reasons , so the text area can be part of the same fieldset and can be enabled all the time
NOTE:
I have seen some examples, specifically Google Forms, and Search Engine Journal.
Google forms solves this issue by placing the textbox next to the checkbox, the textbox is always enabled, and as soon as you focus on the textbox, the checkbox gets automatically checked.
Search Engine Journal, does not explicitly associate the controls, but they do mention it in the checkbox label, to fill in the reason below.
Answer on using ARIA
You can use aria-controls, it seems like a good fit for your case.
it looks more appropriate than aria-owns, see this question about difference between aria-own and aria-controls.
However, screen reader support is quite inconsistent, and even if it is supported, it's at the end quite rarely known and used by screen reader users.
Therefore, in addition, it's always good to add a precision in clear text like you suggest e.g. "Other reason (please explain below)". Adding that indication in the label of the checkbox is a good choice.
This added precision will anyway never by harmful to anyone, so you have no reason not to do it.
Answer on the UX design
If you have added the precision "please explain below", there's really no problem in enabling the textarea depending on the checkbox.
Simply, make sure that the textarea come after the enabling checkbox in tab order, so to ensure that the user won't miss it and won't need to go back and forth to fill it in.
Unless you have a weird design, it should normally already be the case.
The other alternative, checking the checkbox automatically when entering a reason is equally no problem, but you need to be more carful on when you do it:
Don't check the checkbox on focusing the textarea, otherwise keyboard only users will trigger it when they don't want to, and even normal users may click on the textarea and then change their mind
Don't check the checkbox on entering a character in the textarea. It's probably a bad idea because I may start typing something, and finally clear everything and change my mind
What about checkign the checkbox when the textarea loses the focus while being non-empty ?
You may, optionally, show a snackbar or something like that with aria-live=polite, telling that the checkbox as been checked automatically because you ahve entered something.
This kind of bonus indication on things modified automatically would be quite useful in more complex forms, but for your case as it is presented here, it's totally superfluous because the relationship is obvious.
You could just hide the textarea by default and let it show up with a small javascript to toggle a class to set display to block.
<body>
<form>
<fieldset>
<legend> Reason for cancellation? </legend>
<label>
<input type="checkbox"> Reason 1 </input>
</label>
<label>
<input type="checkbox"> Reason 2 </input>
</label>
<label>
<input type="checkbox"> Reason 3 </input>
</label>
<label>
<input type="checkbox"> Reason 4 </input>
</label>
<label>
<input type="checkbox" class="otherCheckbox"> Other </input>
</label>
<textarea aria-label="other reason" class="otherTextarea"></textarea>
<button> Submit </button>
</fieldset>
</form>
</body>
<script>
let otherCheckbox = document.querySelector(".otherCheckbox")
let otherTextarea = document.querySelector(".otherTextarea")
otherCheckbox.addEventListener("change", e => {
otherTextarea.classList.toggle("show")
})
</script>
Added to css:
.otherTextarea {
display: none;
}
.show {
display: block;
}

How to enable HTML elements on submit

I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?
Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.
Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm

Unselect a checkbox by default

I want to create a checkbox which is unchecked always by default and users should not check it. I don't want to make the checkbox disabled as i want to pass the value of the checkbox when i submit the form. Please suggest.
The below code is not working:
<input type="checkbox" id="chkbox1" name="chkbox1" value="unChecked" checked="false" readonly="readonly">
With the above code checkbox is always selected, i want the checkbox always be unselected and users should not able to select it.I should not use the disable option too as i want to send the value of checkbox when i submit the form.Thanks.
Just remove the checked attribute all together
<input type="checkbox" id="chkbox1" name="chkbox1" value="unChecked" readonly="readonly" />
Setting the checked attribute with any string value (even false) makes the checkbox checked
i want the checkbox always be unselected and users should not able to select it.I should not use the disable option too as i want to send the value of checkbox when i submit the form
It doesn't really sound like you want a checkbox at all, but just a hidden input that sends a value
<input type="hidden" name="chkbox1" value="unChecked" />
checked attribute sets the checkbox to checked status, no matter what value the attribute checked has.
checked="checked"
checked="true"
checked="false"
checked=""
all these set to checked status
so there is no way to unset the checkbox (except some js solution) manuelly except for completely dropping the checked attribute
UPDATE: Simply change disabled to readonly, so that user cannot check it, but you still can submit this field with form
I'm new so I can't leave a comment. But according to my understand to your problem, like#adeneo suggested, why not first use a hidden one that does pass a value for the "do" with the program; then put up a dummy disabled one for the "look" with the users? As you only need it for the moment? Then later you just hide the dummy one and show the real one?

prevent button to reset textbox value

I am trying to create mcq question and able to add the question. but the problem appear when i already fill the textbox and when i press the add question button, the textbox value always disappear.
<form name="newdocument">
<div id="questions" data-role="fieldcontain"><input type="text" value="dsa"/></div>
<input type="button" value="Add Question" onclick="AddQuestion();" />
</form>
the javascript code is on http://jsfiddle.net/Xv3Xq/1/
Dont use innerHtml+=, its bad. The stuff you write in an input field will get erased, since its not considered when using innerHtml but rather erased. Use jQuery! Something like:
$('#addQuestion').click(function() {
$('<input />').appendTo($('#questions'));
});

How to detect if a one radio button in a group has been selected with jQuery

I'm 95% there in writing an HTML5 'required' attribute fallback, I'm having a small issue and I've come to the end of the road in my knowledge!
What works:
Detecting 'required' attributes, looping through and alerting the user in several ways (onsubmit and entering data into the field).
Problem:
I'm taking the form one step further and want to make checkboxes and radio buttons required as well. By doing this, I need to add a required attribute to each radio/checkbox. I need to find out how to differentiate the group of buttons, as currently you need to tick/untick both sets of buttons for the form to validate and let you submit. So in a nutshell, I have three required radios for example, each will need to be ticked, how can I detect whilst looping through the inputs that one of the required radios/checked is ticked - I assume this would be done by matching the 'name' attribute, and if none in the name group are selected then alert just one error.
Here's the state of my loop, you can see I detect the input type as well, just unsure of the next steps forward. a jsFiddle is also below if anyone would be kind enough to help out. Many thanks.
// loop through class name required
$('.required').each(function () {
// this
var self = $(this)
// check shorthand if statement for input[type] detection
var checked = (self.is(':checkbox') || self.is(':radio')) ? self.is(':not(:checked)') : false
// run the empty/not:checked test
if (self.val() === '' || checked) {
// show error if the values are empty still (or re-emptied)
// this will fire after it's already been checked once
self.siblings('.form-error').show()
// stop form submitting
e.preventDefault()
// if it's passed the check
} else {
// hide the error
self.siblings('.form-error').hide()
}
})
Here's my jsFiddle: http://jsfiddle.net/zykF9/
With class selectors you could archive it
http://jsbin.com/owokuw/1/edit
UPDATE
to make easier to understand, here a update:
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="hidden" id="selectedRadioYes" />
<input type="button" id="botton" value="Botton" />
Jquery
$(".myradio").click(function(){
$("#selectedRadioYes").val(1);
});
$("#botton").click(function(){
if($("#selectedRadioYes").val() === "1")
alert("you can go on");
else
alert("need select one radio");
});
http://jsbin.com/owokuw/2/edit

Categories