How to add more input names in js?

How to add more input names in js? - javascript

How can you add another name to the input names ?
var checked = document.querySelector("input[name = 'variable']:checked")
I have another input name called 'sub'. But I don't know how you can add this in the code.
(I am in the learning process of js)
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"> <h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo" style="color:red"></span></div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy <span class="explanation" id="demo2" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3" style="color:green"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="demo4"></span> </div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
and the script:
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelector("input[name=variable]:checked, input[name=sub]:checked")
var value = checked.parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
case 'demo4':
answer = "hjhjhjhjct";
break;
}
checked.parentNode.lastChild.innerHTML = answer;
}

there are some points to mention:
First.
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo" style="color:red"></span></div>
<div> </div> <-- this is will become your .lastChild so i think you not expect this <div> as .lastChild so delete that tag.
Second use querySelectorAll for multiple selection, so this is wrong:
var checked = document.querySelector("input[name=variable]:checked, input[name=sub]:checked")
Third multiple select returns mutiple result, i.e. array of result, so use array to result handling.
Below is edited code, so reedit it for your purpose:
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
border-width: 5px;
border-color: #00A7AE;
margin-top: 7%;
text-align: center;
position: relative;
background: #73B7DB;
}
.row {
text-align: left;
color: white;
margin-left: 10%;
}
span#demo, #demo2, #demo3, #demo4, #demo5, #demo6, #demo7, #demo8, #demo9 {
display: inline;
margin-right: 30%;
float:right;
width:50%;
}
input[type="submit"]
{
padding: 10px 15px 11px !important;
font-size: 18px !important;
background-color: #57d6c7;
font-weight: bold;
text-shadow: 1px 1px #57D6C7;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"><h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />
Octagon <span class="explanation" id="demo1" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="0" />
Leprosy <span class="explanation" id="demo2" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3" style="color:green"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="demo4"></span></div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2 <span class="explanation" id="demo5"></span></div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3 <span class="explanation" id="demo6"></span></div>
<div class="row"><h3>Question 3</h3></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1 <span class="explanation" id="demo7"></span></div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2 <span class="explanation" id="demo8"></span></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3 <span class="explanation" id="demo9"></span></div>
<p> <input type="submit" onclick="myFunction()" value="Check" /> </p>
</form>
</div>
<!-- close quizbox div -->
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelectorAll("input[name=variable]:checked, input[name=sub]:checked, input[name=con]:checked")
for(var answ = 0 ; answ < checked.length; answ++){
var value = checked[answ].parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
case 'demo4':
answer = "demo4";
break;
case 'demo5':
answer = "demo5";
break;
case 'demo6':
answer = "demo6";
break;
case 'demo7':
answer = "demo7";
break;
case 'demo8':
answer = "demo8";
break;
case 'demo9':
answer = "demo9";
break;
}
checked[answ].parentNode.lastChild.innerHTML = answer;
}
}
</script>
<div> </div>

Related

Toggle CSS class depending on the radio button status

