Radio button policy - forms

Do radio buttons have policy of setting default value? I want to create form where are radio buttons and it is required value. What is better to select one on show form or show all and put error message(if any radio button, not selected on submit)?

You can select a default radio value by using checked
<input type=radio name=r1 value="1" checked>
<input type=radio name=r1 value="2">
Here default value is set to 1, v should use checked keyword.
It is better to set default radio button option.
Suppose if u dont want to use default radio button selection You can call a js function(using onsubmit()). Like this
<form id="ID" method="post" action="servleName" onSubmit="return validateOption()">
<input type=radio name=r1 value="1" >A</input>
<input type=radio name=r1 value="2">B</input>
<input type="submit" value="Submit"><span id="error" style="display:none;"></span>
</form>
Your script goes here to validate whether option selected or not,Submission of page is possible only if onsubmit=true ie if validateOption() returns true.
<script>
function validateOption()
{
var group=document.getElementsByName("r1");
for ( var i = 0; i < group.length; i++)
{
if (group[i].checked)
return true;
}
// else you can show error message like this
document.getElementById("error").innerHTML="Please enter your choice";
return false;
}
</script>

Related

Angular 5 - Disabling Radio Buttons

I have a radio button group in Angular 5. I want to disable some options, using the [disabled] attribute. However, I am noticing only the first radio button actually gets disabled. See my plunker: http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview
Even if I hard code [disabled]="true", it still doesn't disable the second radio button. I don't want to switch to using a <select>, so I am curious if there is another way to get this to work with radio buttons.
There can be 2 solutions for this :-
1. Using the disabled attribute ([attr.disabled])
One solution to this problem can be using the disabled attribute ([attr.disabled]) instead of the disabled property ([disabled]), but [attr.disabled] works slightly differently, to enable the radio button you need to pass null to [attr.disabled] and any non-null value to disable it. Consider the below example :-
<input type="radio" name="enabled" [attr.disabled]="null" />Enabled1
<input type="radio" name="enabled" [attr.disabled]="null" />Enabled2
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled1
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled2
In this example the set of radio buttons named "enabled" will be enabled since for them [attr.disabled] is set to null, whereas the set of radio buttons named "disabled" will be disabled despite the [attr.disabled] being set to "false" this is because false is a non-null value.
2. Using fieldset tag
Another even better solution for this problem is using the <fieldset> tag for grouping the radio buttons together and then setting the [disabled] property on that <fieldset> tag instead of individual radio buttons. Below is an example for the same :-
<fieldset [disabled]=true>
<input type="radio" name="test" />yes
<input type="radio" name="test" />no
</fieldset>
Use this : (for reactive form approach)
<input
type="radio"
id="primaryIPV6"
value="2"
[attr.disabled]="flagValue ? '' : null"
formControlName="p_ip_type"
(change)="optionalFn()">
Set flagValue programmatically from .ts class:
use -> null : false (null would be interpreted as false )
use -> true/'' : true (true or simply blank would be interpreted as true)
One way to deal with the problem is to place the disabled binding on the last radio button in the group. Here is a modified version of your code: http://plnkr.co/edit/v6S5G7Do5NAMKzZvNdcd?p=preview
<input type="radio" name="answer" value="Yes" [(ngModel)]="name" /> Yes
<input type="radio" name="answer" value="No" [(ngModel)]="name" [disabled]="isDisabled()" /> No
There is a bug and a design problem in disabling (using [disabled]) Angular template driven radio buttons.
I fixed the bug in this pull request: https://github.com/angular/angular/pull/20310
The design problem is that we put the [disabled] binding on a single radio button, but it's all the group that is affected by the data binding. Here is a modified version of your code that illustrate the problem: http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview
It works fine like this [attr.disabled]="isDisabledState === true"
And in the component class you can have isDisabledState: boolean = true
I ended up cheating. Instead of using the same name for both radio buttons, I gave each radio button a unique name and bound them to the same backing field. http://plnkr.co/edit/zNbODcAqZMgjXfluxhW6?p=preview
#Component({
selector: 'my-app',
template: `
<form>
Hello {{name}}!!!
<input type="radio" name="answer1" value="Yes" [(ngModel)]="name" [disabled]="isDisabled1()" /> Yes
<input type="radio" name="answer2" value="No" [(ngModel)]="name" [disabled]="isDisabled2()" /> No
</form>
`,
})
export class App {
name:string;
isDisabled1(): boolean {
return false;
},
isDisabled2(): boolean {
return false;
}
}
Since they are both bound to the same backing field, they end up being mutually exclusive, behaving the way radio buttons should. It also allows them to be independently disabled.
In my real-world scenario, I actually only did one-way binding with (click) events to set the bound value, but it's the same trick.
I was working with ionic and the following works for me.
<ion-radio class="fix-radio_button" *ngIf="!IsSuspended" color="default" [disabled]="q.QuestionOptionId==q.AnswerId" [checked]="q.QuestionOptionId==q.AnswerId"></ion-radio>
Considering DrNio answer you should use attr.disabled and set value as [value]="'Yes'". This is because assigning as "Yes" makes angular to evaluate it as an expression instead of just a value.So your input element would be :
<input type="radio" name="answer" [value]="'Yes'" [(ngModel)]="name" [attr.disabled]="isDisabled()" />
Here is your updated running code and punker..
Update Plunker
#Component({
selector: 'my-app',
template: `
<form>
Hello {{name}}!!!
<input type="checkbox" name="dus" [(ngModel)]="isDisabled">
<input type="radio" name="answer" value="Yes" [(ngModel)]="name" [disabled]="isDisabled" /> Yes
<input type="radio" name="answer" value="NO" [(ngModel)]="name" [disabled]="isDisabled" /> No
</form>
`,
})
export class App {
name = 'Yes';;
isDisabled = true;
}
If you want to disable a specific radio button of angular material which is in a loop, you can do this based on specific condition. This can be done like this, using the disabled attribute of the radio group:
In HTML:
<mat-radio-group>
<mat-radio-button value="1"
[disabled]="name === 'welcome' ? false : true"
*ngFor="let name of names;">
{{ name }}
</mat-radio-button>
</mat-radio-group>
In .ts file:
public names = [
'welcome',
'computer',
'keyboard'
]

