how to make an image disappear by clicking on word?

how to make an image disappear by clicking on word? - javascript

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>

Related

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.

Radio Button checked as default remains on true

Please help me try figure out why my radio button default checked remains to True.
Here is my js file:
$(document).ready(function () {
var is_display = $("#is_display_value").val();
if (is_display) {
$("#id_is_display_True").prop("checked", true);
$("#id_is_display_False").prop("checked", false);
} else {
$("#id_is_display_True").prop("checked", false);
$("#id_is_display_False").prop("checked", true);
}
});
html:
<div class="status">
<p>Status</p>
<input type="hidden" value="False" id="is_display_value"> <!-- Value of {{is_display}} is based on Database, True or False -->
</div>
<div class="status status-body">
<div class="status-choice">
<input type="radio" class="triple" name="is_display" value="True" id="id_is_display_True">
<label for="hide">Show</label>
</div>
<div class="status-choice">
<input type="radio" class="triple" name="is_display" value="False" id="id_is_display_False">
<label for="hide">Hide</label>
</div>
</div>
My JSFiddle

First you input value return a string (you case capitalized string )
first get the value string as
var is_display = $("#is_display_value").val().toLowerCase();
in your condition if (is_display) , it'll always return true because you check if the string "True" or "False" will always return true
you can fix that using one condition as :
//get value to lower case
var is_display = $("#is_display_value").val().toLowerCase();
$("#id_is_display_true").attr("checked", is_display == "true");
$("#id_is_display_false").attr("checked", is_display == "false");
See below snippet :
$(document).ready(function () {
var is_display = $("#is_display_value").val().toLowerCase();
$("#id_is_display_true").attr("checked", is_display == "true");
$("#id_is_display_false").attr("checked", is_display == "false");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="status">
<p>Status</p>
<input type="hidden" value="False" id="is_display_value">
</div>
<div class="status status-body">
<div class="status-choice">
<input type="radio" class="triple" name="is_display" id="id_is_display_true" value="true">
<label for="hide">Show</label>
</div>
<div class="status-choice">
<input type="radio" class="triple" name="is_display" id="id_is_display_false" value="false">
<label for="hide">Hide</label>
</div>
</div>

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.

Toggle sub-category divs based on radio button selection

I used the top answer to this question to build a form that feeds into a sheet along with file upload. Now I've hit another wall.
I have categories, and sub-categories. I'd like the sub-categories to only show up IF their parent category has been selected. I just can't figure out A) where I need to put the code (on our website it's right in with the HTML), I've tried putting it in the HTML file and the Code.gs file, or B) if the code I'm using is even right.
Here's the form - the "Co-Op Category" is the parent categories, I have hidden divs for each category that would hold the 'child categories'
HTML:
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
Name: <input name="name" type="text" /><br/>
Co-Op Amount: <input name="amount" type="text" /><br/>
Co-Op Split:<br />
<input type="radio" name="split" value="100%">100%<br>
<input type="radio" name="split" value="50/50">50/50<br>
<input type="radio" name="split" value="75/25">75/25<br>
Other: <input type="text" name="split" /><br />
Reason for Co-Op: <input name="reason" type="text" cols="20" rows="5" /><br />
Brand:
<select name="brand">
<option>Select Option</option>
<option>Bluebird</option>
<option>Brown</option>
<option>Ferris</option>
<option>Giant Vac</option>
<option>Honda</option>
<option>Hurricane</option>
<option>Little Wonder</option>
<option>RedMax</option>
<option>SCAG</option>
<option>Snapper Pro</option>
<option>Sno-Way</option>
<option>SnowEx</option>
<option>Wright</option>
<option>Ybravo</option>
</select><br/>
Co-Op Category:<br />
<input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
<input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
<input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
<input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
<input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
<input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
Other: <input type="text" id="other" name="category" /><br />
<div class="dealer box" style="display: none;">DEALER</div>
<div class="online box" style="display: none;">ONLINE</div>
<div class="meetings box" style="display: none;">MEETINGS</div>
<div class="advertising box" style="display: none;">ADVERTISING</div>
<div class="pricing box" style="display: none;">PRICING</div>
<div class="correspondence box" style="display: none;">CORRESPONDENCE</div>
Email: <input name="email" type="text" /><br/>
Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/>
School Schedule (Image Files Only): <input name="myFile" type="file" /><br/>
<input type="button" value="Submit"
onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
Code.gs:
var submissionSSKey = '1zzRQwgXb0EN-gkCtpMHvMTGyhqrx1idXFXmvhj4MLsk';
var folderId = "0B2bXWWj3Z_tzTnNOSFRuVFk2bnc";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var amount = template.amount = theForm.amount;
var split = template.split = theForm.split;
var reason = template.reason = theForm.split;
var brand = template.brand = theForm.brand;
var category = template.category = theForm.category;
var message = template.message = theForm.message;
var email = template.email = theForm.email;
var fileUrl = template.fileUrl = doc.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 9).setValues([[name,amount,split,reason,category,brand,message,email,fileUrl]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
//Toggle Secondary Categories
function(){
$('input[type="radio"]').click(function(){
if($(this).attr("id")=="dealer"){
$(".box").not(".dealer").hide();
$(".dealer").show();
}
if($(this).attr("id")=="online"){
$(".box").not(".online").hide();
$(".online").show();
}
if($(this).attr("id")=="advertising"){
$(".box").not(".advertising").hide();
$(".advertising").show();
}
if($(this).attr("id")=="pricing"){
$(".box").not(".pricing").hide();
$(".pricing").show();
}
if($(this).attr("id")=="correspondence"){
$(".box").not(".correspondence").hide();
$(".correspondence").show();
}
if($(this).attr("id")=="meetings"){
$(".box").not(".meetings").hide();
$(".meetings").show();
}
if($(this).attr("id")=="other"){
$(".box").not(".other").hide();
$(".other").show();
}
});
};
This bit specifically is where I'm having trouble:
//Toggle Secondary Categories
function(){
$('input[type="radio"]').click(function(){
if($(this).attr("id")=="dealer"){
$(".box").not(".dealer").hide();
$(".dealer").show();
}
if($(this).attr("id")=="online"){
$(".box").not(".online").hide();
$(".online").show();
}
if($(this).attr("id")=="advertising"){
$(".box").not(".advertising").hide();
$(".advertising").show();
}
if($(this).attr("id")=="pricing"){
$(".box").not(".pricing").hide();
$(".pricing").show();
}
if($(this).attr("id")=="correspondence"){
$(".box").not(".correspondence").hide();
$(".correspondence").show();
}
if($(this).attr("id")=="meetings"){
$(".box").not(".meetings").hide();
$(".meetings").show();
}
if($(this).attr("id")=="other"){
$(".box").not(".other").hide();
$(".other").show();
}
});
};

The unexpected token is due to the function(){ line, which is invalid syntax for the jQuery document ready function. You should have:
$(function(){
$('input[type="radio"]').click(function(){
...
});
});
With that fixed, your next error will be:
Uncaught ReferenceError: $ is not defined
That's because you haven't included jQuery, which is what the $ symbol is referring to in statements like $(this). You'll want to read this for more tips about using jQuery in Google Apps Script. The short story, though: You need to add the following, adjusted for whatever version of jQuery you intend to use:
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Updated Form.html, which shows the appropriate <div> as you intended. It also includes the recommended doctype, html, head and body tags:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//Toggle Secondary Categories
$(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr("id") == "dealer") {
$(".box").not(".dealer").hide();
$(".dealer").show();
}
if ($(this).attr("id") == "online") {
$(".box").not(".online").hide();
$(".online").show();
}
if ($(this).attr("id") == "advertising") {
$(".box").not(".advertising").hide();
$(".advertising").show();
}
if ($(this).attr("id") == "pricing") {
$(".box").not(".pricing").hide();
$(".pricing").show();
}
if ($(this).attr("id") == "correspondence") {
$(".box").not(".correspondence").hide();
$(".correspondence").show();
}
if ($(this).attr("id") == "meetings") {
$(".box").not(".meetings").hide();
$(".meetings").show();
}
if ($(this).attr("id") == "other") {
$(".box").not(".other").hide();
$(".other").show();
}
});
});
</script>
<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
Name:
<input name="name" type="text" /><br/>
Co-Op Amount: <input name="amount" type="text" /><br/>
Co-Op Split:<br />
<input type="radio" name="split" value="100%">100%<br>
<input type="radio" name="split" value="50/50">50/50<br>
<input type="radio" name="split" value="75/25">75/25<br> Other: <input type="text" name="split" /><br /> Reason for Co-Op: <input name="reason" type="text" cols="20" rows="5" /><br />
Brand:
<select name="brand">
<option>Select Option</option>
<option>Bluebird</option>
<option>Brown</option>
<option>Ferris</option>
<option>Giant Vac</option>
<option>Honda</option>
<option>Hurricane</option>
<option>Little Wonder</option>
<option>RedMax</option>
<option>SCAG</option>
<option>Snapper Pro</option>
<option>Sno-Way</option>
<option>SnowEx</option>
<option>Wright</option>
<option>Ybravo</option>
</select><br/>
Co-Op Category:<br />
<input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
<input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
<input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
<input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
<input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
<input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
Other: <input type="text" id="other" name="category" /><br />
<div class="dealer box" style="display: none;">DEALER</div>
<div class="online box" style="display: none;">ONLINE</div>
<div class="meetings box" style="display: none;">MEETINGS</div>
<div class="advertising box" style="display: none;">ADVERTISING</div>
<div class="pricing box" style="display: none;">PRICING</div>
<div class="correspondence box" style="display: none;">CORRESPONDENCE</div>
Email: <input name="email" type="text" /><br/>
Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/>
School Schedule (Image Files Only): <input name="myFile" type="file" /><br/>
<input type="button" value="Submit" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
</div>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
</body>
</html>

