Develop Reference

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

How to add Event with Dynamic Radio Buttons to show a Text Box

I am creating a dynamic online survey form in laravel 8. In some questions I have Radio Buttons with Text Box in case of Other Options.
I am generating these questions from a database.
#case(1)
<input type="radio" name="{{ $property->name }}" value="" hidden checked>
#foreach ($property->options as $option)
<input id="{{ $option->option }}" onclick="ShowHideDiv()" type="radio" name="{{ $property->name }}" value="{{ $option->option }}"
{{ old($property->name) == $option->option ? 'checked' : '' }}>
{{ $option->option }}</br>
#endforeach
<div id="dvtext" style="display: block">
<input type="text" id="txtBox" />
</div>
You can see in code, $property is a question and $option are associated options of each question. I have more than 10 question of similar nature. It means coming out of database dynamically. Can you please help me in:
How can add a behavior that, if somebody click on Other (radio button option) on any question, then text box should appear but only on that question.
OR If I keep text box visible all the time and click on text box, automatically Other option (radio button) should be selected/checked.
Thanks

Whenever your radio button is checked first see if the value is Other or not depending on this show() or hide() your div.
Demo Code :
$("input[type=radio]").on("change", function() {
//check if radio is checked and value of checked one is `others`
($(this).val() == "Other") ? $(this).siblings(".dvtext").show(): $(this).siblings(".dvtext").hide()
})
.dvtext {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--give outer divs to seprate-->
<div>
<input type="radio" name="1" value="" hidden checked>
<input type="radio" name="1" value="somethings">somethings <br/>
<input type="radio" name="1" value="Other">Other
<!--use class-->
<div class="dvtext">
<input type="text" class="txtBox" />
</div>
</div>
<div>
<input type="radio" name="2" value="" hidden checked>
<input type="radio" name="2" value="somethings">somethings <br/>
<input type="radio" name="2" value="Other">Other
<!--use class here-->
<div class="dvtext">
<input type="text" class="txtBox" />
</div>
</div>

ng-link is not working with radio buttons

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>

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>

Why is this serialization not returning CHECKED checkboxes

I have a form with checked checkboxes. Its serialization is not returning those checked checkboxes. This is the jQuery code I am using to perform the serialization.
$('form.subscribe').serialize()
The above serialization returns
email=
This is the markup:
<form class="subscribe">
<div class="body">
<div class="email input">
<input name="email" placeholder="your email address" />
</div>
<div class="expandable">
<div class="fieldLabel emphasis">I am a:</div>
<div class="checkbox">
<input id="isDeveloper" type="checkbox" />
<label for="isDeveloper">Developler<label>
</div>
<div class="checkbox">
<input id="isDesigner" type="checkbox" />
<label for="isDesigner">Designer</label>
</div>
<div class="checkbox">
<input id="isHR" type="checkbox" />
<label for="isHR">Talent Coordinator</label>
</div>
<div class="checkbox">
<input id="isPM" type="checkbox" />
<label for="isPM">Project Manager</label>
</div>
<div class="fieldLabel emphasis">Email me about:</div>
<div class="checkbox">
<input id="wantsCollab" type="checkbox" checked="checked"/>
<label for="wantsCollab">Collaboration</label>
</div>
<div class="checkbox">
<input id="wantsBlog" type="checkbox" checked="checked" />
<label for "wantsBlog">Blog Posts</label>
</div>
</div>
<div class="button">
<input class="emphasis" type="submit" value="subscribe">
</div>
</div>
</form>
As you can see, there is 1 text input and 6 checkboxes. 2 of those checkboxes are checked, yet only the text input is being returned in the serialization.

Your checkboxes do not have name attributes, and your email input has no type specified. Also your form has no action or encoding specified, which you might want for purposes of graceful degradation.

From the jQuery docs
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.