How to avoid some required fields to be checked depending by a radio button

Maybe is better to explain with an example.
I have a form with a radio button with YES/NO items.
When a user select NO the fields below the radio button are disabled, while when he click on YES, the fields are enabled.
<form id="myForm">
<h3>Test Form</h3>
<input type="radio" name="radiobutton" id="needabikesino0" onclick="enableDisableAll();" /> Yes
<input type="radio" name="radiobutton" id="needabikesino1" onclick="enableDisableAll();" /> No
<p><input type="text" id="numerobiciclette" name="mybikes" placeholder="bike numbers" disabled /></p>
<p><input type="text" id="altezza" name="myheight" placeholder="my height" disabled /></p>
<p><input type="text" id="numerocaschi" name="myhelmets" placeholder="my helmets" disabled /></p>
</form>
function enableDisableAll() {
cb1 = document.getElementById('needabikesino0').checked;
document.getElementById('numerobiciclette').disabled = !cb1;
document.getElementById('altezza').disabled = !cb1;
document.getElementById('numerocaschi').disabled = !cb1;
}
See here: http://jsfiddle.net/dforce/0u13z7md/
The PROBLEM is:
When the user choose NO on the radio button, is not possible to send the form because the fields are compulsory.
I need the form to be sent even when the user choose NO.
How can I solve this issue?
Thanks for your help!
You could try making the field readOnly?
http://www.w3schools.com/jsref/prop_text_readonly.asp

Adding an extra relative value to an input value field

