We Keep Coding

HTML Checkbox onclick send everytime the same value

I try to use two checkboxs with a value = "on". The other one is for rember after submit a form. Every time i click on this checkbox, they will always send "on".
What i do wrong ?
Here is my code
var rdt = {
updateScroll: function() {
alert('klick scroll:' + gbi('scrollit').value);
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id = 'icontent';
ifr.src = gbi('urlinput').value;
ifr.scrolling = (gbi('scrollit').value == 'on') ? 'yes' : 'no';
gbi('scroll_hid').value = (gbi('scrollit').value == 'on') ? 'on' : 'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
}
}
function gbi(iD) {
return document.getElementById(iD);
}
<input type="checkbox" id="scrollit" onclick="rdt.updateScroll()" checked>
<input type="hidden" name="scroll" id="scroll_hid" value="<?php echo $scroll ?>">
The parameter $scroll can predifine over URL, but the result was the same if i use it or if i dont use it.

This is because you are getting its value and its value is on. You have to get the value when it is checked like:
var value = null;
$('#scrollit').click(function(){
if($(this).is('checked'))
{
value = $(this).val();
}
});
In this case you will get its value when it is checked otherwise null

The primary intention of checkbox is to make user that the option to be checked or unchecked it is not intended to send values
You can refer this link for more details
Here is the main thing
The HTML input element allows you to select a
single value for submission in a form (or not).
A solution for your problem is as follows you can check checkbox's current status ie checked or not by using following
based on your code
gbi('scrollit').checked
var rdt = {
updateScroll: function() {
alert('klick scroll:' + gbn('scrollit').value);
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id = 'icontent';
ifr.src = gbi('urlinput').value;
ifr.scrolling = (gbi('scrollit').value == 'on') ? 'yes' : 'no';
gbi('scroll_hid').value = (gbi('scrollit').value == 'on') ? 'on' : 'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
}
}
function gbi(iD) {
return document.getElementById(iD);
}
function gbn(name) {
var x = document.getElementsByName(name);
var i;
var element;
for (i = 0; i < x.length; i++) {
if (x[i].type == "checkbox") {
element = x[i];
}
}
return element;
}
<input type="checkbox" name="scroll" id="scrollit" onclick="rdt.updateScroll()" checked>
<input type="hidden" name="scroll" id="scroll_hid" value="<?php echo $scroll ?>">

add a small loop make the code more clear for me and works already
updateScroll:
function() {
gbi('main').removeChild(gbi('icontent'));
var ifr = document.createElement('iframe');
ifr.id='icontent';
ifr.src=gbi('urlinput').value;
if (gbi('scrollit').value=='on' && gbi('scroll_hid').value!='on')
{ ifr.scrolling='yes'; gbi('scroll_hid').value='on';}
else
{ ifr.scrolling='no'; gbi('scroll_hid').value='';}
//ifr.scrolling=(gbi('scrollit').value=='on')?'yes':'no';
//gbi('scroll_hid').value=(gbi('scrollit').value=='on')?'on':'off';
gbi('main').appendChild(ifr);
rdt.resizeView();
},
rotate: function() {
rdt.w = parseInt(gbi('icontent').style.width);
rdt.h = parseInt(gbi('icontent').style.height);
gbi('icontent').style.width=gbi('icontentfoot').style.width = rdt.h+'px';
gbi('icontent').style.height = rdt.w+'px';
}

jQuery Cannot read property 'toLowerCase' of undefined

