Good afternoon,
I am trying to tick a checkbox in my html page using a script.
Unfortunately, I get the following error message :
SCRIPT5007: Unable to set property 'checked' of undefined or null reference
File: ajax3, Line: 37, Column: 5
Do you have an idea what went wrong in my code?
Thanks a lot and have a great Sunday.
Laurent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo for Ajax Auto Refresh</title>
<link rel="stylesheet" type="text/css" href="css/mystyle_day.css" />
<script src="jquery-2.1.3.min.js"></script>
<script>
/* AJAX request to checker */
function check(){
$.ajax({
type: 'POST',
url: 'checker.php',
dataType: 'json',
data: {
counter:$('#message-list').data('counter')
}
}).done(function( response ) {
/* update counter */
$('#message-list').data('counter',response.current);
/* check if with response we got a new update */
if(response.update==true){
$('#message-list').html(response.news);
sayHello();
}
});
}
//Every 1 sec check if there is new update
setInterval(check,1000);
</script>
<script>
function sayHello(){
//console.log("Coucou");
check();
}
function check() {
document.getElementById("chk1").checked = true;
}
function uncheck() {
document.getElementById("chk1").checked = false;
}
</script>
</head>
<body>
<div id="message-list" data-counter="<?php echo (int)$db->check_changes();?>">
</div>
<input type="checkbox" name="chk1" id="chk1"> Living room<br>
<input type="checkbox" name="chk2" id="chk2"> Entrance<br>
<input type="checkbox" name="chk3" id="chk3"> Kitchen<br>
</body>
</html>
As suggested by nmnsud and gcampbell, I have replaced value="chk1" by id="chk1". The correct bit of code is now the following :
<input type="checkbox" name="chk1" id="chk1"> Living room<br>
<input type="checkbox" name="chk2" id="chk2"> Entrance<br>
<input type="checkbox" name="chk3" id="chk3"> Kitchen<br>
Thanks a lot for your contribution. Best wishes,
Laurent
Related
I'm using a simple .load() function from Jquery to load a div element with id from another file in the same folder when changing the selected option in selector. But I can't make it work. Nothing happens when I change the selected option the server gives error "No such file or directory" and My alert ("Before load") does work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<select id="productType" onchange="load_special_data()">
<option id="Book" selected>Book</option>
<option id="DVD">DVD</option>
<option id="Furniture">Furniture</option>
</select>
<div id="specialData"></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#productType").change(load_special_data());
});
function load_special_data()
{
var selected_id = $("#productType option:selected").attr("id");
alert("Before load");
try {
jQuery("#specialData").load('form_special_data.php #Book', null, function (responseText, textStatus, xhr) {
alert(textStatus); // see what the response status is
});
} catch (e) {
alert(e.message);
}
}
</script>
</html>
Content of form_special_data.php:
<div id="Book">
<label for="weight">Weight (KG) </label>
<input type="number" required class="form-control" name="weight" id="weight">
<small>Please provide book weight in KG</small>
</div>
<div id="Furniture">
<label for="height">Height (CM) </label>
<input type="number" required class="form-control" name="height" id="height">
<label for="width">Width (CM) </label>
<input type="number" required class="form-control" name="width" id="width">
<label for="length">Length (CM) </label>
<input type="number" required class="form-control" name="length" id="length">
</div>
First of all, you shouldn't invoke the load_special_data function more than once.
Remove the onchange="load_special_data()", and leave it like this:
<select id="productType">
Put all the JQuery related functions inside the jQuery(document).ready(function(){ ...
Like this:
jQuery(document).ready(function() {
jQuery("#productType").change(load_special_data());
function load_special_data() {
var selected_id = $("#productType option:selected").attr("id");
alert("Before load");
try {
jQuery("#specialData").load('form_special_data.php #Book', null, function (responseText, textStatus, xhr) {
alert(textStatus); // see what the response status is
});
} catch (e) {
alert(e.message);
}
}
});
About the No such file or directory error, that's one of the easiests errors to fix. Verify that the file name and path are correct.
Finally, I don't know what's your final goal here, but I'd use AJAX instead of "load" because it's more practical and easier to use.
I am trying to add the function of selecting and deselecting all fields. What I have now doesn't work for me and I don't know why? Does anyone know why?
.....
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title>Report</title>
<script>
$("#selectAll").click(function() {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
</script>
</head>
....
<label for='selectAll'><input id="selectAll" type="checkbox">Select All </label>
<input checked="checked" type="checkbox">Test</label>
<label th:each="item : ${userConfig.isEnableMap}">
<input checked="checked" type="checkbox" th:text="${item.key}" th:field="*{isEnableMap['__${item.key}__']}"/>
</label>
I added changes and it works now
<script>
$(document).ready(function () {
$("#selectAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
You can try :
$("input[type=checkbox]").prop("checked",true);
I am trying to learn web design with a search function using MySql. I want make it to 2 steps selection however, I have run into a problem which really confuses me since I don't have a strong background to design. I am trying to be as specific as possible to make the question clear.
test.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>count</title>
<link rel="stylesheet" type="text/css" href="dbstyle.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
</head>
<body>
<form id="serc" method="post" action="">
<input type="radio" value="typeA" name="comments" onclick="expr()">Good
<input type="radio" value="typeB" name="comments" onclick="expr()">Bad
</form>
<form id="form1" name="form1" method="post" style="visibility:hidden">
<p>please select reason:</p>
<input type="checkbox" class="check" name="checkbox[]" value="COL 8">aaa<br />
<input type="checkbox" class="check" name="checkbox[]" value="COL 9">bbb<br />
<input type="checkbox" class="check" name="checkbox[]" value="COL 10" >ccc<br />
<button id="aaa" type="submit" class="butt" name="sub2" style="visibility:hidden">Submit</button>
</form>
<?php
$comm = $_POST["gender"];
$reas = $_POST["checkbox"];
if($comm){$respond = $_POST['comments'];
echo $respond;
}
<script src="limit.js"></script>
</body>
</html>
limit.js
//click to get Value
$("input[type='Radio']").click(function(){
var radioValue = $("input[name='comments']:checked").val();
$("#serc").css("display", "none");
$("#form1").css("visibility", "visible");
});
//limit multiple selection up to 4
$("input:checkbox").click(function() {
var bol = $("input:checkbox:checked").length;
if(bol == 4){
$("input:checkbox").not(":checked").attr("disabled",bol);
$("#aaa").css("visibility", "visible");
}
else {
$("#aaa").css("visibility", "hidden");
$("input:checkbox").removeAttr("disabled");
}
});
// return value
function expr()
{
var radioValue = $("input[name='comments']:checked").val();
var dataTosend= radioValue;
$.ajax({
url: 'index.php',
type: 'POST',
data: dataTosend,
async: true,
success: function (data) {
alert(data)
},
});
}
The function will be:
First stage select from radio item, onclick use jQuery to hide the selection items and also get radioValue from the jQuery by Ajax way to send to php use.
Second stage select 4 items from checkbox, and submit to run search field.
I expect load the radioValue back to php as a variable but seems it didn't get the value.
Any help would be appreciated.
You must send data using key value pair like this:
function expr(){
var radioValue = $("input:radio[name='comments']").val();
var dataTosend= {'radioValue': radioValue};
$.ajax({
url: 'index.php',
type: 'POST',
data: dataTosend,
async: true,
success: function (data) {
alert(data)
},
});
}
Stupid question no doubt but driving me mad!
Django template html but really a jquery question.
The following line checks a checkbox on my page....
$(id_exam_choices_1).prop('checked', true);
Fine no problem.
I want to create the same using a variable...
value = 1;
var thename = 'id_exam_choices_' + value;
alert(thename);
The alert shows the string is correct ....
How do I feed the variable into a command...??
$(thename).prop('checked', true);
I hope this is enough info - it seems straightforward but ....
Thanks.
Im not sure that I got your question correctly. If you are trying to check a checkbox depending on its number which is decided by value variable number then I would propose this solution. i.e if value=3 then checkbox with id= id_exam_choices_3 will be checked and so on.
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var value = 3;
var thename = "id_exam_choices_" + value;
$("body").find('#' + thename).prop("checked", true);
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
<form method="post">
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_1" />
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_2" />
<span name="a">Check it</span> <input type="checkbox" id="id_exam_choices_3" />
</form>
</body>
</html>
I'm creating a website as a small store for personal use, my main question here is how would I code a function for the additon of all of it?
six single check boxes for various types of peripheral devices including printer, monitors, modems or other devices with which you are familiar. Assume the basic computer system price of $500.00 and then add appropriate prices based on user checks.
Monitor 299.99
Printer 129.99
Speakers 49.99
CDRW 159.99
Scanner 129.99
Modem 49.99
If I add just a scanner, my total will be $629.99.
If I add a modem and a monitor, my total will be $849.98.
Here is my current progress, I have not added too much JS code yet as I'm unsure of how I would add this function:
<html>
<head>
<title>Problem 9</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
// Program name: Problem 9
// Purpose: Program 9
// Author: Opack
// Date last modified: 2-13-12
$(function() {
function calculateCost() {
var ret = 500;
var $selected = $('input:checked', $peripherals);
$selected.each(function() {
ret += parseFloat($(this).attr('alt'));
});
return ret.toFixed(2);
}
function setCost() {
$total.text(calculateCost());
}
var $peripherals = $('#peripherals');
var $total = $('#total');
$('input[type="checkbox"]', $peripherals).on('change', setCost);
setCost();
});
</script>
<style>
h1 {
font-size: large;
}
</style>
</head>
<body bgcolor="yellow">
<h1>What peripherals do you want to add?</h1>
<form id="peripherals">
<input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br>
<input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br>
<input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br>
<input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br>
<input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br>
<input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br>
<label for="Cost">Total</label><input type="text" name="Cost" />
</form>
</body>
</body>
</html>
Is this homework?
function calculation(a,b)
{
return a + b;
}
SOURCE
W3Schools: Javascript Operators
W3Schools: Javascript Functions
Here's my attempt. I ended up using jQuery and updating the cost automatically. I attached the cost information to "alt" attribute of the checkboxes. It's possible to do this in some other ways as well. Tweak that to suit your purposes.
jQuery code in case jsbin goes bust...
$(function() {
function calculateCost() {
var ret = 500;
var $selected = $('input:checked', $peripherals);
$selected.each(function() {
ret += parseFloat($(this).attr('alt'));
});
return ret.toFixed(2);
}
function setCost() {
$total.attr('value', calculateCost());
}
var $peripherals = $('#peripherals');
var $total = $('input[name="Cost"]');
$('input[type="checkbox"]', $peripherals).on('change', setCost);
setCost();
});
And relevant HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>Cost Demo/title>
<style>
h1 {
font-size: large;
}
</style>
</head>
<body>
<h1>What peripherals do you want to add?</h1>
<form id="peripherals">
<input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br>
<input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br>
<input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br>
<input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br>
<input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br>
<input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br>
<label for="Cost">Total</label><input type="text" name="Cost" />
</form>
</body>
</html>