I am making a quiz in which the answer will be random. I want the "Correct!" div to show when the textbox value is the same as another div.
Here's what I've got so far:
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == '#answer') {
$("#correct").show("fast"); //Slide Down Effect
}
else {
$("#correct").hide("fast"); //Slide Up Effect
$("#incorrect").show("500").delay("1000").hide("500");
}
});
});
<p>What is the animal?</p>
<div id="correct">
That's Correct!
</div>
<div id="incorrect">
Sorry, Try again!
</div>
<div id="answer">Monkey</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>
Use
$('#answer').text()
instead of just
'#answer'
in the if statement.
if ($('#full_day').val() == $('#answer').text())
This is case sensitive. To make it case insensitive:
if ($('#full_day').val().toLowerCase() == $('#answer').text().toLowerCase())
Edit: As requested, here is a solution which allows multiple answers:
$('#check').bind('click', function() {
var possibleAnswers = $('#answers').text().toLowerCase().split(' ');
var givenAnswer = $('#user-answer').val().toLowerCase();
var isAnswerCorrect = false;
for (var indexPossibleAnswers = 0; indexPossibleAnswers < possibleAnswers.length; indexPossibleAnswers++)
{
if (possibleAnswers[indexPossibleAnswers] == givenAnswer)
{
isAnswerCorrect = true
break;
}
}
if (isAnswerCorrect)
{
alert('Correct');
}
else
{
alert('Incorrect, try again.');
}
});
Live demonstration.
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == $('#answer').html()) {
$("#correct").show("fast"); //Slide Down Effect
}
else {
$("#correct").hide("fast"); //Slide Up Effect
$("#incorrect").show("500").delay("1000").hide("500");
}
});
});
<p>What is the animal?</p>
<div id="correct" style="display:none;">
That's Correct!
</div>
<div id="incorrect" style="display:none;">
Sorry, Try again!
</div>
<div id="answer" style="display:none;">Monkey</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>
Related
Can you please take a look at this Demo and let me know why I am not able to do the calculation check using the each iterator?
As you can see I tried to use :
if (!parseInt($(this).val()) === ((parseInt($(this).closest('div').find('.upper').text())) - parseInt($(this).closest('div').find('.lower').text()))) {}
Which it didnt work then I used this :
if (!parseInt($(this).val()) === ((parseInt($(this).prev('.upper').text())) - parseInt($(this).prev('.lower').text()))) {
but still not validating the input?
I'm not sure if that what you want to achieve, take a look at following example :
$('#test').on('click', function (e) {
$("input").each(function () {
if ($(this).val().length === 0)
{
$(this).addClass('input-error');
} else {
var upper = parseInt($(this).prev().prev().text());
var lower = parseInt($(this).prev().text());
var current_value = parseInt($(this).val());
if (current_value != (upper-lower)){
$(this).addClass('input-error');
}else{
$(this).removeClass('input-error');
}
}
});
});
.input-error {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">5</div>
<div class="lower">2</div>
<input type="text" id="txt1">
<hr />
<div class="upper">7</div>
<div class="lower">3</div>
<input type="text" id="txt2">
<hr />
<div class="upper">200</div>
<div class="lower">66</div>
<input type="text" id="txt3">
<hr />
<br />
<button type='button' id="test">Test</button>
There are 8 divs and an empty div. Also there are 8 checkboxes. Initially 4 divs are displayed and the remaining are display:none and 4 checkboxes are checked and remaining are uncheked
The Fiddle link is here
This is my code
<div class="container">
<div class="empty" style="display:none;"></div>
<div class="content div_box_1">
<div class="box " style="background:black;"></div>
</div>
<div class="content div_box_2">
<div class="box " style="background:blue;"></div>
</div>
<div class="content div_box_3">
<div class="box " style="background:yellow;"></div>
</div>
<div class="content div_box_4">
<div class="box " style="background:orange;"></div>
</div>
<div class="content div_box_5">
<div class="box " style="background:pink; display:none;"></div>
</div>
<div class="content div_box_6">
<div class="box " style="background:indigo; display:none;"></div>
</div>
<div class="content div_box_7">
<div class="box " style="background:red; display:none;"></div>
</div>
<div class="content div_box_8">
<div class="box " style="background:skyblue; display:none;"></div>
</div>
<div class="checks">
<input type="checkbox" name="box1" checked value="1" class="css-checkbox"/>black
<input type="checkbox" name="box2" checked value="2" class="css-checkbox"/>blue
<input type="checkbox" name="box3" checked value="3" class="css-checkbox"/>yellow
<input type="checkbox" name="box4" checked value="4" class="css-checkbox"/>orange
<input type="checkbox" name="box5" value="5" class="css-checkbox"/>pink
<input type="checkbox" name="box6" value="6" class="css-checkbox"/>indigo
<input type="checkbox" name="box7" value="7" class="css-checkbox"/>red
<input type="checkbox" name="box8" value="8" class="css-checkbox"/>sky-blue
When I uncheck any of these 4 checked boxes the respective div must hide and the class=empty div must be shown eg if I uncheck checkbox with value=2 then div with class="div_box_2 must be hidden and in that place div with class=empty must be displayed and again when checkbox with value=5 or value=6 or value=7 or value=8 is checked then the div with class=empty must be hide and the corresponding div with class=div_box_5 or class=div_box_6 or class=div_box_7 or class=div_box_8 must be displayed in the place of empty div.
Its like removing a div and putting a default div in that place and when again some other div is to be displayed then that div must be displayed in the place of default div
How is this possible?
Please anyone help.
Thank you in advance
What you need is a empty container is each of the content element. You can use a script to add it
//add an empty container to all content elements
$('.container .content').append('<div class="empty" style="display:none;"></div>');
$("input.css-checkbox:checkbox").click(function () {
var cval = $(this).val();
var $div = $(".div_box_" + this.value).slideToggle("fast");
$div.next()[this.checked ? 'slideUp' : 'slideDown']("fast");
})
Demo: Fiddle
EDIT
JSfiddle: click
I changed a few thing:
I removed your style from your HTML and put it in your CSS;
You want to replace the divs so there is no need to hide any;
Let me explain the JS:
var divs = [];
divs.push('<div class="content" id="empty">' +
'<div class="box div_box_0 empty"></div>' +
'</div>');
$('.box').each(function (index) {
divs[index+1] = $(this).parent();
$(this).parent().remove();
});
var selected = [];
var max_boxes = 4;
$('.css-checkbox').each(function () {
if ($(this).is(':checked') && selected.length < max_boxes) {
selected.push(divs[selected.length + 1]);
} else {
$(this).attr('checked', false);
}
});
while (selected.length < 4) {
selected.push(divs[0]);
}
for (var i in selected) {
$('.container').append(selected[i]);
}
$(".css-checkbox").click(function(){
if ($('.css-checkbox:checked').length > 4) {
$(this).attr('checked', false);
} else {
var cval = $(this).val();
var checked = $(this).is(':checked');
if (checked) {
var empty = $.inArray(divs[0], selected);
selected[empty] = divs[cval];
$('#empty').replaceWith(divs[cval]);
} else {
var filled = $.inArray(divs[cval], selected);
selected[filled] = divs[0];
$('.container').find(divs[cval]).replaceWith(divs[0]);
}
}
});
First I create an array with the divs so you can place and replace them. The empty div has to be put in manually, since you want this one more than once. In the array you get a reference to the element. Next i remove each div out of your html.
Next I get the selected boxes and put the div by value in the selected array. After that I append the first 4 selected divs to the container.
The click function checks if there are 4 boxes clicked, when you click on a 5th one it removes the check immediately. Next there is a check to see if you checked or unchecked the checkbox. When you check it, replaces the first empty div with the selected div. If you uncheck it replaces the selected div with an empty div.
Try this Demo
$(function() {
var selectCheckBox = $(".checks input:checkbox")
$(selectCheckBox).click(function() {
var checkingValue = $(this).val()
if(checkingValue == 1){
$('.div_box_1').toggle();
}
else if(checkingValue == 2){
$('.div_box_2').toggle();
}
else if(checkingValue == 3){
$('.div_box_3').toggle();
}
else if(checkingValue == 4){
$('.div_box_4').toggle();
}
})
var selectHiddenChecks = $('.checks input:checkbox')
$(selectHiddenChecks).click(function() {
var checkingValue = $(this).val();
if(checkingValue == 5) {
$('.div_box_5').toggle();
}
else if(checkingValue == 6) {
$('.div_box_6').toggle();
}
else if(checkingValue == 7) {
$('.div_box_7').toggle();
}
else if(checkingValue == 8) {
$('.div_box_8').toggle();
}
})
})
This is my simple code which I have been working to just show valid or invalid if the wrong text is inserted but the problem I’m having is that when I hit enter the valid and invalid flashes without staying on screen.
Here is my Fiddle
function validate ()
{
var me = document.getElementById("my").value;
if (me == 'my')
{
document.getElementById("Result").innerHTML = "valid";
document.getElementById("Result").style.color = "green";
}
else
{
document.getElementById("Result").innerHTML = "invalid";
document.getElementById("Result").style.color = "red";
}
}
<form>
<button type="button" onclick ="yes" class="fa fa-search"></button>
<input type="text" id="my" onchange="validate()"></input>
<label id="Result"></label>
</form>
What is the mistake i am doing and How can i fix this ?
The problem is that you have your code inside tag. You need to prevent form submission if you want to stay on the page.
I have not included CSS here!!
<div class="container">
<div id="nav">
<div id="search">
<form id="form1">
<button type="button" onclick ="yes" class="fa fa-search"></button>
<input type="text" id="my"></input>
<label id="Result"></label>
</form>
</div>
</div>
</div>
$(document).ready(function(){
$("#form1").submit(function(event){
if ( !validate()) {
alert("Error");
event.preventDefault();
return false;
}
});
});
function validate ()
{
var me = document.getElementById("my").value;
if (me == 'my')
{
document.getElementById("Result").innerHTML = "valid";
document.getElementById("Result").style.color = "green";
return true;
}
else
{
document.getElementById("Result").innerHTML = "invalid";
document.getElementById("Result").style.color = "red";
return false;
}
}
Here is a fiddle. Hope it will help.
I would like to hide a div until the leased radio button is selected. This div contains input fields only relative to the leased radio selection, so hiding them when the owned radio button is selected is preferred. However, the code I have is not working.
HTML
<div id="surv_radio4">
<p>
Merchant Site Property is
</p>
<input type="radio" id="owned" value="owned" name="merchant_property"/>
<label for="owned">Owned</label>
<input type="radio" id="leased" value="leased" name="merchant_property"/>
<label for="leased">Leased</label>
</div>
<div id="surv_5">
<label for="landlord_name" class="test">Landlord Name</label>
<input type="text" id="landlord_name" placeholder="Landlord Name"/>
<label for="landlord_phone">Phone Number</label>
<input type="text" id="landlord_phone" placeholder="XXX-XXX-XXXX"/>
</div>
CSS
#surv_5 {
display: none;
}
Javascript
<script>
$(document).ready.(function() {
$("input[name$='merchant_property']").click(function() {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else if (value == 'owned') {
$("#surv_5").hide();
}
});
});
</script>
Your document.ready function has a syntax error (extra period):
$(document).ready(function () {
http://jsfiddle.net/isherwood/tW3D5/
Try this:
$("input[name$='merchant_property']").change(function () {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else {
$("#surv_5").hide();
}
});
Fiddle here.
On your original code, you also had an error on your else statement.. See fiddle here
Relevant bits below:
if (value == 'leased') {
$("#surv_5").show();
} else if(value == 'owned'){
$("#surv_5").hide();
}
UPDATE
Too late, looks like #Hiral has an answer for you....
I have a view with checkboxes, generated dynamically, and a button for chech/unchek all the checkboxes. I try the code bellow but, the checkboxes are not checked ob button click event. Please help.
Thank you.
View with checkboxes:
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
#for (int i = 0; i < #Model.workDaysList.Count; i++)
{
<div class="framed">
<div data-role="collapsible" data-collapsed="true" class="ui-btn-inner ui-corner-top ui-corner-bottom">
<h3>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">
<label for="#Model.workDaysList[i][0]" data-theme="c">
#Model.workDaysList[i][1].Substring(6, 2)/#Model.workDaysList[i][1].Substring(4, 2)/#Model.workDaysList[i][1].Substring(0, 4)
</label>
</span>
</div>
</h3>
#Model.detailDaysList[i][0] / #Model.detailDaysList[i][1]
<br />
#Model.detailDaysList[i][2] / #Model.detailDaysList[i][3]
<br />
#Model.detailDaysList[i][4] h
</div>
</div>
</div>
}
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
});
</script>
Try This:
<script lang='javascript'>
$(document).ready(function(){
$('#selectinvert').click(function(){
$("input[type='checkbox']").each(function (){
if($(this).is(':checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
});
})
});
</script>
there are closing }) missing..
btw: the toggle can written like this:
this.checked = !this.checked
Try to start with a basic HTML code and build upon that! Your model code might be braking your HTML. You can find the working prototype here!
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
<div class="framed">
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">First</span>
</div>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">Second</span>
</div>
</div>
$("#selectinvert").click(function() {
$("INPUT[type='checkbox']").each(function() {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
As others suggest, you were missing closing brackets.
You could also shorten your code a bit:
$("#selectinvert").click(function() {
$("input[type='checkbox']").each(function() {
this.checked = !this.checked;
});
});
Also note that your problem has nothing to do with ASP.NET or jQuery UI.
try
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (!$(this).is(":checked")) {
$(this).attr('checked','checked');
} else {
$(this).removeAttr('checked','checked');
}
})
});
I think the code you have written will only only work when all the checkboxes are either checked or unchecked..
What happens when some of them are checked.. Your code will just toggle those..
Your logic should be dependent on the button and not the checkboxes..
$(document).ready(function() {
var isChecked = false;
$("#selectinvert").click(function() {
var $checkboxes = $("INPUT[type='checkbox']") ;
if(isChecked){
isChecked = false;
}
else{
isChecked = true;
}
$checkboxes.prop('checked' , isChecked);
});
});