I am reading a chapter from PHP Ajax Cookbook. Here is the code:
HTML:
<form class='simpleValidation'>
<div class='fieldRow'>
<label for='title'>Title *</label>
<input type='text' id='title' name='title' class='required'>
</div>
<div class='fieldRow'>
<label for='url'>URL</label>
<input type='text' id='url' name='url' value='http://'>
</div>
<div class='fieldRow'>
<label for='labels'>Labels</label>
<input type='text' id='labels' name='labels'>
</div>
<div class='fieldRow'>
<label for='textarea'>Text *</label>
<textarea id='textarea' class='required'></textarea>
</div>
<div class='fieldRow'>
<input type='submit' id='formSubmitter' value='Submit'>
</div>
</form>
jQuery:
$(document).ready(function() {
var timerId = 0;
$('.required').keyup(function() {
clearTimeout(timerId);
timerId = setTimeout(function() {
ajaxValidation($(this));
}, 200);
});
});
var ajaxValidation = function (object) {
var $this = $(object);
var param = $this.attr('name');
var value = $this.val();
$.get(
'inputValidation.php',
{'param' : param, 'value' : value },
function (data) {
if (data.status == 'OK') {
validateRequiredInputs();
} else {
$this.addClass('failed');
}
},
'json'
);
var validateRequiredInputs = function() {
var numberOfMissingInputs = 0;
$('.required').each(function(i) {
var $item = $(this);
var itemValue = $item.val();
if (itemValue.length) {
$item.removeClass('failed');
} else {
$item.addClass('failed');
numberOfMissingInputs++;
}
});
var $submitButton = $('#formSubmitter');
if (numberOfMissingInputs > 0) {
$submitButton.prop('disabled', true)
} else {
$submitButton.prop('disabled', false)
}
}
}
PHP (inputValidation.php):
<?php
$result = array();
if (isset($_GET['param'])) {
$result['status'] = 'OK';
$result['message'] = 'Input is valid!';
} else {
$result['status'] = 'ERROR';
$result['message'] = 'Input IS NOT valid';
}
echo json_encode($result)
?>
When I start typing in the Title * field I get the following error from the console: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
Note: I am using jQuery 2.2.1
So far I have checked the code for mis-spelling but cannot find any.

The this bit in ajaxValidation($(this)) isn't what you think it is: it's actually window, since it's being called by setTimeout().
One solution is to assign $(this) to a variable outside the function, like so:
$('.required').keyup(function() {
clearTimeout(timerId);
var $this = $(this);
timerId = setTimeout(function() {
ajaxValidation($this);
}, 200);
});

how to operate checkboxes with all conditions in jquery

I want a jquery condition which will handle the following scenarios -
1) Some of the checkboxes selected
2) All of the checkboxes selected
I want them both in a single loop. Currently, I've the following code to select all checkboxes only -
$('.check-all').click(function() {
var selector = $(this).is(':checked') ? ':not(:checked)' : ':checked';
var ids = [];
$('#chkall input[type="checkbox"]' + selector).each(function() {
$(this).trigger('click');
ids.push($(this).attr('value'));
});
var id = [];
id = JSON.stringify(ids);
document.cookie = "ids="+id;
});
And taking checkboxes in my PHP code as -
echo '<ul class="list-unstyled" id="chkall">';
foreach ($contacts as $contact) {
echo '<li>
<div class="checkbox" id="checkboxes">
<label><input type="checkbox" class="case" name="case" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
</div>
</li>';
}
So, how should I handle both scenarios in a single loop ? I've send a cookie when checking is done.

I found a solution & now doing this in a following way -
PHP Code -
echo '<ul class="list-unstyled" id="chkall">';
foreach ($contacts as $contact) {
echo '<li>
<div class="checkbox" id="checkboxes" onclick="getID('.$contact['cust_id'].')">
<label><input type="checkbox" class="check-all" name="case" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
</div>
</li>';
}
<div class="checkbox" onclick="getID('0')">
<?= Html::checkbox(null, false, [
'id' => 'selectall',
'label' => 'Select all',
'class' => 'check-all',
]);?>
</div>
</div>
And the respective script is -
var ids = [];
function getID(id) {
var checkboxlist = document.getElementsByName('case');
var itr = 0, checkedFlag = 0, uncheckedFlag = 0;
var inputElements = document.getElementsByClassName('check-all');
if (id == 0) {
$(".check-all").prop("checked", $("#selectall").prop("checked"))
}
else {
for (var i = 0; inputElements[i]; ++i) {
if (inputElements[i].value == id) {
if (inputElements[i].checked == true) {
inputElements[i].checked = false;
break;
}
else {
inputElements[i].checked = true;
break;
}
}
}
while (itr < checkboxlist.length) {
if (checkboxlist[itr].checked == true) {
checkedFlag++;
}
else {
$("#selectall").prop("indeterminate", true);
uncheckedFlag++;
}
itr++;
}
if (checkedFlag == checkboxlist.length) {
$("#selectall").prop("indeterminate", false);
$("#selectall").prop("checked", true);
}
if (uncheckedFlag == checkboxlist.length) {
$("#selectall").prop("indeterminate", false);
$("#selectall").prop("checked", false);
}
}
}
That's it !!!

