Develop Reference

Div not showing when radio button checked

I have a radio button that will show a div with an input text when it is checked 'NO'. But it is not showing the div, however when I play around the radio button then the div will show. Where am I missing?
function CheckboxCheck(checkbox) {
var firstCheckbox = document.getElementById('check1');
var secondCheckbox = document.getElementById('check2');
var rmk = document.getElementById("rmk");
if (firstCheckbox.checked == true) {
rmk.style.display = "none";
} else if (secondCheckbox.checked == true) {
rmk.style.display = "block";
document.getElementById("rmk").required = true;
}
}
<div>
<label>Have you registered the course?</label>
<table border=0>
<tr>
<td>YES </td>
<td><input type="radio" name="register" value="Y" id="check1" onclick="CheckboxCheck('first')">  </td>
<td>NO </td>
<td><input type="radio" name="register" value="N" checked id="check2" onclick="CheckboxCheck('second')"></td>
</table>
</div>
<div id="rmk" style="display:none">
<label>Reasons</label>
<input type="text" name="remarks" class="form-control">
</div>

There are a few structure and accessibility proposals going on in this suggestion but I think strictly speaking, the easiest solve for you is to invoke the function on page load. Give this example a look:
function CheckboxCheck(checkbox) {
var firstCheckbox = document.getElementById('check1');
var secondCheckbox = document.getElementById('check2');
var rmk = document.getElementById("rmk");
var rmkdiv = document.getElementById("rmk-div");
if (firstCheckbox.checked == true) {
rmkdiv.style.display = "none";
} else if (secondCheckbox.checked == true) {
rmkdiv.style.display = "block";
rmk.required = true;
}
}
CheckboxCheck()
<div>
<p>Have you registered the course?</p>
<label>
YES<input
type="radio"
name="register"
value="Y"
id="check1"
onclick="CheckboxCheck()"
/></label>
<label>NO
<input
type="radio"
name="register"
value="N"
checked
id="check2"
onclick="CheckboxCheck()"
/>
</label>
<div id="rmk-div" style="display: none">
<label>Reasons</label>
<input id="rmk" type="text" name="remarks" class="form-control" />
</div>
</div>

Your input field will only be visible when the function CheckboxCheck is executed. Since "NO" is checked from the beginning, the function will not be executed because it is only called when a change takes place.

Save Radio Box Value in Variables

I want to save the checked values of the radio boxes but when I try to submit the button and redirect to a url based on the 3 choices it doesnt work. I debugged it, and apparently the problem is that my program is only saving the last value in the variable but not the values before. What can I do to save all the choices in 3 different variables?
HTML:
<div id="schritt1">
<p stlye="text-align:center;">frage 1</p>
<input id="1a" type="radio" name="a" value="eins" onclick="checkedvalue('a')"/>
<label for="1a">1</label><br/>
<input id="1b" type="radio" name="a" value="zwei" onclick="checkedvalue('a')"/>
<label for="1b">2</label></br>
<input id="1c" type="radio" name="a" value="drei" onclick="checkedvalue('a')"/>
<label for="1c">3</label>
</div>
<div id="schritt2" style="display:none;">
<p stlye="text-align:center;">Frage 2</p>
<input id="2a" type="radio" name="b" value="zweieins" onclick="checkedvalue('b')"/>
<label for="2a">1</label><br/>
<input id="2b" type="radio" name="b" value="zweizwei" onclick="checkedvalue('b')"/>
<label for="2b">2</label></br>
<input id="2c" type="radio" name="b" value="zweidrei" onclick="checkedvalue('b')"/>
<label for="2c">3</label>
</div>
<div id="schritt3" style="display:none;">
<p stlye="text-align:center;">Frage 3</p>
<input id="2a" type="radio" name="c" value="dreieins" onclick="checkedvalue('c')"/>
<label for="2a">1</label><br/>
<input id="2b" type="radio" name="c" value="dreizwei" onclick="checkedvalue('c')"/>
<label for="2b">2</label></br>
<input id="2c" type="radio" name="c" value="dreidrei" onclick="checkedvalue('c')"/>
<label for="2c">3</label>
</div>
<div id="finish-button" style="display:none;">
<a class="btn btn-buy" onclick="checkedvalue('finish')">Ergebnis</a>
</div>
JS:
<script>
function checkedvalue(choice){
var eins;
var zwei;
var drei;
if(choice == "a") {
eins = (jQuery('input[name=a]:checked').val());
window.alert(eins);
document.getElementById('schritt1').style.display = 'none';
document.getElementById('schritt2').style.display = 'block';
}
else if(choice == "b") {
zwei = (jQuery('input[name=b]:checked').val());
window.alert(zwei);
window.alert(eins + zwei);
document.getElementById('schritt2').style.display = 'none';
document.getElementById('schritt3').style.display = 'block';
document.getElementById('finish-button').style.display = 'block';
}
else if(choice == "c") {
drei = (jQuery('input[name=c]:checked').val());
}
else if(choice == "finish") {
window.alert(eins + zwei + drei);
if(eins == "eins" && zwei == "zweieins" && drei == "dreieins" )
{
console.log("If 2 works");
window.location.href = "//";
}
}
}