Cannot read property 'Value'

I just literally spent most of my day trying to fix this issue.
A little background: I'm designing a mutli-step form, one of the steps is to choose between two options (both are radio buttons).
So for example, step 1 is to choose the gender "male" or "female" and the second step is to enter something in the text input.
The problem I have is that when I choose a gender, it doesn't go to the second step. I also had an issue where it did go to the second step but the value returned was "unidentified".
$('#gpadding input:radio').addClass('input_hide');
$('label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
var gender, fname, lname;
function _(x) {
return document.getElementById(x);
}
function next1() {
gender = _("gender").value;
_("step1").style.display = "none";
_("step2").style.display = "block";
}
function next2() {
fname = _("firstname").value;
lname = _("lastname").value;
_("step2").style.display = "none";
_("show_all_data").style.display = "block";
_("display_gender").innerHTML = gender;
_("display_fname").innerHTML = fname;
_("display_lname").innerHTML = lname;
}
<div class="step" id="step1">
<h3>Gender</h3>
<div>
<div class="gender-box">
<div id="gpadding">
<input type="radio" name="gender" id="gender" value="m" />
<label for="malereg"><img src="images/icons/male-register.png" /><span>MALE</span></label>
<input type="radio" name="gender" id="gender" value="f" />
<label for="femalereg"><img src="images/icons/female-register.png" /><span>FEMALE</span></label>
</div>
</div>
<button onclick="next1()">Next</button>
<button id="bstep" class="md-close">Close</button>
<div class="clearfix"></div>
</div>
</div>
<div class="step" id="step2">
<h3>Name</h3>
<div>
<input type="text" id="firstname" name="firstname" />
<input type="text" id="lastname" name="lastname" />
<button onclick="next2()">Next</button>
<button id="bstep" class="md-close">Close</button>
<div class="clearfix"></div>
</div>
</div>
<div class="step" id="show_all_data">
<h3>Complete</h3>
<span id="display_gender"></span> <br />
<span id="display_fname"></span> <br />
<span id="display_lname"></span> <br />
<button onlick="submitForm()">Register</button>
<button id="bstep" class="md-close">Close</button>
</div>

You cannot use <div> inside a <label>.
Make sure the ID
selectors you're targeting they actually exist.
You can wrap all you need inside a label without the need to use for and id attributes:
function _(x) { return document.getElementById(x); }
function _n(x) { return document.getElementsByName(x); } //Needed to get elements by Name
var gender, input;
function next1() {
var radio = _n("gender"); // get the elements by Name !!
for (var i=0, j=radio.length; i<j; i++) { // Loop all radio buttons
if (radio[i].checked) { // If one is Checked...
gender = radio[i].value; // All fine
_("step1").style.display = "none";
_("step2").style.display = "block";
break; // and exit the loop.
}
}
if(!gender) return alert("Please select a gender"); // If no value, alert something
}
function next2() {
input = _("input").value; // Use the right ID !!!!!
if(!input) return alert("Please enter your name");
_("step2").style.display = "none";
_("show_data").style.display = "block";
_("display_gender").innerHTML = gender;
_("display_input").innerHTML = input;
}
label{display:block;}
#step1, #step2m #show_data{
background:#eee;
width:200px;
padding:30px;
}
#step2, #show_data{display:none;}
<div id="step1">
<label>
<input type="radio" name="gender" value="m">
<img src="images/icon/male.png" />
<span>MALE</span>
</label>
<label>
<input type="radio" name="gender" value="f">
<img src="img/icon/female.png">
<span>FEMALE</span>
</label>
<button onclick="next1()">Next</button>
</div>
<div id="step2">
<label>
Enter your name:
<input type="text" id="input" name="input">
</label>
<button onclick="next2()">Next</button>
</div>
<div id="show_data">
<p id="display_gender"></p>
<p id="display_input"></p>
</div>

Perhaps change your code to:
function next1() {
var gender_controls = document.getElementsByName("gender");
gender = gender_controls[0].checked ? gender_controls[0].value : gender_controls[1].value;
_("step1").style.display = "none";
_("step2").style.display = "block";
}

Develop Reference

JavaScript is the programming language of the Web.

how to make an image disappear by clicking on word? - javascript

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' }

Related

Div not showing when radio button checked

Radio Button checked as default remains on true

Save Radio Box Value in Variables

Toggle sub-category divs based on radio button selection

Cannot read property 'Value'

Categories

Resources