Basic Javascript onclick

here's my code, brand new to coding trying to get the box "points" to return the sum of pointSum if "Ben" is typed into the box "winner". Just trying to work on some basics with this project. Attempting to make a bracket of sorts
<HTLML>
<head>
<script>
var pointSum = 0;
var firstRound = 20;
var secondRound = 50;
var thirdRound = 100;
var fourthRound = 150;
var fifthRound = 250;
var finalRound = 300;
var winnerOne = false;
var winnerTwo = false;
var winnerThree = false;
var winnerFour = false;
var winnerFive = false;
var winnerSix = false;
if (winnerOne = true){
pointSum+=firstRound
} else if (winnerTwo = true){
pointSum+=secondRound
} else if (winnerThree = true){
pointSum+=thirdRound
} else if (winnerFour = true){
pointSum+=fourthRound
} else if (winnerFive = true){
pointSum+=fifthRound
} else if (winnerSix = true){
pointSum+=finalRound
else
function tally() {if document.getElementById('winner') == "Ben" { winnerOne = true;
}
pointSum=document.getElementById("points").value;
}
</script>
</head>
<body>
<form>
Winner:
<input type="text" name="winner" id="winner" size="20">
Points:
<input type="text" name="points" id="points" size="20">
Submit
<button type= "button" onclick="tally()">Tally points</button>
</form>
</body>
</html>
UPDATE***** new code, getting better, not returning console errors but still not getting anything in the "points" box upon clicking tally
<HTLML>
<head>
<script>
var pointSum = 0;
var firstRound = 20;
var secondRound = 50;
var thirdRound = 100;
var fourthRound = 150;
var fifthRound = 250;
var finalRound = 300;
var winnerOne = false;
var winnerTwo = false;
var winnerThree = false;
var winnerFour = false;
var winnerFive = false;
var winnerSix = false;
function tally() {
var winner = document.getElementById("winner").value;
var firstWinner = "Ben";
if (winner == firstWinner){
winnerOne == true;
}
pointSum = document.getElementById("points").value;
}
if (winnerOne == true){
pointSum+=firstRound;
} else if (winnerTwo){
pointSum+=secondRound;
} else if (winnerThree){
pointSum+=thirdRound;
} else if (winnerFour){
pointSum+=fourthRound;
} else if (winnerFive){
pointSum+=fifthRound;
} else if (winnerSix){
pointSum+=finalRound;
}
</script>
</head>
<body>
<form>
Winner:
<input type="text" name="winner" id="winner" size="20">
Points:
<input type="text" name="points" id="points" size="20">
Submit
<button type= "button" onclick="tally()">Tally points</button>
</form>
<div class="updatePoints">
</div>
</body>
</html>

Your code has a few mistakes, lets change it a little bit!
First, you need to access 'value' atribbute of your winner element in your if statement, and surround all the statement in parenthesis
function tally() {
if (document.getElementById('winner').value == "Ben"){
winnerOne = true;
}
pointSum = document.getElementById("points").value;
}
Second, you use '==' to make comparison, you are using '=', it means that you are assign true to variables, and you're forgetting to put ';' at the end of lines! change this part:
if (winnerOne == true){
pointSum+=firstRound;
}
put all of your if/else like the example above!
Hint: when you are using if statement you can use like this:
if (winnerOne){ //you can omit == true, because if winnerOne is true, it will enter ind the if statement
//will enter here if winnerOne is true
}
if (!winnerOne){ //you can omit == false, because if winnerOne is not true, it will enter ind the if statement
//will enter here if winnerOne is false
}

You also have a left over else at the end of your if check which is invalid. You need to end the last else if statement with the };.
Are you trying to out put the text somewhere? I don't see any code that is handling this - you may want to add some HTML that will update like so:
<div class="updatePoints">
// leave empty
</div>
Then within your JavaScript you can always add some code to update the .updatePoints
var points = document.getElementByClass('updatePoints');
points.innerHTML = pointSum.value;

