ng-link is not working with radio buttons - javascript

I am trying to change content using radio buttons. content changes when click on radio button but radio is not checked it stays empty, i know something is wrong, can someone suggest me a solution.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['OneWayFlight']" id="oneWayFlight" name="FlightType" />
<label for="oneWayFlight">One way</label>
</div>
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['ReturnTripFlight']" id="roundTripFlight" name="FlightType"/>
<label for="roundTripFlight">Round Trip</label>

You can use ng-model instead of ng-link.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-model="flightType" value="Round Trip">Round trip<br/>
<input type="radio" ng-model="flightType" value="One Way">One Way<br/>
<tt>Flight Type = {{flightType | json}}</tt><br/>
</div>

Related

Javascript: Input type radio

How can I select input type radio by just clicking the space around it?
You could use a <label> tag:
<input type="radio" name="box" id="box">
<label for="box">Your content here</label>
Clicking on the label toggles the input.
You should be using the label element. There are two ways to use it with a radio button, as shown below.
<form>
<label>
<input type="radio" name="options">
<span>Option 1 - Inside Label</span>
</label>
<br>
<input type="radio" name="options" id="button2">
<label for="button2">
<span>Option 2 - Outside Label</span>
</label>
</form>

Grabbing the selected radio button value in react

I was to trying to get the value of checked radio button form the 4 radio buttons (same name). This is all inside the functional component. But getting some trouble to get the values.
{details.map(questions => {
const { counter, question, option1, option2, option3, option4, crr_option } = questions
return (
<div key={counter}>
<h2>{counter}. {question}</h2>
<div className="q-cont">
<div className="radio-cont">
<label htmlFor="op1">{option1}</label>
<input label={option1} type="radio" name="op" id="op1" />
</div>
<div className="radio-cont">
<label htmlFor="op2">{option2}</label>
<input type="radio" name="op" id="op2" />
</div>
<div className="radio-cont">
<label htmlFor="op3">{option3}</label>
<input type="radio" name="op" id="op3" />
</div>
<div className="radio-cont">
<label htmlFor="op4">{option4}</label>
<input type="radio" name="op" id="op" />
</div>
</div>
</div>
);
})}
It is simple, you need to provide a value attribute and an onClick listener, to each of the radio buttons, to gather the results. I have created a minimal working example here:
Handling click events of radio-buttons in React

radio input checked after click on input type text

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>

Use ng-message with ng-requried

I have a form that validates a radio input. The radio input is required (The user has to choose one of the radio fields before clicking on the submit button). I'm using for that ng-required in the input radio.
The radio input looks like something like this :
<input type="radio" name="myRadio" value="1" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="2" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="3" ng-model="theModel" ng-required="!theModel">
I want to show a message in my form once the user submits. I use for that the ng-message directive. I use it this way :
<div class="msg-error-input" ng-if="!theModel" ng-messages="myForm.myRadio" role="alert">
<div class="icon my-icon" ng-message="required">
It has to show an error here. But this doesn't seem to work ! It seems that there's no link between the ng-message='required' and the ng-required..
</div>
</div>
I resolved that by doing :
<form name="myForm" id="myForm">
<input type="radio" name="myRadio" value="1" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="2" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="3" ng-model="theModel" ng-required="!theModel">
<div class="msg-error-input" ng-if="!theModel && submitted" ng-messages="myForm.myRadio" role="alert">
<div class="icon my-icon" ng-message="required">
It has to show an error here. But this doesn't seem to work ! It seems that there's no link between the ng-message='required' and the ng-required..
</div>
</div>
<button type="submit" data-ng-click="submitted"/>
</form>
( I saw that the ng-submitted was not added to my form, so I added a variable submitted on click )

How to make selecting a radio button required before submitting

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>

Categories

Resources