Below is my code. The text is not changing when I select the checkbox.
The text for the checkbox should change but it is not.
<html>
<head>
<title>OX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$('#checkbox1').on('change', function () {
window.alert(5 + 6);
if ($('#checkbox1').is(':checked')) {
window.alert(5 + 6);
$("#description").html("Your Checked 1");
} else {
$("#description").html("No check");
}
});
</script>
</head>
<body>
<input type="checkbox" value="0" id="checkbox1" name=""/> Answer one <br/></input>
<span id="description"> Hi Your Text will come here </span>
</body>
</html>
use try to load Jquery and most of other JS frameworks before the end of body tags and use to bind all Jquery code in $(document).ready function
Edited code:
<html>
<head>
<title>OX</title>
</head>
<body>
<input type="checkbox" value="0" id="checkbox1" name=""/>
<label for="">Answer one</label> <br/>
<span id="description"> Hi Your Text will come here </span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#checkbox1').on('change', function () {
window.alert(5 + 6);
if ($('#checkbox1').is(':checked')) {
window.alert(5 + 6);
$("#description").html("Your Checked 1");
} else {
$("#description").html("No check");
}
});
});
</script>
</body>
</html>
What is happening is that your script is trying to operate before the DOM is loaded. How can you catch a checkbox that isn't even loaded on the page yet. The simple solution is to use document.ready handler such as $( document ).ready() which will allow you to do just that.
I have a working example with the addition of this code as well below. Run it and have a look.
<html>
<head>
<title>OX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#checkbox1').on('change', function() {
window.alert(5 + 6);
if ($('#checkbox1').is(':checked')) {
window.alert(5 + 6);
$("#description").html("Your Checked 1");
} else {
$("#description").html("No check");
}
});
});
</script>
</head>
<body>
<input type="checkbox" value="0" id="checkbox1" name="" />Answer one
<br/>
</input>
<span id="description"> Hi Your Text will come here </span>
</body>
</html>
Related
I need one help.I need to check the radio button and set its value using Javascipt/Jquery.I am explaining my code below.
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script >
document.getElementById('btn').onclick=function(){
var qdata='123';
$('#answer_type0[value="' + qdata + '"]').prop('checked', true).trigger('click');
//$('#answer_type0').prop("checked",true);
console.log('checked',$("#answer_type0").prop("checked"));
}
function selectScale(){
console.log('value');
}
</script>
On the above code when user will click on Edit button the radio button should check and the click should trigger. But in my case its not happening like this. Here the plunkr is present.Please help me.
Try like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>
<body>
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script >
$(document).ready(function(){
document.getElementById('btn').onclick=function(){
$('#answer_type0').prop("checked",true);
}
function selectScale(){
console.log('value');
}
});
</script>
</body>
</html>
Here is answer
<input type="radio" name="answer_type0" id="answer_type0" value="" onClick="selectScale();">Male
<button type="button" id="btn">Edit</button>
<script>
document.getElementById('btn').onclick = function() {
var qdata = '0';
$('[name=answer_type' + qdata + ']').prop('checked', true).trigger('click');
console.log('checked', $("#answer_type0").prop("checked"));
}
function selectScale() {
var qdata = '0';
$('[name=answer_type' + qdata + ']').val('some_value');
console.log('some_value');
}
</script>
I want to clone a div by clicking on ADD link. But when a div gets cloned then a new cloned div ADD link is not behaving like the previous ADD link. I want to achieve this functionality. Please help.
<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function(){
$(".add_option").click(function(){
console.log("clicked !");
$('<div id="cloned">\n\
<input type="checkbox" >\n\
<input type="text"> \n\
<a href="#" ><span >ADD </span></a> \n\
<span> REMOVE</span>\n\
</div>').clone().appendTo('#cloned');
$('span').addClass('add_option');
});
});
</script>
<div id="cloned">
<input type="checkbox">
<input type="text">
<span class="add_option">ADD</span>
<span>REMOVE</span>
</div>
</body>
</html>
You need to Event delegation for attaching events to dynamically added elements:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(document).ready(function(){
$("body").on('click','.add_option',function () {
console.log("clicked !");
$('<div id="cloned">\n\
<input type="checkbox" >\n\
<input type="text"> \n\
<a href="#" ><span >ADD </span></a> \n\
<span> REMOVE</span>\n\
</div>').clone().appendTo('#cloned');
$('span').addClass('add_option');
});
});
NOTE: Also the Ids you give to your elements should be unique, As in your case the same id is passed to every div that you clone!
There are some mistakes:
replace id to class. then, use $('.cloned').
move add_option class name to <span>ADD</span>
when you click a use return false
just use to copy this code $('.cloned:last').after($('.cloned:last').clone());
<!doctype html>
<html>
<head>
<title>Javascript prototype</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script type="text/javascript" src="prototyp.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<script>
$(document).ready(function () {
$(document).on("click", ".add_option", function () {
console.log("clicked !");
$('.cloned:last').after($('.cloned:last').clone());
return false;
});
$(document).on("click", ".remove-option", function () {
$(this).closest(".cloned").remove();
return false;
});
});
</script>
<div class="cloned">
<input type="checkbox">
<input type="text">
<span>ADD</span>
<span>REMOVE</span>
</div>
</body>
</html>
I was trying to show the text field if yes and hide it if we select no radio button.
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
$(document).ready(function(){
$("input[type='radio']").change(function(){
if ($(this).val() == "yes") {
$("#OrderNumber").show();
}
else {
$("#OrderNumber").hide();
}
});
});
</script>
</head>
<body>
Yes:<input type="radio" name="Order" value="yes" id="order_yes"/>
No:<input type="radio" name="Order" value="no" id="order_no" checked="checked" /><br><br>
<input style="display:none;" name="OrderNumber" id="OrderNumber" size="5" /><br>
</body>
</html>
i had tried the same code online and it was working fine but on my server the text field is not showing up. Anyone who could help me out with this.
You need to put the googleapi jQuery script and your own jQuery code in separate script tags:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='radio']").change(function(){
if ($(this).val() == "yes") {
$("#OrderNumber").show();
}
else {
$("#OrderNumber").hide();
}
});
});
</script>
You need to put the jQuery script in it's own script tag.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
Your script here
</script>
Works fine in jsfiddle
You are not appending your code with in the <script type='text/javascript'>
So make sure it is placed between script tag like...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type='text/javascript'>
$(document).ready(function(){
$("input[type='radio']").change(function(){
if ($(this).val() == "yes") {
$("#OrderNumber").show();
}
else {
$("#OrderNumber").hide();
}
});
});
</script>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Addition is not working in JavaScript
In an attempt to learn some java script, I'm trying to build a simple system that adds values when buttons are clicked..
The following code works, but will only add the hardcoded value of +100, can anyone help me change this code so it adds the value nested in the id="add" button?
<html>
<head>
<title>Input tutorial</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
$(function () {
$("#add").click(function() {
$("#total").val(parseInt($("#total").val()) + 100)
});
});
</script>
</head>
<body>
<input type="button" value="12" id="add">
<input type="button" value="14" id="total">
</body>
</html>
Any help would be great! Thank you.
Just replace the hardcoded value of 100 by the value you want:
$("#total").val(parseInt($("#total").val()) + parseInt($("#add").val()) )
<html>
<head>
<title>Input tutorial</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
window.onload = function() {
$('#add').bind('click', function () {
$("#total").val(parseInt($("#total").val()) + parseInt($("#add").val()) + 100);
});
}
</script>
</head>
<body>
<input type="button" value="12" id="add">
<input type="button" value="0" id="total">
</body>
</html>
I am using the following code to make a custom checkbox with my own images.
First I included JQuery and added the JQuery code for the required functionality:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "checkbox_unchecked.gif");
} else {
$(this).prev().attr("src", "checkbox_checked.gif");
}
});
});
</script>
Next...here's the HTML:
<label for="moreinfo">
<img src="checkbox_unchecked.gif"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
The unchecked image is there but when I click on it, it doesn't change/toggle.
I'm I missing something?
UPDATE:
Testing this full code locally and it's not working...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "http://icdn.pro/images/en/v/e/verify-correct-icone-9268-48.png");
} else {
$(this).prev().attr("src", "http://www.theology.edu/Remata/Android/Help/wrongx_icon.png");
}
});
});
</script>
</title>
</head>
<body>
<label for="moreinfo">
<img src="http://www.theology.edu/Remata/Android/Help/wrongx_icon.png"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
</body>
</html>
It's working, you can check it here.
$("#moreinfo").click(function() {
var $img = $(this).prev();
$img.attr("src", ($(this).checked)?"checkbox_checked.gif":"checkbox_unchecked.gif");
});