Have add some lines in your code and modify it with some comments. Can try at https://jsfiddle.net/8fhwg6ou/. Hope can help.
<HTLML>
<head>
<script>
var pointSum = 0;
var firstRound = 20;
var secondRound = 50;
var thirdRound = 100;
var fourthRound = 150;
var fifthRound = 250;
var finalRound = 300;
var winnerOne = false;
var winnerTwo = false;
var winnerThree = false;
var winnerFour = false;
var winnerFive = false;
var winnerSix = false;
function tally() {
var winner = document.getElementById("winner").value;
var firstWinner = "Ben";
if (winner == firstWinner){
winnerOne = true; // Use only one = symbol to assign value, not ==
pointSum = Number(document.getElementById("points").value); // moved from outside and convert to number
// This code will update point in Points box
document.getElementById("points").value = tally_pointsum(pointSum);
// The codes below will add the text in div, just remove the + sign if you don't like
document.getElementById("updatePoints").innerHTML += (tally_pointsum(pointSum) - pointSum) + " points added<br />";
}
}
// Wrap codes below become a function, lets call it tally_pointsum:
function tally_pointsum(pointSum) {
if (winnerOne == true){
pointSum+=firstRound;
} else if (winnerTwo){
pointSum+=secondRound;
} else if (winnerThree){
pointSum+=thirdRound;
} else if (winnerFour){
pointSum+=fourthRound;
} else if (winnerFive){
pointSum+=fifthRound;
} else if (winnerSix){
pointSum+=finalRound;
}
return pointSum; //return the sum to caller
}
</script>
</head>
<body>
<form>
Winner:
<input type="text" name="winner" id="winner" size="20">
Points:
<input type="text" name="points" id="points" size="20">
Submit
<button type= "button" onclick="tally()">Tally points</button>
</form>
<!-- change class="updatePoints" to id="updatePoints" for document.getElementById("updatePoints") -->
<div id="updatePoints">
</div>
Happy coding.

I want to Empty the Value of 2 Input-Type-Text, On Checked (Box)

Guys I Need Help I have the Code what can Empty the Value of Single Input by ID i have 2 Input lets say Start time and End time When i Click on All Day it should be Empty Start Time and End Time When i Check this Button...
Here is my Code....
<Input type="text" id="startime" />
<input type="text" id="endtime" />
<input type="check" id="remove" />
<script type="text/javascript">
var imgInput = document.getElementById('startime'),
remove = document.getElementById('remove'),
val = imgInput.value;
remove.onchange = function() {
if (this.checked) {
imgInput.value = "";
} else {
imgInput.value = val;
}
}
</script>
Help Appreciated...

For a checkbox, you should not use the onchange event handler, onclick will do what you need:
remove.onclick = function() {
if (this.checked) {
imgInput.value = "";
} else {
imgInput.value = val;
}
}
However it looks like you might be trying to save the value if it gets cleared so it can be repopulated, if this is the case then you also need to update val before you clear the text box:
remove.onclick = function() {
if (this.checked) {
val = imgInput.value;
imgInput.value = "";
} else {
imgInput.value = val;
}
}