I'm having problems getting the radio button value when the form is submitted. I thought that when the form is submitted it would get the final selection that user made but it appears it doesn't recognize which one is selected.
On initial load: This is inside my form
<div id="question1">
<label> Do you shop mostly on-line or at physical stores? </label>
<div class="radioButtons">
<span>
Mostly on-line stores
<input name="question1" value="on-line" type="radio">
</span>
<span>
mostly physical stores
<input name="question1" value="physical" type="radio">
</span>
<span>
About both equaly
<input name="question1" value="both" type="radio">
</span>
</div>
</div>
in my submit handler
$(".aboutmeQuestions").on("submit", function(e){
e.preventDefault();
var values = {};
var $inputs = $(".aboutmeQuestions :input").not(":submit");
$inputs.each(function(){
values[this.name] = {answer : $(this).val()};
});
//I thought the above would get the radio buttons but I think it got the last choice as the selected one no matter what was chosen. so I tried below because I thought that the checked attribute would change automatically.
$("input[type='radio']").each(function(){
console.log("this ",this);
if($(this).attr("checked")){
values[this.name] = {answer : $(this).val()};
}
})
In my EJS:
<div id="question1">
<label> <%=aboutUser.question1.question%> </label>
<div class = "radioButtons">
<span>Mostly on-line stores <input type="radio" name="<%=aboutUser.question1.name%>" value="on-line" <% if(aboutUser.question1.answer == "on-line"){%> checked <%}%>> </span>
<span>mostly physical stores <input type="radio" name="<%=aboutUser.question1.name%>" value="physical" <% if(aboutUser.question1.answer == "physical"){%> checked <%}%>> </span>
<span> About both equaly <input type="radio" name="<%=aboutUser.question1.name%>" value="both" <% if(aboutUser.question1.answer == "both"){%> checked <%}%> ></span>
</div>
</div>
I tested it out. After clicking on nothing and pressing the submit button I get for values object, question5[answer]: maybe" question1[answer]: "both" that should of been equal to nothing. It is always like that no matter what I click. I don't like that pleas help me fix it. I didn't think I have to use a change method.
Ps I save this data to DB and the inputs should be populated with answers so when I reload the page <span>
About both equaly<input name="question1" value="both" checked="" type="radio">
</span>. it shouldn't have been checked since I didn't select anything.
First, remove the checked attribute from all the checkboxes unless there is ONE that you want to be pre-selected and in that case add it to just that ONE.
There is no need to loop through the radio buttons to see which was checked. Just use the :checked pseudo-class. Change this:
$("input[type='radio']").each(function(){
console.log("this ",this);
if($(this).attr("checked")){
values[this.name] = {answer : $(this).val()};
}
})
to this:
var checkedRad = $("input[type='radio']:checked");
values[this.name] = {answer : checkRad.value};
or, if you don't need a reference to the checked radio button after getting its value::
values[this.name] = {answer : $("input[type='radio']:checked")};
$("input[type=radio]").on("click", function(e){
console.log($("input[type='radio']:checked").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="question1">
<label> Do you shop mostly on-line or at physical stores? </label>
<div class="radioButtons">
<span>
Mostly on-line stores
<input name="question1" value="on-line" type="radio">
</span>
<span>
mostly physical stores
<input name="question1" value="physical" type="radio">
</span>
<span>
About both equaly
<input name="question1" value="both" type="radio">
</span>
</div>
</div>
Related
I have created two radio buttons like Order, and Cart as like below, and I just want to get the TRUE (if the radio button is checked and by default Order button is checked) and FALSE if its not checked in app.component.ts file in angular JS.
app.component.html
<div class="container">
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked id="place_Oreder">Order
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="add_cart">Cart
</label>
</form>
</div>
I just written the following code which say if there is onclick on both button the boolean value will change:
isSelectedMSM:boolean=false;
isSelectedLive:boolean=false;
$(document).ready(function(){
$("#place_Oreder").click(function(){
this.isSelectedOrder=true;
});
});
$(document).ready(function(){
$("#add_cart").click(function(){
this.isSelectedcart=true;
});
});
I'm not sure that How can I print TRUE or FALSE in app.components file based on the radio button selected by user based on that I need to put if condition and call an appropriate service to invoke.
Can someone help me to achieve this? I just googled but I didn't find the right resource to implement the same. It would be much helpful if someone share your experience to solve this.
Update:
I'm not sure the above code will work. But can someone lead me that how can I achieve this in better way.
A simple click event will do the trick
<label class="radio-inline">
<input type="radio" name="optradio" checked id="place_Oreder" (click)="onClick('order')">Order
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="add_cart" (click)="onClick('cart')">Cart
</label>
comp.ts
onClick(item) {
if(item == 'order')
this.isSelectedOrder = true;
else if(item == 'cart')
this.isSelectedCart = true;
}
You can use ngForm for this, pass ref to function and from component, get the values as required.
Demo (Check console.)
HTML
<div class="container">
<form #myForm="ngForm" (submit)="submitForm(myForm)">
<label class="radio-inline">
<input ngModel type="radio" name="optradio" checked value="true" id="place_Oreder">Order
</label>
<label class="radio-inline">
<input ngModel type="radio" name="optradio" value="false">Cart
</label>
<button type="submit">Submit</button>
</form>
</div>
Component
submitForm(form: NgForm) {
console.log(form.value);
}
I have a donation page using Liquid Shopify. I CANNOT change name="donation[amount_option]" (I do not have access to that file) so I need code that allows this to stay.
I want to have $250 automatically checked on load
My code
document.querySelector('input[name="donation[amount_option]"][value=250]').checked = true;
<div class="radio-inline donation-v2-amounts padbottommore">
<span>
<input id="donation_amount_25" type="radio" name="donation[amount_option]" class="donation_amount_option" value="25">
<label for="donation_amount_25" class="radio">$25</label>
</span>
<span>
<input id="donation_amount_250" type="radio" name="donation[amount_option]" class="donation_amount_option" value="250">
<label for="donation_amount_250" class="radio">$250</label>
</span>
<span>
<input id="donation_amount_1000" type="radio" name="donation[amount_option]" class="donation_amount_option" value="1000">
<label for="donation_amount_1000" class="radio">$1,000</label>
</span>
</div>
$(document).ready(function(){
$('#donation_amount_250').prop('checked',true);
});
If you need a pure js alternative (in addition to the answer above). You can select by value:
document.querySelector('input[value="250"]').checked = true;
EDIT:
In case it isn't clear, you can use any valid selector such as the id, i.e.:
document.querySelector('#donation_amount_25').checked = true;.
Just add the "checked" keyword to the end of the input.
<input id="donation_amount_250" type="radio" name="donation[amount_option]" class="donation_amount_option" value="250" checked>
I have a radio form elements with other fields as well on a webpage, there have two types of form radio field, one is vegetable and other is meat. I want to select like these "If they select a meat they have to select a veggie but if they only select a veggie they don't have to select a meat" here is the screenshot of these radio fields http://prntscr.com/nhu6ao
jQuery('.radio').change(function() {
jQuery(this).parent().removeClass('error');
jQuery(this).parent().parent().removeClass('error');
if (jQuery(this).hasClass('box-input')) {
jQuery('#preseason-error').slideUp("slow");
jQuery('#preseason-title').css("color", "#444");
jQuery('.boxes-select').removeClass('error');
}
})
Results will be: If they select a meat they have to select a veggie but if they only select a veggie they don't have to select a meat
Voila!
I have prepped a simple example for you. Before we begin I would like to point out 2 things. It is very inefficient to create an event listener for every form element, as you did by calling the .on('.radio'). Good practice here is to add event listener on the form ( or any other wrapping element - even body ), and than use the event.target as your reference to the form element that was just clicked by the user.
Another thing is that from the UX perspective I would suggest moving the Meat dishes above the Veggies, as it does not make sense to show it as a first choice if Veggies are somehow dependant on Meats.
JSfiddle with working example: https://jsfiddle.net/mkbctrlll/7209ayr3/45/
const $meals = $('#meal-options')
$meals.on('change', function(event) {
if(event.target.name === 'meat') {
console.log('Meat selected!')
$('input[name="veggie"]').attr('required', 'true')
}
})
<form id="meal-options">
<h2>
Meat options
</h2>
<label for="radio-1">
<input id="radio-1" name="meat" type="radio">
Meat 1
</label>
<label for="radio-2">
<input id="radio-2" name="meat" type="radio">
Meat 2
</label>
<h2>
Veggie options
</h2>
<label for="radio-3">
<input id="radio-3" name="veggie" type="radio">
veggie 1
</label>
<label for="radio-4">
<input id="radio-4" name="veggie" type="radio">
veggie 2
</label>
<label for="radio-5">
<input id="radio-5" name="veggie" type="radio">
veggie 3
</label>
<input type="submit">
</form>
I'm trying to build a simple feedback form. The user will answer a series of yes or no questions. If they choose no, then they will be provided with a comment form to include text.
Currently, I'm having problems with retrieving radio button values. I am trying to print them in the console, but nothing happens when I choose the appropriate choice. If the user chooses 'no', it needs to be able to remember the comment that will get submitted.
My JSFiddle is here: http://jsfiddle.net/787x18vx/
HTML
<p>You are providing feedback</p>
<form>
<div id="question-1">
<label for="question-1">Is this correct?</label>
<input type="radio" value="yes" name="choice-1" />Yes
<input type="radio" value="no" name="choice-1" />No
</div>
<div id="question-2">
<label for="question-2">Another question</label>
<input type="radio" value="yes" name="choice-2" />Yes
<input type="radio" value="no" name="choice-2" />No
</div>
<div id="question-3">
<label for="question-3">One more question</label>
<input type="radio" value="yes" name="choice-3" />Yes
<input type="radio" value="no" name="choice-3" />No
</div>
<br />
<button>Send Feedback</button>
</form>
jQuery
var firstInput = 'input[name=choice]';
var firstInputValue = $('input[name=choice-1]:checked').val();
$(firstInput).on('click', function() {
console.log(firstInputValue);
console.log($('input[name="choice-1"]:checked').val());
console.log($('input[name="choice-2"]:checked').val());
// if value === 'no' show comment form
});
You are using input[name=choice] selector which is not exisiting.
Use input[type=radio] instead.
var firstInput = 'input[type=radio]';
var firstInputValue = $('input[name=choice-1]:checked').val();
$(firstInput).on('click', function() {
console.log(firstInputValue);
console.log($('input[name="choice-1"]:checked').val());
console.log($('input[name="choice-2"]:checked').val());
// if value === 'no' show comment form
});
Fiddle
var firstInput = 'input[name=choice]';
This is looking for something specifically with the name choice, which doesn't appear to be in your html.
There are two quick ways about this.
First, just change your selector:
$('input[type=radio]').on('click', function(){...
This will trigger the function on a click of any radio
Another way is with the wildcard selector:
var firstInput = 'input[name^=choice]';
The ^ should make is so any input with the name starting with choice gets selected.
This method should work, but targeting input[type=radio] is probably a better solution,
You are missing the -1 in your name
var firstInput = 'input[name=choice-1]';
Your selector is trying to get tags with name exactly equals 'choice'. You can search by prefix with the following
var firstInput = 'input[name|="choice"]';
This will get all tags which name starts with 'choice'
I am trying to submit the event_type attached to the option chosen from the radio buttons. For example if "professional" is the chosen option, I would like to set the event_type to that on the submitted data. Also setting the "active" class to the label that is currently selected. I am trying to figure out how to do that. Any help? Thanks
<label htmlFor="professional" className="EventTypeFieldButton EventTypeFieldProfessional active">
<span className="TypeDot"></span>Professional
</label>
<input type="radio" name="event_type" id="professional" value="professional" />
<label htmlFor="academic" className="EventTypeFieldButton EventTypeFieldAcademic">
<span className="TypeDot"></span>Academic
</label>
<input type="radio" name="event_type" id="academic" value="academic" />
<label htmlFor="miscellaneous" className="EventTypeFieldButton EventTypeFieldMiscellaneous">
<span className="TypeDot"></span>Miscellaneous
</label>
<input type="radio" name="event_type" id="miscellaneous" value="miscellaneous" />
var MyComponent = React.createClass({
render: function() {
<label className={this.state.isActive}>
<input type="radio" name="event_type" id="professional" value="professional" onChange={this._onselectRadio(e)} />
</label>
},
_onselectRadio: function(e) {
var event_type= e.target.name;
// submit stuff
this.setState({
isActive = "active"
});
}
});
Since you have several label you'll have to render your radio inputs dynamically and check if e.target.name is equal to your label id/name , something like that.