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>
Related
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript" src="assets/js/jquery.placepicker.js"></script>
<script>
$(document).ready(function () {
$(".placepicker").placepicker();
}); // END document.ready
</script>
<input class="placepicker form-control" name="location" placeholder="location"/>
Please help me. It's not working properly.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true&libraries=places"></script>
you have to provide api key only, then it will work fine.
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>
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 created jquery code and when a value is assigned into the input ,this will show a div.
Here is the demo working:
<script>
$(document).ready(function () {
if ($("#mont1").val() == '9') {
$("#di1").show();
}
});
</script>
<input id="mont1" value="9" />
<div id="di1">
<input type="submit" value="Submit" />
</div>
But In my project I'm getting this error:
$(document).ready(function(){ Uncaught ReferenceError: $ is not defined
I have lots of scripts:
<script src="/javascripts/prototype.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/effects.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/controls.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/application.js?1393972990" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery-1.4.min.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/easyTooltip.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery-ui-1.7.2.custom.min.js?1375798764" type="text/javascript"></script><script src="/javascripts/jquery/jquery.wysiwyg.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/hoverIntent.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/superfish.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery_popup.js?1405027324" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery.validationEngine.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery.validationEngine-en.js?1403629546" type="text/javascript"></script><script src="/javascripts/calendar_date_select/calendar_date_select.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/calendar_date_select/format_hyphen_ampm.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/autoNumeric.js?1375798766" type="text/javascript"></script>
Somebody can help me with this jquery conflict?
The problem is with jsfiddle link what have posted:
Your script is wrapped in onLoad event. So this line fails to execute.
window.onload=function(){
Either you change the wrapped to No wrap in head it works fine. Or you may simply remove the annonymous function in the jsfiddle that will also do:
window.onload=function(){ //<-- remove this
...
} //<-- remove this
EDIT:
script
jQuery(document).ready(function ($) {
$(document).ready(function () {
if ($("#mont1").val() == '9') {
$("#di1").show();
}
});
});
you can add a class wich appropriate style
.hidden { display: block; }
.inline { display: inline; }
in js
window.onload=function(){
var inputval = document.getElementById("input-hi").value;
var div = document.getElementById("div-hi");
if (inputval == 5)
div.className = "hidden";
else
div.className = 'inline';
}
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");
});