Grabbing the selected radio button value in react - javascript

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

Related

Changing read only input field text according to radio button selection

the scenario is that i want to set the total price based on user choice of radio buttons, when user chooses one of the radio buttons the price changes accordingly.
here is the the HTML:
<div class="input_box">
<h4 style="text-align: center;">إختر الباقة</h4>
<input type="radio" name="package" class="radio" id="pk1" value="70">
<label for="pk1">بالساعة</label>
<input type="radio" name="package" class="radio" id="pk2" value="200">
<label for="pk2">يوم</label>
<input type="radio" name="package" class="radio" id="pk3" value="2500">
<label for="pk3">شهر</label>
</div>
<div class="input_box">
<input type="number" placeholder="Total Value" name="price" class="name" id="output">
<i class="fa fa-money icon" aria-hidden="true"></i>
</div>
i tried to use javaScript solution such as:
<script>
document.getElementsByName("package").addEventListener("change", function(){
document.getElementById("output").innerHTML = this.value;// Show the value in output element
});
</script>
but it seems nothing works for me, i appreciate any help, Thank you :)
There's a couple of issues with your code to start with. If you check in the browser console you will see errors and specific line numbers where they occurred - that's always a good place to start.
First, getElementsByName returns a collection of elements, so you need to loop over it and attach event listeners one by one. You can't just call addEventListener to apply them all at once like you do with jquery, for example. Take a look at the documentation for that function here: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
Second, you're trying to update the output element by setting its innerHTML, but that element is a number input. You need to update its value property instead.
Here's a snippet bringing all that together.
const radios = document.getElementsByName('package')
radios.forEach(function(radio) {
radio.addEventListener('change', function() {
document.getElementById("output").value = this.value;
})
})
<div class="input_box">
<h4 style="text-align: center;">إختر الباقة</h4>
<input type="radio" name="package" class="radio" id="pk1" value="70">
<label for="pk1">بالساعة</label>
<input type="radio" name="package" class="radio" id="pk2" value="200">
<label for="pk2">يوم</label>
<input type="radio" name="package" class="radio" id="pk3" value="2500">
<label for="pk3">شهر</label>
</div>
<div class="input_box">
<input type="number" placeholder="Total Value" name="price" class="name" id="output">
<i class="fa fa-money icon" aria-hidden="true"></i>
</div>

Radio buttons do not check when clicking the label

I have a group of 3 radio buttons in react semantic ui.
This works correctly. Problem is in UI bug, when I click on one of this radio buttons, buttons are not checked.
Screenshot of ui bug:
Is someone know why buttons are not checked?
Code of radio buttons:
<Form>
<Form.Field>
<Radio
label="New Claims"
name="isTransferred"
value={false}
checked={isTransferred === false}
onChange={this.handleFilterChanged}
/>
</Form.Field>
<Form.Field>
<Radio
label="Transferred Claims"
name="isTransferred"
value={false}
checked={isTransferred === true}
onChange={this.handleFilterChanged}
/>
</Form.Field>
<Form.Field>
<Radio
label="New Claims and Trasferred Claims"
name="isTransferred"
value={'all'}
checked={isTransferred === 'all'}
onChange={this.handleFilterChanged}
/>
</Form.Field>
</Form>
UPDATED:
Generated HTML taken from browser:
<div class="row">
<form class="ui form" style="padding-left: 3.3em;">
<div class="field">
<label>Assignments:</label>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="false">
<label>New Claims</label>
</div>
</div>
<div class="field">
<div class="ui checked radio checkbox">
<input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="true">
<label>Transferred Claims</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="all">
<label>New Claims and Trasferred Claims</label>
</div>
</div>
</form>
The label must have the "for" attribute for an input element to react to a click on its label.
The value of the "for" attribute must be an "id" of an input element.
I believe it should work if you add "id" property to the Radio element.
More information can be found here: HTML element
Try to add checked = true instead of checked={isTransferred === false} and also try to insert the value of the label inside value
In my case it worked by bellow modification.
<Form.Radio
label="New Claims"
id="New Claims"
key="New Claims"
name="assignments"
value={isTransferred}
checked={isTransferred === true}
onChange={this.handleFilterChanged}
/>

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>

jquery radio button validation

I'm using a single search option field for searching in different ways by clicking the radio buttons given on that page. For example search by search-client-by-id, search-client-by-name, search-client-by-emailid etc. and I want to put different jQuery validations on it on the same search field by clicking on different radio buttons.
The validations used for this purpose are like this demo:
http://www.position-relative.net/creation/formValidator/demos/demoValidators.html
<div class="search-job-txtbox" >
<input type="text" name="clientSearchText" id="clientSearchText" value="" class="search-txtbox" onkeyup="javascript:searchByCriteria(this.value,'radio');"/>
<div class="search-icon"><a href="javascript:;"><img src="<%=request.getContextPath()%>/images/search-icon.gif" width="25" alt="Search" title="Search" height="25" /></div>
</div>
<div class="job-options">
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-id" checked="true" onclick="javascript:searchByCriteria();"/></div>
<h5>ID</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-name" /></div>
<h5>Name</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-emailid" /></div>
<h5>Email</h5>
<div class="job-checkbox"><input type="radio" name="radio" id="radio" value="search-client-by-contact-number" /></div>
<h5>Contact</h5>
</div>
You can trigger the validation dynamically
$('input.clientID').click(function() {
$('#form').validationEngine(options);
});
Do that for each type, or implement a case/switch

Categories

Resources