I'm working on a better user interface and I tried to achieve a way to visualize radio buttons. I got the following code to the point where the radio button input will be checked and the class highlightedBox added on color click.
How can I manage to toggle the class highlightedBox depending on the radio button status? Now toggle get triggered on click but this solution wont work if the user decides to deselect the color button by selecting another color.
I know the current status of the code only works for a single change per color. If you want to select the same color again the checked value wont be set. But this is another problem and I'll try to fix this later on.
$('#wireColorSelect #wireBox').click(function(){
var checkbox = $(this).parent().find(".cbox");
var wireDOM = $(this).parent().find("#wireBox");
checkbox.attr('checked', !checkbox.attr('checked'));
wireDOM.toggleClass('highlightedBox');
});
.wireBox{
border: 1px solid;
height:50px;
width:50px;
opacity: 0.5;
}
.white{
background-color: White;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.highlightedBox {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wireColorSelect">
<div class="flex-row flex-xs-3">
<div class="flex-xs-3 no-padding">
<div id="wireBox" class=" white wireBox"></div>
<input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="red wireBox"></div>
<input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="yellow wireBox"></div>
<input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div id="wireBox" class="blue wireBox"></div>
<input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" />
</div>
</div>
</div>

You can use .not() to exclude element i.e : div which is not currently clicked by user and removeClass from them .
Demo Code :
$('#wireColorSelect .wireBox').click(function() {
var checkbox = $(this).parent().find(".cbox");
var wireDOM = $(this)
checkbox.prop('checked', checkbox.is(":checked") ? false : true);
wireDOM.toggleClass('highlightedBox');
//remove checked from other checkboxes
$(".cbox").not(checkbox).prop('checked', false);
//remove highlight class from other
$(".wireBox").not(wireDOM).removeClass("highlightedBox")
});
.wireBox {
border: 1px solid;
height: 50px;
width: 50px;
opacity: 0.5;
}
.white {
background-color: White;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.highlightedBox {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wireColorSelect">
<div class="flex-row flex-xs-3">
<div class="flex-xs-3 no-padding">
<div class=" white wireBox"></div>
<input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="red wireBox"></div>
<input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="yellow wireBox"></div>
<input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" />
</div>
<div class="flex-xs-3 no-padding">
<div class="blue wireBox"></div>
<input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" />
</div>
</div>
</div>

Uncheck the checked input when clicked on close icon for same label name for both input

So far what I did was when the user clicks the label,the checkbox of that label is checked and the value of the label is appended in another div along with close icon.When we click the close icon or uncheck,the checkbox will be unchecked.But when we have same label name for two checkboxes,on clicking the close icon or unchecking for one,both the checkboxes are unchecked because of the same label as both will be active.I hope you are getting what i am trying to say.Here is the code snippet for you to be more clear.Any help will be appreciated.
var passed_value, data, input_value, checkbox_items;
$('.form-check-label').click(function(e) {
data = $(this).text().trim();
input_value = data.split(' ').join('_');
$(this).prev('input').attr({
'value': input_value,
'id': input_value
});
e.stopImmediatePropagation();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
passed_value = $(`<div><span>` + data + `</span><i class="fas fa-times"></i></div>`).prop('title', data);
$('.result-text1').append(passed_value).css('cursor', 'default');
} else {
$('.result-text1 span:contains(' + data + ')').parent().remove();
}
})
var active_text;
$('body').on('click', '.result-text1 i', function(e) {
e.stopImmediatePropagation();
$(this).parent('div').remove();
var text_div = $(this).prev().text();
// console.log(text_div);
active_text = $('.form-check-label.active:contains(' + text_div + ')');
if ($(active_text)) {
$(active_text).removeClass('active').prev().prop('checked', false);
}
})
.result-text1 div {
display: grid;
grid-template-columns: min-content min-content;
grid-column-gap: 5px;
}
.result-text1 div span {
color: #1e699b;
padding: 7px;
font-size: 12px;
border: 1px solid #1e699b;
border-radius: 7px;
// margin-right: 7px;
text-overflow: ellipsis;
width: 110px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-align: center;
}
i {
height: 17px;
width: 17px;
background: #eaeaea;
border-radius: 50%;
color: #2d84d7;
display: grid;
justify-content: center;
align-items: center;
font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
<article class="card-group-item">
<header class="card-header">
<h6 class="title">pickup time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
afternoon
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
<article class="card-group-item">
<header class="card-header">
<h6 class="title">drop time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
afternoon </span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>

Use unique id for checkbox and for="id" so that the checkbox works even if the label or span is clicked.
Since the similar property seems to be present multiple times assign them with a significance data-attribute or something.
Please check the code snippet below and leave a comment if your requirement is different.
Some changes I have applied are listed here,
use unique id for checkbox and for="id" for label or span
used data-id="id"(data-attribute) which helps in data manipulation
use let instead of var since they are declared locally instead of globally
use .off() ( i.e. .off('click'). Unbinding events is better
check if the checkbox is checked or not before appending/binding the data in another div element
it's better to call a event after a successful bind of data if data is binding from js eventListener() in this code snippet
$('.form-check-input').off().on('click', function(e) {
let id = $(this).attr('id');
data = $(this).next('span').text().trim();
input_value = data.split(' ').join('_');
// $(this).prev('input').attr({
// 'value': input_value,
// 'id': input_value
// });
//e.stopImmediatePropagation();
$(this).toggleClass('active');
if ($(this).is(':checked')) {
passed_value = $(`<div data-id=${id}><span>` + data +
`</span><i class="fas fa-times btnCross"></i></div>`)
.prop('title',
data);
$('.result-text1').append(passed_value).css('cursor', 'default');
} else {
$(`div[data-id="${id}"]`).remove();
}
eventListener();
});
function eventListener() {
$('.btnCross').off().on('click', function(e) {
// e.stopImmediatePropagation();
let $this = $(this);
let targetEle = $this.parent().attr('data-id');
$this.parent().remove();
$(`#${targetEle}`).prop('checked', false);
//var text_div = $(this).prev().text();
// console.log(text_div);
// active_text = $('.form-check-label.active:contains(' + text_div + ')');
// if ($(active_text)) {
// $(active_text).removeClass('active').prev().prop('checked', false);
// }
})
}
.result-text1 div {
display: grid;
grid-template-columns: min-content min-content;
grid-column-gap: 5px;
}
.result-text1 div span {
color: #1e699b;
padding: 7px;
font-size: 12px;
border: 1px solid #1e699b;
border-radius: 7px;
text-overflow: ellipsis;
width: 110px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-align: center;
}
i {
height: 17px;
width: 17px;
background: #eaeaea;
border-radius: 50%;
color: #2d84d7;
display: grid;
justify-content: center;
align-items: center;
font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
<article class="card-group-item">
<header class="card-header">
<h6 class="title">pickup time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form id="pickupTime">
<label class="form-check">
<input class="form-check-input" id="ptMorning" type="checkbox" value="">
<span for="ptMorning" class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" id="ptAfternoon" type="checkbox" value="">
<span for="ptAfternoon" class="form-check-label">
afternoon
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" id="ptEvening" type="checkbox" value="">
<span for="ptEvening" class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" id="ptNight" type="checkbox" value="">
<span for="ptNight" class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
<article class="card-group-item">
<header class="card-header">
<h6 class="title">drop time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form id="dropTime">
<label class="form-check">
<input class="form-check-input" id="dtMorning" type="checkbox" value="">
<span for="dtMorning" class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" id="dtAfternoon" type="checkbox" value="">
<span for="dtAfternoon" class="form-check-label">
afternoon </span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" id="dtEvening" type="checkbox" value="">
<span for="dtEvening" class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" id="dtNight" type="checkbox" value="">
<span for="dtNight" class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>

Have a look at the JS fiddle: https://jsfiddle.net/0e4756ub/2/
I have given id & value to checkbox at the time of designing only and using the same at the time of clicking on close icon.
JS:
var passed_value, data, input_value, checkbox_items;
$('.form-check-label').click(function(e) {
data = $(this).text().trim();
input_value = data.split(' ').join('_');
var checkbox_id = $(this).prev('input').attr('id');
e.stopImmediatePropagation();
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
passed_value = $('<div><span data-id="'+ checkbox_id +'">' + data + '</span><i class="fas fa-times"></i></div>').prop('title', data);
$('.result-text1').append(passed_value).css('cursor', 'default');
} else {
$('.result-text1 span:contains(' + data + ')').parent().remove();
}
});
$('body').on('click', '.result-text1 i', function(e) {
e.stopImmediatePropagation();
$(this).parent('div').remove();
var checkbox_id = $(this).prev().attr('data-id');
if ($('#'+ checkbox_id)) {
$('#'+ checkbox_id).prop('checked', false);
$('#'+ checkbox_id).next('span').removeClass('active').prev();
}
});
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
<article class="card-group-item">
<header class="card-header">
<h6 class="title">pickup time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="morning-pickup" id="morning-pickup">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="afternoon-pickup" id="afternoon-pickup">
<span class="form-check-label">
afternoon
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="evening-pickup" id="evening-pickup">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="night-pickup" id="night-pickup">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
<article class="card-group-item">
<header class="card-header">
<h6 class="title">drop time </h6>
</header>
<div class="filter-content">
<div class="card-body">
<form>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="morning-drop" id="morning-drop">
<span class="form-check-label">
morning
</span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="afternoon-drop" id="afternoon-drop">
<span class="form-check-label">
afternoon </span>
</label>
<!-- form-check.// -->
<label class="form-check">
<input class="form-check-input" type="checkbox" value="evening-drop" id="evening-drop">
<span class="form-check-label">
evening
</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" value="night-drop" id="night-drop">
<span class="form-check-label">
night
</span>
</label>
<!-- form-check.// -->
</form>
</div>
<!-- card-body.// -->
</div>
</article>
<!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>
CSS:
.result-text1 div {
display: grid;
grid-template-columns: min-content min-content;
grid-column-gap: 5px;
}
.result-text1 div span {
color: #1e699b;
padding: 7px;
font-size: 12px;
border: 1px solid #1e699b;
border-radius: 7px;
// margin-right: 7px;
text-overflow: ellipsis;
width: 110px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-align: center;
}
i {
height: 17px;
width: 17px;
background: #eaeaea;
border-radius: 50%;
color: #2d84d7;
display: grid;
justify-content: center;
align-items: center;
font-size: 11px;
}

How to put text next to the answers in quiz, after clicking the submit button

The idea is that when somebody click on submit and for example had question 1 wrong, there will be some info after the wrong answer like: ... is a mammal species.
So far I tried things and looked it up, I can't really get it to work.
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->
<script>
document.getElementById("form1").onsubmit = function() {
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
</script>

Please find below solution. I hope it will works for you.
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->

Images don't show up in quiz results after start over button

I'm posting this question again as I have a new problem now with my quiz. When I first take the quiz it works fine, then I click on the start over button to start the quiz again and it works just as well until I get to the results page, where the text and start over button appear but the images do not! How can I fix this?
$(document).ready(function(){ // DOC READY
var totalQuestions = $('.questionarea').length; // VARIABLES
var currentQuestion = 0;
var $progressbar = $("#progressbar");
var score = 0;
var value = 0;
$questions = $('.questionarea');
$questions.hide();
$("#startover").on("click", function(){ // STARTOVER
$(this).hide();
$(".answers").hide();
$("#images").hide();
$("#score").hide();
$(".btn-lg").show();
score = 0;
value = 0;
currentQuestion = 0;
$progressbar.val(value);
$questions.hide();
});
$(document).on("click", ".btn-lg", function(){ // START BUTTON FADE OUT
$(this).hide();
$progressbar.show(200);
$(".answers").show(200);
$($questions.get(currentQuestion)).fadeIn();
});
$(document).on("click", '.answers input', function(){ // NEW QUESTIONS FADE IN + PROGRESS BAR
$($questions.get(currentQuestion)).fadeOut(200, function () {
currentQuestion ++;
if (currentQuestion === totalQuestions){
$("#results").fadeIn(200);
}
else {
$questions.eq(currentQuestion).fadeIn(200);
}
value = value + 10;
$progressbar.val(value);
});
});
function calcScore() { // OPTIONS CHECKED
var house1 = document.getElementById('option1').checked;
var house2 = document.getElementById('option8').checked;
var house3 = document.getElementById('option11').checked;
var house4 = document.getElementById('option16').checked;
var house5 = document.getElementById('option18').checked;
var house6 = document.getElementById('option23').checked;
var house7 = document.getElementById('option27').checked;
var house8 = document.getElementById('option32').checked;
var house9 = document.getElementById('option35').checked;
var house10 = document.getElementById('option36').checked;
var sher1 = document.getElementById('option2').checked;
var sher2 = document.getElementById('option6').checked;
var sher3 = document.getElementById('option10').checked;
var sher4 = document.getElementById('option14').checked;
var sher5 = document.getElementById('option19').checked;
var sher6 = document.getElementById('option24').checked;
var sher7 = document.getElementById('option26').checked;
var sher8 = document.getElementById('option29').checked;
var sher9 = document.getElementById('option33').checked;
var sher10 = document.getElementById('option37').checked;
var cas1 = document.getElementById('option3').checked;
var cas2 = document.getElementById('option7').checked;
var cas3 = document.getElementById('option9').checked;
var cas4 = document.getElementById('option15').checked;
var cas5 = document.getElementById('option17').checked;
var cas6 = document.getElementById('option21').checked;
var cas7 = document.getElementById('option28').checked;
var cas8 = document.getElementById('option30').checked;
var cas9 = document.getElementById('option33').checked;
var cas10 = document.getElementById('option38').checked;
var brbad1 = document.getElementById('option4').checked;
var brbad2 = document.getElementById('option5').checked;
var brbad3 = document.getElementById('option12').checked;
var brbad4 = document.getElementById('option13').checked;
var brbad5 = document.getElementById('option20').checked;
var brbad6 = document.getElementById('option22').checked;
var brbad7 = document.getElementById('option25').checked;
var brbad8 = document.getElementById('option31').checked;
var brbad9 = document.getElementById('option34').checked;
var brbad10 = document.getElementById('option39').checked;
if(house1 === true){ // SCORE CALCULATION
score += 1;
}
if(house2 === true){
score += 1;
}
if(house3 === true){
score += 1;
}
if(house4 === true){
score += 1;
}
if(house5 === true){
score += 1;
}
if(house6 === true){
score += 1;
}
if(house7 === true){
score += 1;
}
if(house8 === true){
score += 1;
}
if(house9 === true){
score += 1;
}
if(house10 === true){
score += 1;
}
if(sher1 === true){
score += 2;
}
if(sher2 === true){
score += 2;
}
if(sher3 === true){
score += 2;
}
if(sher4 === true){
score += 2;
}
if(sher5 === true){
score += 2;
}
if(sher6 === true){
score += 2;
}
if(sher7 === true){
score += 2;
}
if(sher8 === true){
score += 2;
}
if(sher9 === true){
score += 2;
}
if(sher10 === true){
score += 2;
}
if(cas1 === true){
score += 3;
}
if(cas2 === true){
score += 3;
}
if(cas3 === true){
score += 3;
}
if(cas4 === true){
score += 3;
}
if(cas5 === true){
score += 3;
}
if(cas6 === true){
score += 3;
}
if(cas7 === true){
score += 3;
}
if(cas8 === true){
score += 3;
}
if(cas9 === true){
score += 3;
}
if(cas10 === true){
score += 3;
}
if(brbad1 === true){
score += 4;
}
if(brbad2 === true){
score += 4;
}
if(brbad3 === true){
score += 4;
}
if(brbad4 === true){
score += 4;
}
if(brbad5 === true){
score += 4;
}
if(brbad6 === true){
score += 4;
}
if(brbad7 === true){
score += 4;
}
if(brbad8 === true){
score += 4;
}
if(brbad9 === true){
score += 4;
}
if(brbad10 === true){
score += 4;
}
// CHARACTER SCORE
if(score < 12){
score = "House & Wilson!";
$("#houseimage").show();
}
if(score <= 20){
score = "Sherlock & John!";
$("#sherimage").show();
}
if(score <= 30){
score = "Dean & Cas!";
$("#casimage").show();
}
if(score <= 40){
score = "Walt & Jesse!";
$("#brbadimage").show();
}
}
// SHOW RESULTS
$("#results").click(function(){
$(this).hide();
$progressbar.hide();
$("#startover").show();
calcScore();
$("#score").show();
document.getElementById("score").innerText = 'You Got: ' + score;
});
});
HTML:
<body>
<div class="container box">
<div class="header">
<div class="text-center" id="title"> WHICH TV BROMANCE ARE YOU AND YOUR BFF? </div></div>
<div class="col-sm-11 text-center divprogress">
<div class="text-center">
<progress class="progress progress-striped progress-animated center-block" style="width: 0%, text-align: center" id="progressbar" value="0" max="100"></progress> </div></div>
<br>
<br>
<div class="col-lg-6 text-center">
<button type="button" class="btn btn-secondary btn-lg text-center" id="start">START QUIZ</button></div>
<!-- QUIZ AREA -->
<!-- QUESTION & ANSWERS 1 -->
<div id="content">
<div class="questionarea text-center" id="QA1" data-question"1">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question1">Q1: How did you and your BFF meet?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question1" value="1" id="option1"> At work </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question1" value="2" id="option2"> Living together</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="3" id="option3"> Under unusual or other circumstances</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question1" value="4" id="option4"> In school</label></div></div>
</div>
<!-- QUESTION & ANSWERS 2 -->
<div class="questionarea text-center" id="QA2" data-question"2">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question2">Q2: How long have you known each other?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question2" value="4" id="option5"> Less than 3 years </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question2" value="2" id="option6"> 4-7 years</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="3" id="option7"> At least 8 years</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question2" value="1" id="option8"> Over 20 years</label></div></div>
</div>
<!-- QUESTION & ANSWERS 3 -->
<div class="questionarea text-center" id="QA3" data-question"3">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question3">Q3: How would you describe your friendship?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question3" value="3" id="option9"> Deep </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question3" value="2" id="option10"> Amazing</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question1" value="1" id="option11"> Needy</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question3" value="4" id="option12"> Protective</label></div></div>
</div>
<!-- QUESTION & ANSWERS 4 -->
<div class="questionarea text-center" id="QA4" data-question"3">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question4">Q4: What do you do together?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question4" value="4" id="option13"> Business </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question4" value="2" id="option14"> Go out</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question4" value="3" id="option15"> Just hold each other</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question4" value="1" id="option16"> Play pranks on each other</label></div></div>
</div>
<!-- QUESTION & ANSWERS 5 -->
<div class="questionarea text-center" id="QA5" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question5">Q5: How often do you fight?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question5" value="3" id="option17"> Not much, but when we do, it's a big deal </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question5" value="1" id="option18"> We have lots of harmless tiffs</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question5" value="2" id="option19"> Sometimes</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question5" value="4" id="option20"> Often and it can get physical</label></div></div>
</div>
<!-- QUESTION & ANSWERS 6 -->
<div class="questionarea text-center" id="QA6" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question6">Q6: How well do you know each other?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question6" value="3" id="option21"> Quite a lot </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question6" value="4" id="option22"> Not much</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question6" value="1" id="option23"> We know every detail of each other's lives</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question6" value="2" id="option24"> He knows way more about my life than I know about his (or viceversa)</label></div></div>
</div>
<!-- QUESTION & ANSWERS 7 -->
<div class="questionarea text-center" id="QA7" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question7">Q7: Do you celebrate your birthdays together?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question7" value="4" id="option25"> No, but I buy him a great present </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question7" value="2" id="option26"> Of course</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question7" value="1" id="option27"> Often</label> </div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question7" value="3" id="option28"> Only if he's in town at the time</label></div></div>
</div>
<!-- QUESTION & ANSWERS 8 -->
<div class="questionarea text-center" id="QA8" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question8">Q8: How often are you around each other's houses?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question8" value="2" id="option29"> We live together </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question8" value="3" id="option30"> Often</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question8" value="4" id="option31"> Not often</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question8" value="1" id="option32"> All the time</label></div></div>
</div>
<!-- QUESTION & ANSWERS 9 -->
<div class="questionarea text-center" id="QA9" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question9">Q9: How often do you talk about your feelings?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question9" value="3" id="option33"> No need. We can see right through each other </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question9" value="2" id="option33"> Occasionally</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question9" value="4" id="option34"> Rarely</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question9" value="1" id="option35"> Only in a joking manner</label></div></div>
</div>
<!-- QUESTION & ANSWERS 10 -->
<div class="questionarea text-center" id="QA10" data-question"4">
<ul class="col-lg-6 list-group text-center">
<p class="list-group-item question10">Q10: What do you consider each other as?</p>
</ul>
<br>
<div class="answers">
<div id="divoption1">
<label class="btn btn-primary">
<input type="radio" name="question10" value="1" id="option36"> Life partners </label></div>
<br>
<div id="divoption2">
<label class="btn btn-primary">
<input type="radio" name="question10" value="2" id="option37"> Best friends</label></div>
<br>
<div id="divoption3"><label class="btn btn-primary">
<input type="radio" name="question10" value="3" id="option38"> Family (brothers)</label></div>
<br>
<div id="divoption4">
<label class="btn btn-primary">
<input type="radio" name="question10" value="4" id="option39"> Family (father/son)</label></div></div>
</div>
<!-- ---- -->
<button id="results">View Results</button>
<h2 id='score'></h2>
<div id="images">
<img id="houseimage" src="http://24.media.tumblr.com/tumblr_m70pdclcae1qcy01ao1_500.gif" />
<img id="brbadimage"
src="http://24.media.tumblr.com/c88e253d9ed37f2cf422bf4bef27bcbc/tumblr_n52r45b3YW1qglx18o1_r1_250.gif" />
<img id="sherimage" src="http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=http://mmbiz.qpic.cn/mmbiz/4vhrz0icYkiaUHCPsiaJUKMEsFnUWwluggISyy0iaAaZvhOxcKhdc3XLK8LhSc3q52lOaIvBzsuZP93STzKEyqoYBw/0?wx_fmt=gif" />
<img id="casimage" src="http://66.media.tumblr.com/9c0723fa2ff4054cea2d0a530802fef8/tumblr_inline_mtnsncH2fn1qjt6x6.gif" />
</div>
<div><button id="startover">Start Over</button></div>
</div>
</div>
</body>
CSS:
// HEADER AND BOX
body {
background-image: url("http://wallpoper.com/images/00/40/76/15/gregory-house_00407615.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
background-position: fixed;
}
.header {
margin-top: 30px;
}
#title {
font-size: 30px;
text-align: center;
font-family: fantasy, serif;
margin-top: 50px;
margin: 0 auto;
float: none;
}
.box {
width: 900px;
height: 450px;
background-color: #ba348b;
border-radius: 40px;
box-shadow: 4px 4px 10px 4px black;
padding: auto;
overflow: hidden;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 30px;
float: none;
}
// START QUIZ BUTTON
#start {
background-color: #00c6d2;
border: 2px solid #13281c;
border-radius: 10px;
color: #13281c;
padding: 20px;
width: 200px;
opacity: 1;
margin-top: 110px;
font-size: 20px;
font-family: fantasy, serif;
&:hover {
background-color:
#009ea8;
}
}
.btn-lg {
float: none;
margin: 0 auto;
text-align:center;
margin-top: 70px;
margin-left: 10px;
}
// PROGRESS BAR
.divprogress {
text-align: center;
float: none;
margin: 0 auto;
}
#progressbar {
background-color: blue;
margin: 0 auto;
float: none;
box-shadow: none;
outline: none;
text-align: center;
width: 780px;
margin-left: auto;
margin-right:auto;
margin-top: 20px;
display: none;
}
// QUESTIONS AND ANSWERS
#QA1, #QA2, #QA3, #QA4, #QA5, #QA6, #QA7, #QA8, #QA9, #QA10 {
margin-top: 10px;
font-family: fantasy, serif;
color: #13281c;
display: none;
}
.questionarea {
display: none;
}
.col-lg-6 {
float: none;
margin: 0 auto;
margin-top: -40px;
}
.question1, .question2, .question3, .question4, .question5, .question6, .question7, .question8, .question9, .question10 {
font-size: 18px;
font-family: fantasy, serif;
margin-top: 70px;
margin-bottom: 30px;
}
.btn-primary {
font-size: 14px;
background-color: #ffff32 !important;
color: #13281c !important;
outline: 0 none;
opacity: 1;
border: 0 none;
&:hover{
background-color: #e5e500 !important;
color: black !important;
outline: 0 none;
}
}
// RESULTS BUTTON / TEXT
#results {
padding: 20px;
background-color: #609D57;
border: 3px solid darkgreen;
border-radius: 10px;
display: none;
text-align: center;
font-family: fantasy, serif;
float: center;
margin-top: 90px;
font-size: 18px;
color: #13281c !important;
outline: 0 none;
opacity: 1;
&:hover{
background-color: #568d4e !important;
color: black !important;
outline: 0 none;
}
}
#score {
text-align: center;
font-size: 20px;
font-family: fantasy, serif;
float: center;
color: #920602;
}
#startover{
text-align: center;
font-size: 14px;
font-family: fantasy, serif;
margin-top: 20px;
float: center;
display: none;
background-color: rgba(211,211,211, 0.7);
&:hover {
background-color: rgba(211,211,211, 1);
}
}
// IMAGES
#houseimage, #sherimage, #casimage, #brbadimage {
display: none;
text-align: center;
margin-top: 10px;
}
#houseimage, #sherimage, #brbadimage {
height: 240px;
}

