Develop Reference

Form submission validation

I am trying to achieve: Looks like my if statement is wrong for the input text field.
There are 2 parent divs with class (parent and graph-radio)
In parent div, 2 sub-parents. 1 with radio and 1 with input text.
I should select any one of the radio buttons only, I can't select both the div's radio buttons.
If they select radio button from first parent div then it is mandatory to type in at-least in any one of the input text boxes.
If they have selected the second parent radio box, then the submit button along with last input text box should be clickable/editable.
If they have selected first parent radio button along with any text typed in any one of the text field then again the submit button along with last input text box should be clickable/editable.
If nothing is selected then the last input text with submit button should remain inactive
var init_txt = $(".init-one-text");
var init_radio_btn = document.querySelector('input[name="radios-init"]:checked') != null ? document.querySelector('input[name="radios-init"]:checked').value : "";
var graph_radio_btn = document.querySelector('input[name="graph-init"]:checked') != null ? document.querySelector('input[name="graph-init"]:checked').value : "";
if ((init_radio_btn != '' && init_txt.length > 1) || graph_radio_btn != '') {
$('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('readonly', false);
$('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('disabled', false);
} else {
$('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('readonly', true);
$('.add-to-bag-section input[type=text], .add-to-bag-section input[type=submit]').attr('disabled', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<!--Parent 1 Radio start-->
<div class="init-radio-parent">
<input type="radio" name="radios-init">
<label for="radios-init">One</label>
<input type="radio" name="radios-init">
<label for="radios-init">two</label>
<input type="radio" name="radios-init">
<label for="radios-init">three</label>
</div>
<!--Parent 1 Radio end-->
<!--Parent 1 text input start-->
<div class="text-field-init">
<input type="text" id="init-one-id" class="init-one-text" name="init-one-text" maxlength="1/">
<input type="text" id="init-two-id" class="init-one-text" name="init-one-text" maxlength="1/">
<input type="text" id="init-three-id" class="init-one-text" name="init-one-text" maxlength="1/">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<!--Parent 1 text input end-->
</div>
<br><br>
<!--Parent 2 text radio start-->
<div class="graph-radio">
<input type="radio" name="graph-init">
<label for="graph-init">GOne</label>
<input type="radio" name="graph-init">
<label for="graph-init">GTwo</label>
</div>
<!--Parent 2 text radio end-->
<br><br>
<div class="add-to-bag-section">
<input type="text">
<input type="submit">
</div>

You can check the following code. Hope it will help you
$(document).ready(function(){
$(".graph-radio-btn").click(function(){
if($(this).prop("checked")==true){
$(".add_to_bag_input,.btn").removeAttr("disabled");
$(".graph-radio-input").removeAttr("checked");
}else{
$(".add_to_bag_input,.btn").attr("disabled","disabled");
}
});
$(".graph-radio-input").click(function(){
if($(this).prop("checked")==true){
$(".add_to_bag_input,.btn").removeAttr("disabled");
$(".graph-radio-btn").removeAttr("checked");
}else{
$(".add_to_bag_input,.btn").attr("disabled","disabled");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<!--Parent 1 Radio start-->
<div class="init-radio-parent">
<input type="radio" name="radios-init" class="graph-radio-btn">
<label for="radios-init">One</label>
<input type="radio" name="radios-init" class="graph-radio-btn">
<label for="radios-init">two</label>
<input type="radio" name="radios-init" class="graph-radio-btn">
<label for="radios-init">three</label>
</div>
<!--Parent 1 Radio end-->
<!--Parent 1 text input start-->
<div class="text-field-init">
<input type="text" id="init-one-id" class="init-one-text" name="init-one-text" maxlength="1/">
<input type="text" id="init-two-id" class="init-one-text" name="init-one-text" maxlength="1/">
<input type="text" id="init-three-id" class="init-one-text" name="init-one-text" maxlength="1/">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<!--Parent 1 text input end-->
</div>
<br><br>
<!--Parent 2 text radio start-->
<div class="graph-radio">
<input type="radio" name="graph-init" class="graph-radio-input">
<label for="graph-init">GOne</label>
<input type="radio" name="graph-init" class="graph-radio-input">
<label for="graph-init">GTwo</label>
</div>
<!--Parent 2 text radio end-->
<br><br>
<div class="add-to-bag-section">
<input type="text" class="add_to_bag_input" disabled>
<input type="submit" class="btn" disabled>
</div>
<!-- end snippet -->

I feel you should validate it yourself.
Write a separate function to enable the button like
function enableSubmit() {
$('#submitbutton').prop('disabled',false)
}
and then read the onchange values and make your logic like
$(document).onchange(function(){
var radio1=$('#radio1_id');
var radio2=$('#radio2_id');
var text1=$('#text1_id');
var text2=$('#text2_id');
if(radio1 && !radio2){
if(text1!=''){
enableSubmit();
}else{
disableSubmit();
}
}
else if(radio2 && !radio1){
disableSubmit();
}
});
u can use nested if to apply all your conditons

How to know that radio button is not checked?

I have simple radio button, using bootstrap like this
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>
So what i want really to do is, when i click the radio, the span class is change from btn-danger into btn-success. Of course previous button that has btn-success is would be back into btn-danger again. I try with my javascript code but it wouldn't work out.
$(document).ready(function() {
$("label").click(function() {
if ($(this).children().children().is(":checked")) {
$(this).children().attr("class", "btn btn-success");
} else {
$(this).children().attr("class", "btn btn-danger");
}
});
});
Ok when I click the radio it turned in to green (btn-success), but when i check another radio, it turned in to green but previous radio which i click it, it still green (still has btn-success class). Can someone help me? Thanks :)

You also need to remove/add the proper CSS class from unckecked radio's parent element element.
Also .addClass() and .removeClass() can be used to add and remove the CSS class. Here in the example I have also used .filter()
$(document).ready(function() {
$("label").click(function() {
//Cache elements
var radioElem = $(":radio[name=tipe]");
//Remove the btn-success and add btn-danger class to all the parent element of radio
radioElem.parent().removeClass('btn-success').addClass('btn-danger');
//Filter out checked radio and add/remove the classes
radioElem.filter(":checked").parent().addClass('btn-success').removeClass('btn-danger');
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label>
<span class="btn btn-danger">
<input type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>

On change of any radio button iterate loop through all the radio buttons and check whether the radio button is checked or not and accordingly made change the classes of the parent div. Please refer the below snippet for more understanding.
$("input[type='radio']").on("change",function(){
$("input[type='radio']").each(function(){
if($(this).is(':checked')){
$(this).parent().removeClass('btn-danger').addClass('btn-success');
}else{
$(this).parent().removeClass('btn-success').addClass('btn-danger');
}
});
});
.btn-danger {
color: red
}
.btn-success {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label for="radio-A">
<span class="btn btn-danger">
<input id="radio-A" type="radio" name="tipe" value="str" style="display: none;" /> A
</span> Strength
</label>
</div>
<div class="radio">
<label for="radio-B">
<span class="btn btn-danger">
<input id="radio-B" type="radio" name="tipe" value="agi" style="display: none;" /> B
</span> Agility
</label>
</div>
<div class="radio">
<label for="radio-C">
<span class="btn btn-danger">
<input id="radio-C" type="radio" name="tipe" value="int" style="display: none;" /> C
</span> Intelligence
</label>
</div>

You are only checking the children of the clicked button and set or rest that one. But you have to reset the children of the buttons that have not been clicked in order to make them red again.
You could do something like
$(document).ready(function() {
$("label").click(function() {
$("label").children().attr("class", "btn btn-danger"); // reset all
$(this).children().attr("class", "btn btn-success"); // set current
});
});

It is very simple
if(!$('[name="tipe"][value="str"]').is(':checked')) {
alert("it's not checked");
}

Try this code,
$(document).ready(function() {
$('label').click(function() {
$('label').find('span').attr('class','btn btn-danger');
if ($(this).find('input:checked')) {
$(this).find('span').attr('class','btn btn-success');
}
});
});
Thanks!

You can just replace above jQuery code with below code
$(document).ready(function() {
$("label").click(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).children('span').removeClass('btn btn-danger').addClass('btn btn-success');
} else {
$('label').children('span').removeClass('btn btn-success').addClass('btn btn-danger');
}
});
});

Radio button with accordion, radio button selected doesn't change

I am creating a radio buttons which pressed will open up an accordion with details. I have figured out the creation of the accordion. But the selected/checked radio doesn't change when I press the other buttons, but their accordion does open up but the selection remains as the first one. I have taken the first one as the default selection initially.
When I didn't implement the accordion, I was able to change selections between the radio buttons.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div class="container-fluid bg-default" id="rides">
</div>
<div class="col-md-6 col-md-offset-3 ">
<fieldset >
<div id = "accordion">
<div class="radio">
<input type="radio" name="ride_id" id="radio1" value="1" checked = "checked">
<label class="btn-list btn-block btn-xl" for="radio1">
<span class="col-sm-5">Los Angeles </span>
<span class="col-sm-2"><i class="fa fa-arrows-h"></i></span>
<span class="col-sm-5">Las Vegas</span>
</label>
</div>
<div>Details of route 1</div>
<div class="radio">
<input type="radio" name="ride_id" id="radio2" value="2">
<label class="btn-list btn-block btn-xl" for="radio2">
<span class="col-sm-5">Los Angeles</span>
<span class="col-sm-2"><i class="fa fa-arrows-h"></i></span>
<span class="col-sm-5">San Francisco</span>
</label>
</div>
<div>Details of route 2</div>
<div class="radio">
<input type="radio" name="ride_id" id="radio3" value="3">
<label class="btn-list btn-block btn-xl" for="radio3">
<span class="col-sm-5">Los Angeles</span>
<span class="col-sm-2"><i class="fa fa-arrows-h"></i> </span>
<span class="col-sm-5">Sacramento</span>
</label>
</div>
<div>Details of route 3</div>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<div class="col-lg-8 col-lg-offset-2 text-center">
<a onclick="" href='#register' class="btn btn-primary btn-xl btn-block page-scroll">Book</a>
</div>
</div>
</fieldset>
</div>
</div>

The problem does seem to be that by attaching the accordion click events are no longer reaching the radio buttons. You can get around this by saving the radio button when its clicked and checking it when the animation is over.
$(function() {
var inputClicked;
$( "#accordion" ).accordion({
beforeActivate: function(evt, ui){
inputClicked = $('input', evt.currentTarget)
//$('input', evt.currentTarget).prop("checked", "checked");
},
activate: function(evt, ui){
inputClicked.prop("checked", "checked");
}
});
});
Running example at http://jsfiddle.net/hw4vx3cy/1/

I guess you need to change your jquery. Perform the following steps:
First, know which radio button is clicked.Declare a same class class ="radio_class" for all your radio buttons, and use .change function to detect for changes.
Uncheck all radio buttons (or uncheck previously checked radio button)
Check the clicked radio button and run accordion.
Visit the following link:
jQuery check/uncheck radio button onclick
Refer to the answer given by Jurrie.

Disable radio button using Closest in JQuery

How to disable radio button on both sides on clicking of radio button in center using Closest?
<div class="pure-u-1 pure-u-md-1-5">
<span style="white-space: nowrap;">
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" value="Yes" name="COM" id="COM0">
Yes
</p>
</label>
</span>
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" checked="checked" value="No" name="COM" id="COM1">
No
</p>
</label>
</span>
<span style="display: inline-block;">
<label for="COMA">
<p>
<input type="radio" value="NA" name="COM" id="COM2">
NA
</p>
</label>
</span>
</span>
</div>
On Click of No, i want to disable YES and NA radio button, but not by using any looping/iterations or disabling on static Name or ID,
but want Jquery methods closest or siblings to do the same.
How is this possible in JQuery using it?

Try this
DEMO HERE
$('input[type=radio]').on('click',function(){
$("input:radio").attr('disabled',true);
$(this).removeAttr('disabled');
});
or just with a single line
DEMO
$('input[type=radio]').on('click',function(){
$("input:radio").not($(this)).attr('disabled',true);
});

You can do it like this, basically you take the closest <div> and then find all <input> of type radio but the "No" radio and disable them.
$("#COM1").on("click", function() {
var $no = $(this);
$no.closest("div").find("input:radio").not($no).attr("disabled", true);
});
See this http://jsfiddle.net/4459rqtp/

Bootstrap radio button with function

What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:
http://getbootstrap.com/components/#btn-groups
What my problem is:
When I toggle this button it will not fire a function.
Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.
Here is my form:
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
and the function I am trying to fire:
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?
Thanks

I ended up using this switch here :
http://proto.io/freebies/onoff/
here is the html:
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
here is the jquery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.