The issue is every time this onclick() method is calling and refreshing the Javascript method.So it will be loose the previously saved values.
You can Collect all the radio Button group values At the time of form submitting using
var eins;
var zwei;
var drei;
declare these variable globally(Outside of all functions) and add below code inside form submit method (write a OnSubmit method in your submit button and write the code inside )
$('input:radio').each(function() {
if($(this).is(':checked')) {
// You have a checked radio button here...
var val = $(this).val();
var name = $(this).attr('name');
if(name=="a")
{
eins=val;
}
else if(name=="b")
{
zwei=val;
}
else
{
drei=val;
}
}
else {
// Or an unchecked one here...
}
});
I didn't test the code,So modify as per your requirements.

Bootstrap checkbox buttons not changing state

I used to have radio buttons, but I changed the script to use bootstrap checkboxes. But it is not changing the state when using bootstrap switches.
This is snippet of my code:
<div class="form-group">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="upd_active" class="updactive" id="upd_yes" value="1" checked> Yes </label>
<label class="radio-inline">
<input type="radio" name="upd_active" class="updactive" id="upd_no" value="0"> No </label>
</div>
</div>
<script>
function action(){}
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if(is_active == "1"){
$("#upd_no").attr('checked', false);
$("#upd_yes").attr('checked', true);
$('#upd_yes').parent().addClass('checked');
}
else{
$("#upd_yes").attr('checked', false);
$("#upd_no").attr('checked', true);
$('#upd_no').parent().addClass('checked');
}
}
</script>
<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
</div>
</div>
<script>
function action(){
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if(is_active == "1"){
$("#upd_yes").attr("checked",true);
$('#upd_yes').parent().addClass('checked');
}
else{
$("#upd_yes").attr("checked",false);
$('#upd_yes').parent().removeClass('checked');
}
}
</script>
How can I fix this?