The reason is because the startOver function is hiding all the images.
$("#images").hide();
You need to hide the individual image tags instead of the div with $('#images img')
I added this helper to your code:
function hideImages() {
$('#images img').hide();
}
hideImages();
See the demo here: https://jsbin.com/bezimupihi/edit?html,js,output

Remove disabled attribute using JQuery [duplicate]

This question already has answers here:
How to remove "disabled" attribute using jQuery?
(11 answers)
Closed 2 years ago.
I have tried following code given in JSFIDDLE...
But it is not working...
I want to Enable submit button only after filling all input fields....
JSFIDDLE
code tried :
<script>
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
</script>

What you're looking for is:
$('#register').prop('disabled', true); //makes it disabled
$('#register').prop('disabled', false); //makes it enabled

First of all, listen input event instead of keyup, The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed(including paste using right-click etc.)
You are updating empty value for every element. If last element is having valid value, variable will be false. use the same variable as flag in .each loop and prevent loop for next occurrences if value is false
(function() {
$('form input').on('input', function() {
var empty = false;
$('form input').each(function() {
if (!empty && $(this).val() == '') {
empty = true;
}
});
$('#register').prop('disabled', empty);
});
})()
.link-button-blue {
font: bold 14px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #002633;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: pointer;
}
.link-button-blue:disabled {
font: bold 14px Arial;
text-decoration: none;
background-color: #333;
color: #ccc;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: no-drop;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div class="form-field-input">
<input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
</div>
<div class="form-field-label">Full Name :</div>
<div class="form-field-input">
<input type="text" value="" name="fname" id="fname" required>
</div>
<div class="form-field-label">Address :</div>
<div class="form-field-input">
<textarea value="" name="address" id="address" rows="4" pattern=".{15,}" required title="15 characters minimum" required></textarea>
</div>
<br>
<div class="form-field-label">Email :</div>
<div class="form-field-input">
<input type="text" value="" name="email" id="email" required>
</div>
<br>
<div class="form-field-label">Mobile :</div>
<div class="form-field-input">
<input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
</div>
<br>
<div class="form-field-label">Phone :</div>
<div class="form-field-input">
<input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
</div>
<div class="form-field-label">Fax :</div>
<div class="form-field-input">
<input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
</div>
<div class="form-field-label">Birthdate :</div>
<div class="form-field-input">
<input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
</div>
<br>
<div class="form-field-label">Age :</div>
<div class="form-field-input">
<input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
</div>
<br>
<div class="form-field-label">Select Questionnaire Catagary :</div>
<div class="form-field-input">
<label class="checkbox">
<input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" />General</label>
<br>
<label class="checkbox">
<input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" />Stressfull Life Like - IT/BPO/Management</label>
<br>
<label class="checkbox">
<input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" />Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer</label>
<br>
<label class="checkbox">
<input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" />Heredity of Diabetes/Presently Suffering from Diabetes</label>
<br>
<label class="checkbox">
<input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" />Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack</label>
<br>
</div>
<br>
<div class="form-field-label">Gender :</div>
<div class="form-field-input">
<select name="gender" id="gender" required>
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<br>
<div class="form-field-label"></div>
</form>
Fiddle demo

$(document).ready(function() {
$('.input-field').change(function() {
var empty = false;
$('.input-field').each(function() {
$('#btn').addClass('disabled');
if($(this).val() == ''){
empty = false;
return false; //u need to break out from each
}
empty = true; //then u need to set value when it's out from each
});
if(empty == true) {
$('#btn').removeClass('disabled');
}
});
});
u need to break out from each,then u need to set value when it's out from each

Develop Reference

JavaScript is the programming language of the Web.

How to add more input names in js? - javascript

Related

Toggle CSS class depending on the radio button status

Uncheck the checked input when clicked on close icon for same label name for both input

How to put text next to the answers in quiz, after clicking the submit button

Images don't show up in quiz results after start over button

Remove disabled attribute using JQuery [duplicate]

Categories

Resources