I'm currently creating a form that is very similar to the following code.
<form name="test" action="/go/test" method="post">
<input type=hidden name="hotspot_url" value="http://www.test.com/">
<input name="cky" value="<%write(cky);%>" type="hidden">
<input name="accept" value="Accept" type="hidden">
<input name="saccept" size="20" value="I Accept" onClick="hotspot.accept.value='Accept'" type="submit">
<input name="sdisconnect" size="20" value="I Decline" onClick="hotspot.accept.value='Decline'" type="submit">
</form>
However, the new form has a text input field. What I want to achieve is that the value entered in that text field is placed, upon send, after the test.com value (location marked with xxx)
<input type=hidden name="hotspot_url" value="http://www.test.com/xxx">
I've looked around - but i can't seem to find a solution.
What would be the best way to get this done?
You can use a buttons onclick event, which is not of type submit. When onclick occurs, you can first change the value of hidden field and then submit the form.
Or if you use JQuery, you can use the following jQuery code to do something before the form is submitted:
$(function() {
$('#form').submit(function() {
// DO STUFF
return true; // return false to cancel form action
});
});
You can give both inputs an id, and do something like this:
give the form an "onsumbit= doThis()"
function doThis(){
var hiddeninput= $('#hiddeninput').val();
var input = $('#input').val();
$('#hiddeninput').val(hiddeninput+input);
return true;
}
this is very simple nothing fancy.

Multiple Form Actions to different pages / different target windows

I have a form on my page that needs to have multiple form actions associated with it. I'm using the following script in conjunction with the following code to achieve this:
<script>
function submitForm(action)
{
document.getElementById('summary').action = action;
document.getElementById('summary').submit();
}
</script>
<form action="go-gold.php" method="post" enctype="multipart/form-data">
<input type="image" id="arrow" name="go_back" onclick="submitForm('go-gold.php')" value="go_back" src="images/arrow_back.png" class="submit_button" /><br>
<input type="image" id="arrow" name="submit_form" onclick="submitForm('registration.php')" value="submit_form" src="images/arrow.png" class="submit_button" />
</form>
The first button needs to "go back" within the same browser window (self), and the second button needs to submit the info to a new window (blank). How do I modify the code to achieve this? Putting "target" functions within the input type doesn't work, and putting the target in the Form tag makes both submit buttons submit to the same window.
Thanks!
Easy with jQuery, also you have to identical ids for two separate form elements. You should have these as distinct ids unless you want to use a class name. Php can submit forms to the same page using the $_SERVER superglobal by using $_SERVER['PHP_SELF'] as the forms action name.
<script>
$(document).ready(function() {
$(".submit_button").click(function() {
clickVal = $(".submit_button").val();
if(clickVal == 'go_back') {
//do go back stuff
}
if(clickVal == 'submit_form') {
// do actions for other page
}
});
});
</script>
<form action="go-gold.php" method="post" enctype="multipart/form-data">
<input type="image" value="go_back" src="images/arrow_back.png" class="submit_button" /><br>
<input type="image" value="submit_form" src="images/arrow.png" class="submit_button" />
</form>

Submit Search on Enter Key?

What needs to be done to have this form submitted when someone hits the 'enter' key?
<form id="search" onsubmit="javascript:search(document.getElementById('searchText'))">
<input type='text' id='searchText' autofocus />
<input type='button' onclick="search(document.getElementById('searchText'))" value='Search' />
</form>
You can just use a form as below, with input type submit, which in this case, if you press enter in any input - if you had more of them - it will be a default behaviour of the form to be submitted:
<form id="search">
<input type='text' id='searchText' />
<input type='submit' value='Search' />
</form>
or, as it shows, you want to use the onsubmit function and handle the "submit" of the form, so you can do this:
<form id="search" action="#">
<input type="text" id='searchText' name="myinput" onkeypress="handle" />
</form>
<script>
function handle(e){
if(e.key === "Enter"){
alert("Enter was just pressed.");
}
return false;
}
</script>
A code, quite the same, can be found on this similar question: How to capture Enter key press?
Hope I answered your question, even out of time.
This example worked perfectly for me:
var input = document.getElementById("myInput");
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("myBtn").click();
}
});
I took the example at w3schools.