Am able to find 2 issues(actually not issues) as below
is_active is not declared so you cannot check it with if statement
Most importantly your action() function not at all initiated.
So i added below code and updated the snippet.
var is_active = 0;
action();
var is_active = 0;
action();
function action() {
var parentflag = $('#upd_yes').parents('.form-group');
parentflag.find('span').removeClass('checked');
if (is_active == "1") {
$("#upd_yes").attr("checked", true);
$('#upd_yes').parent().addClass('checked');
} else {
$("#upd_yes").attr("checked", false);
$('#upd_yes').parent().removeClass('checked');
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
</div>
</div>

how to make an image disappear by clicking on word?

I'm trying to create a small game . I have four pics of animals and blow the pic i have four names . what the game suppose to do is when the users click on right image and right name both the image and the name has to disappear. But in my case just the image disappear. Any help really appreciate it .
var selectedImage;
var selectedName;
//Change the value of the selectedImage and check the values
function selectImage(event){
selectedImage = event.target;
checkValues();
}
//Change the value of the selectedName and check the values
function selectName(event){
selectedName = event.target;
checkValues();
}
function checkValues() {
console.log(selectedImage);
console.log(selectedName);
//Check if both values are selected
if (!selectedImage || selectedImage == 'undefined' || !selectedName || selectedName == 'undefined'){
return ;
}
//Check if values are equals
if (selectedImage.value == selectedName.value) {
alert("good");
//remove the button and the image
selectedImage.parentNode.style.display = 'none';
selectedName.style.display = 'none';
} else {
alert("no");
}
//Reset the selected image and name.
selectedImage = 'undefined';
selectedName = 'undefined';
}
<div class="content">
<form>
<input type="radio" name="animals" id="cow" class="input-hidden" value="cow"/>
<label for="cow">
<img src="images/cow.jpg" onclick="this.style.display='none';" alt=""/>
</label>
<input type="radio" name="animals" onclick="this.style.display='none';" id="dog" class="input-hidden" value="dog"/>
<label for="dog">
<img src="images/dog.jpg" alt=""/>
</label>
<input type="radio" name="animals" onclick="this.style.display='none';" id="horse" class="input-hidden" value="horse"/>
<label for="horse">
<img src="images/horse.jpg" alt=""/>
</label>
<input type="radio" name="animals" onclick="this.style.display='none';" id="pig" class="input-hidden" value="pig"/>
<label for="pig">
<img src="images/pig.jpg" alt=""/>
</label>
</form>
</div>
<div class="content">
<button type="button" onclick="this.style.display='none';image_select2()" value="dog" id="dog_t">Chien</button>
<button type="button" onclick="this.style.display='none';image_select()" value="cow" id="cow_t">Vache</button>
<button type="button" onclick="this.style.display='none';image_select4()" value="pig" id="pig_t">Cochon</button>
<button type="button" onclick="this.style.display='none';image_select3()" value="horse" id="horse_t">Cheval</button>
</div>

Instead of putting the code in the button click, add to each of the JavaScript inside the if statement like this:
if (pic4 == text4) {
Text4.style.display = 'none'
}

Here is working and I think simpler snippet of what your are trying to achieve.
You have to variables, one that represent the selected image, and an other that represents the selected button. When you click on any Image that will change the value of selectedImage, and when you click on a button that will change the value of selectedName. After the value change, the checkValues function check if the two values are selected and equal.
var selectedImage;
var selectedName;
//Change the value of the selectedImage and check the values
function selectImage(event){
selectedImage = event.target;
checkValues();
}
//Change the value of the selectedName and check the values
function selectName(event){
selectedName = event.target;
checkValues();
}
function checkValues() {
console.log(selectedImage);
console.log(selectedName);
//Check if both values are selected
if (!selectedImage || selectedImage == 'undefined' || !selectedName || selectedName == 'undefined'){
return ;
}
//Check if values are equals
if (selectedImage.value == selectedName.value) {
alert("good");
//remove the button and the image
selectedImage.parentNode.style.display = 'none';
selectedName.style.display = 'none';
} else {
alert("no");
}
//Reset the selected image and name.
selectedImage = 'undefined';
selectedName = 'undefined';
}
<div class="content">
<form>
<label for="cow">
<input type="radio" name="animals" id="cow" onclick="selectImage(event)" class="input-hidden" value="cow"/>
<img src="images/cow.jpg" alt=""/>
</label>
<label for="dog">
<input type="radio" name="animals" onclick="selectImage(event)" id="dog" class="input-hidden" value="dog"/>
<img src="images/dog.jpg" alt=""/>
</label>
<label for="horse">
<input type="radio" name="animals" onclick="selectImage(event)" id="horse" class="input-hidden" value="horse"/>
<img src="images/horse.jpg" alt=""/>
</label>
<label for="pig">
<input type="radio" name="animals" onclick="selectImage(event)" id="pig" class="input-hidden" value="pig"/>
<img src="images/pig.jpg" alt=""/>
</label>
</form>
</div>
<div class="content">
<button type="button" onclick="selectName(event)" value="dog" id="dog_t">Chien</button>
<button type="button" onclick="selectName(event)" value="cow" id="cow_t">Vache</button>
<button type="button" onclick="selectName(event)" value="pig" id="pig_t">Cochon</button>
<button type="button" onclick="selectName(event)" value="horse" id="horse_t">Cheval</button>
</div>

radio button make condition for given by validation

Process: first line "would you like to add you children" If "Yes" then check Textbox validation if "No" then continue to Submit form. See bellow image
Problem: Validation work but when select "No" then also validation checking in backend and disable submit button automatically.
Button code
<form>
<div class="main-fre">
<label>Would you like to add your Child(ren) now?</label>
<input style="margin-left: 10px;" class="main-fre" type="radio" name="child" value="yes" />Yes
<input class="" type="radio" name="child" value="no" />No
</div>
<div class="childform">
<div class="cls-input">
<label>First name:</label>
<input id="first_name" type="text" name="fname" value="" required="required" /><span class="reg-error" id="first_name_alert" style="font-size: 13px;width: 60%;"></span><br /><br />
</div></div>
<div class="submit_file">
<a class="wpcf7-submit1" id="prev" href="javascript:void(0);">Previous</a>
<input class="wpcf7-submit1" id="submit_file" style="font-size: 15px;" type="submit" name="submit" value="Submit" />
</div>
</form>
JQuery Code
jQuery(document).ready(function(){
jQuery("input:radio").change(function(){
var $value = jQuery("form input[type='radio']:checked").val();
if($value === 'no')
{
jQuery(".childform").hide();
}
else
{
jQuery(".childform").show();
}
});
jQuery("input:radio").change();
jQuery("#submit_file").click(function(){
var $value = jQuery("form input[type='radio']:checked").val();
if($value === 'yes')
{
var $first_name = jQuery("input#first_name").val();
if($first_name == '')
{
jQuery('#confirmemailmsg').css('display','none');
document.getElementById("first_name_alert").innerHTML="Please enter first name."
return false;
}
}
});
});
Can you suggestion me.
Thank you.

As mentioned by MelanciaUK, when no is selected you must remove the required attribute to avoid validating the empty name input on submit.
jQuery(document).ready(function(){
jQuery("input:radio").change(function(){
var valueA = jQuery("form input[type='radio']:checked").val();
if(valueA === 'no'){
//remove required attribute from first_name input
$("#first_name").removeAttr("required");
jQuery(".childform").hide();
}else{
jQuery(".childform").show();
}
});
jQuery("input:radio").change();
jQuery("#submit_file").click(function(){
var valueA = jQuery("form input[type='radio']:checked").val();
if(valueA === 'yes'){
var first_name = jQuery("input#first_name").val();
if(first_name == ''){
jQuery('#confirmemailmsg').css('display','none');
document.getElementById("first_name_alert").innerHTML="Please enter firs name."
return false;
}
}
});
});
working in jsfiddle