I have a radio button and a text field. I want the text field to be required only if the radio button is ticked.
<label class="radio">
<input type="radio" value="createNewCollection" ng-model="selectedCollection" />
</label>
<input type="text" ng-model="collectionName" placeholder="Create new Collection"/>
So, collectionName is only required if createNewCollection is selected.
angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form" ng-app="myApp">
<label class="radio">
<input type="radio" value="createNewCollection" ng-model="selectedCollection">
</label>
<input type="text" name="input" ng-required="selectedCollection" ng-model="collectionName" placeholder="Create new Collection">
<p ng-show="form.input.$error.required">This is required.</p>
</form>
You need to set the ng-required attribute of that input to the model name of the radio input. ng-required="selectedCollection"
Read the docs here.
Related
i got simple form what contain radio input and text input.
My goal is: check radio input when click on text input
Thanks
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>
You should have unique id for the input and radio then you can associate a click event in input by its id that will check radio input when click.
using jQuery
$('#gr_1_input_4').click(function(){
$('#gr_1_option_4').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
using JavaScript
document.getElementById('gr_1_input_4').addEventListener('click', function(){
document.getElementById("gr_1_option_4").checked = true;
});
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
You can have focus event handler for input text and inside it set checked property of the radio button.
NOTE: Don't use same id for multiple html elements as it will end up with javascript / jquery not working for id oriented code. You have used gr_1_option_4 as id for both radio and text input.
$(function(){
$("input[type=text][name=group1]").on("focus", function(){
$("input[type=radio][name=group1]").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>
Firstly change your Element's Id , you cant have same ids among elements.
Secondly you can add an event handler like
document.getElementById("textId").onclick = function() {myFunction()};
and define that function like
function myFunction() {
document.getElementById("radioButtonID").checked = true;
}
EDIT: I FILL THE ANSWER AND SEE THAT ALREADY SOMEONE HAD ASNWERED but i keep my answer because is not Jquery like the other
One alternative way is using prev .
$('input[type="text"]').click(function(){
$(this).prev('input[type="radio"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
I'm currently working with a contact form plugin through Wordpress and so the outputted HTML and JS looks like the following:
$('.form .form--field label').click(function() {
$(this).parents('.form--field').addClass('form--field--focus');
$('input').filter(':first').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
</div>
The design has caused me to get a bit hacky with it but in any event, I'm trying to figure out how to force focus on the respective input whenever the user clicks on a label. At the moment, this is where I'm at with it. If anyone has any input or suggestions, that would be greatly appreciated.
the for attribute on a <label> looks for an id not a name. Example below should work without JavaScript
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" id="firstname" name="firstname">
</span>
</div>
Although if you really want to do this with JavaScript/JQuery and not be tied down to using a label you can do it this way using $(this).next().children().focus();
$('.form--field__label').click(function() {
$(this).next().children().focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text">
</span>
</div>
<div class="form--field form--field__secondname">
<!-- using a span instead of label as an example !-->
<span class="form--field__label">Second Name</span>
<span>
<input type="text">
</span>
</div>
set input id="firstname" because you want focus on label click. This is builtin feature in html.
<input type="text" id="firstname" name="firstname">
More details here https://www.w3schools.com/tags/tag_label.asp
for multiple input you can use it like this
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
If you still persist you can use it like this
$('.form--field label').click(function() {
//It will look next sibling which is span and then find input in it and then focus it
//so it doesn't focus on other children elements
$(this).next('span').find('input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
<br>
<label class="form--field__label">Last Name</label>
<span>
<input type="text" name="lastname">
</span>
</div>
I would really appreciate your help. Am using AngularJS to render questions in a quiz in the manner below:
<form name="form1" ng-controller="quizController" ng-submit="submit()">
<div class="form-group">
<span class="col-xs-3">What is your favorite color?</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
ng-required is enforcing the requirement that one of the option must be selected. When no option is selected and the user clicks the submit button, all the options are highlighted in red and the text You must choose an option appears next to the first option. I would like to tweak this behaviour such that when no option is selected, it is the question text that appears in red. Thanks for your assistance
Here is an example to show how you can do it. Basically you need to use $submitted and $invalid properties of FormController of AngularJS. Take a look at them here: https://docs.angularjs.org/api/ng/type/form.FormController
I used bootstrap's has-error class to highlight the question, if the color is not selected and the form is submitted the question will be highlighted red. I added novalidate attribute to disable html5 validation and used only angular's validations.
angular.module("myApp", []).controller("quizController", function($scope) {
$scope.submit = function() {
console.log("oley");
}
})
.has-error {color: red}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp">
<form name="form1" ng-controller="quizController" ng-submit="submit()" novalidate>
<div class="form-group">
<span class="col-xs-3" ng-class="{'has-error' : form1.color.$invalid && form1.$submitted}">What is your favorite color?</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
Here is a solution based on CSS.
You could wrap all radio texts into an own span:
<span>
<input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />
<span>Red<span>
</span>
....
and then use the following selector to set the text-color of these spans to red if the radio button is invalid (because its value is missing):
input[type=radio]:invalid + span { color: red; }
Besides I think you only need to place the ng-required attribute only on one radio button (and if its is constant you could replace it by a simple required).
I created a form which contains two Radio Buttons.
Each radio button displays a separate form, when Clicked.
When a button is un-clicked, the form disappears from view (it is not shown)
I also added a second JavaScript Function, which disables the "SUBMIT" button, if none of the radio buttons are clicked.
The program works fine..........except I have the following problems :
(a) For some reason, I am able to click BOTH radio buttons! Radio-buttons should not allow for more than one selection. But, in my form, both radio buttons are clickable
(b) the second JS function is not working; disabling the SUBMIT button is easy. But...........when I click either of the radio buttons, the SUBMIT button does not enable.
Here is the first JS function (for "hiding" the forms under each radio buttons)
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#firstformContainer').toggle('show');
jQuery('#secondformContainer').hide();
}
if (c.value == "1") {
jQuery('#secondformContainer').toggle('show');
jQuery('#firstformContainer').hide();
}
};
</script>
And the second function, for disabling the SUBMIT button :
<script type="text/javascript">
function fCheck() {
document.my_form.submit.disabled
=!(document.my_form.formselector1.checked ||
document.my_form.formselector2.checked);
}
</script>
And here is the form :
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector"
id="formselector1" onClick="displayForm(this); fCheck()"></input>Input
Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname"
name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
<input value="2" type="radio" name="formselector"
id="formselector2" onClick="displayForm(this); fCheck()">
</input>Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname"
value="$surname">
</dd>
</form>
</div>
<br>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
What am I missing?
UPDATE
I have solved the RADIO BUTTON problem.
Now, I need to fix the second problem, with the JS function : fCheck ()
It is not working.
I have feeling it's because : I am not calling BOTH functions correctly in the ONCLICK.
<input value="1" type="radio" name="formselector" id="radio1"
onClick="displayForm(this); javascript:fCheck()"></input>
<input value="2" type="radio" name="formselector" id="radio2"
onClick="displayForm(this); javascript:fCheck()"></input>
You cannot nest forms. This makes the second radio button not inside the form and hence it allows you to select both at the same time. Rewrite your html like this
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector" id="formselector1" onClick="displayForm(this); fCheck()"></input>
<input value="2" type="radio" name="formselector" id="formselector2" onClick="displayForm(this); fCheck()"></input>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
Input Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname" name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname" value="$surname">
</form>
</div>
<br>
I have a series of questions which have radio answer choices. I can't figure out how to use AngularJS validation to require the user to select one before clicking "Next". Below is my code:
EDIT: Please note that clicking "Next" gets the next question node from the controller depending on what choice was made. It's basically a dynamic questionnaire.
<form novalidate>
<div class="radio" ng-repeat="answer in node.Answers">
<input type="radio" name="answerGroup" ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/> {{answer.Text}}
</div>
<div>
<input type="button" ng-click="previous()" value="Previous"/>
<input type="button" ng-click="next(selectedAnswer)" value="Next"/>
</div>
</form>
EDIT: Here is a working fiddle
First give the form a name so that you can refer to it:
<form name="myForm" novalidate>
Next add the required attribute to the radio button:
<input type="radio" name="answerGroup" required
ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/>
Then use ng-disabled to bind your next button's disabled property to the validity of the radio button:
<input type="button" ng-click="next(selectedAnswer)" value="Next"
ng-disabled="myform.answerGroup.$invalid" />
Look below, using ng-show to display an error message should neither radio button be clicked.
<label for="dateofbirth">
<span>Are you the primary cardholder?</span>
</label>
<ul>
<li>
<label for="yes">
<input type="radio" id="yes" name="cardholder" ng-model="user.cardholder" value="yes" required/>
Yes
</label>
</li>
<li>
<label for="no">
<input type="radio" id="no" name="cardholder" ng-model="user.cardholder" value="no" required/>
No
</label>
</li>
</ul>
</fieldset>
<span class="error" ng-show="myForm.cardholder.$error.required && submitted == true"><i class="fa fa-exclamation-circle"></i>Please select an answer.</span>