jQuery checkboxes error - javascript

I am making a form validation and I set the property of other checkboxes disable if the owner checkbox is not checked but it is not working.
Here's my html cod:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="script.js"></script>
<script src="min.js"></script>
</head>
<body>
Owner:<input type="checkbox" id="owner">
<hr>
<div id="check">
bicycle:<input type="checkbox" id="bicycle"><br>
bike:<input type="checkbox" id="bike"><br>
car:<input type="checkbox" id="car">
</div>
<script>
</script>
</body>
</html>
and in it min.js is jQuery installation file and ,
here is script.js :
$(document).ready(function(){
var $checkbox = $("#check").find("input[type=checkbox]");
$checkbox.prop('disabled', true);
$("#owner").click(function(){
var $ownercheck = $(this);
if ($ownercheck.prop('checked') === true) {
$checkbox.prop('disabled', false);
}
else
{
$checkbox.prop('disabled', true);
}
});
});


You have to put min.js above the script.js,
and your html code will look like this :
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="min.js"></script>
<script src="script.js"></script>
</head>
<body>
Owner:<input type="checkbox" id="owner">
<hr>
<div id="check">
bicycle:<input type="checkbox" id="bicycle"><br>
bike:<input type="checkbox" id="bike"><br>
car:<input type="checkbox" id="car">
</div>
</body>
</html>


You must always load the library first. For issue to be fixed, script.js must go after min.js. Your code is working perfectly fine: http://jsfiddle.net/zb3m3/1/
<script src="min.js"></script>
<script src="script.js"></script>

Related

How to Use Jets.js?

Jets File : https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.0/jets.min.js
Html File :
<!DOCTYPE html>
<html>
<head>
<script src="assets/jets.js"></script>
</head>
<body>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</script>
<input type="search" id="jetsSearch">
<div id="jetsContent">
<div>Barry Williamson</div>
<div>Francis Reeves</div>
<div>…</div>
</div>
</body>
</html>
I want to get this result
Jets.js
Search field for several words

You're HTML is out of order. It should look like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.0/jets.min.js"></script>
</head>
<body>
<input type="search" id="jetsSearch">
<div id="jetsContent">
<div>Barry Williamson</div>
<div>Francis Reeves</div>
<div>…</div>
</div>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</script>
</body>
</html>

jquery doesnt work on my browser thought the same code works on jsfiddle tried all the necessary tags along with noconflict tag

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#boxx').keyup(function(e) {
var txtVal = $(this).val();
$('#boxx1').val(txtVal);
});
$('#boxx1').keyup(function(e) {
var txtVal = $(this).val();
$('#boxx').val(txtVal);
});
});
</script>
</head>
<body>
<input type="text" value="" id="boxx"/>
<input type="text" value="" id="boxx1"/>
<div></div>
</body>
</html>
this is all the code there is but it doesnt seem to work but it works fine on jsfiddle
please help me im new to jquery

Unable to retrieve input value using dom

<!doctype html>
<html>
<head>
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
In the above code snippets I am trying to print the value associated with input which has id ="one".
But I am getting error as
cannot read property 'value' of null.

You need to put your JavaScript at the end of the body. Placing it in head, means, it will execute even before the DOM elements are ready. Placing it at the end of body, means, JS will execute after the body elements are loaded:
<html>
<body>
<input type="text" id="one" name="acc" value="iss" />
<script type='text/javascript'>
var a = document.getElementById('one').value;
console.log(a);
</script>
</body>
</html>
If you use JQuery, then your code should be in $(document).ready(function(){ ... })

you need to place the <script>...</script> part at the end of your document:
<!doctype html>
<html>
<body>
<input type="text" id="one" name="acc" value="iss">
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</body>
</html>
Or you use document.onready event:
<!doctype html>
<html>
<head>
<script>
document.addEventListener("load", function() {
var a=document.getElementById("one").value;
console.log(a);
});
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>

Clicking on radio button does not issue the alert using jquery

On clicking the radio button nothing happens, why?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="jquery.js">
$("input[name='check1']",$('#Search_By')).change(function()
{
alert('yo');
});
</script>
</head>
<body class="well">
<form action="/abc/readservlet" method="post">
<div class="well" id="Search_By">
<h3><b/>Search BY</h3>
<input type="Radio" name="check1" value="Search BY Key"> Key<br/><br/>
<input type="Radio" name="check1" value="Search By Tablename"> Tab_name
<br/>
</div>
On clicking radio button nothing happens...

If your <script> tag has a src attribute, its contents will be ignored, so your code isn't going to actually run at all.
You need to put your code into a separate script tag and run the code when the document is ready:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Search_By input[name='check1']")).change(function() {
alert('yo');
});
});
</script>
Or put both of those script tags at the very bottom of the <body> tag.

The javascript code to create the onchange handler should be as follows. Try it out.
...
$("#Search_By input[name='check1']").change(
function()
{
alert('yo');
});
...

is(':hover') works on jsfiddle but not from local file

This example works, but if i create local file like this:
<script src="jquery-big.js"></script>
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
<script>
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
</script>
(removed all utf-8 bug-symbols from jsfiddle) - nothing works, and no errors in console. checked in Google Chrome 19.0.1084.46.

try like this~
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>question</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//document ready script here
$(document).ready(function() {
$('#test').click(function() {
if ($('#hello').is(':hover')) {
$('#hello').html($('#hello').html()+' strange ');
}
});
});
</script>
</head>
<body>
<!-- element below-->
<div id="test">
<div id="hello">click</div>
<div id="no-hello">click</div>
</div>
</body>
</html>

Categories