We Keep Coding

Javascript document.getElementsByName( ) with array assigned based on variable

These are the checkboxes I currently have image and when I click on the first checkbox 'April 2015' it should show like this checkedAll.
My current checkboxes name is created based on the loop $i name='check_all[".$i."]'. and the checkboxes should be named as "
checkbox[1], checkbox[2],.. "
but in javascript, how should I let enter the loop number into the document.getElementsByName("check_all[]"). The loop is based on the database row, so I don't want to make it hard coded. How do I let the document.getElementsByName("check_all[]") get the
document.getElementsByName("check_all[2]") or document.getElementsByName("check_all[3]")
based on the function.
Function
public function showMY(){
..other codes...
$i = 1;
while($row = mysqli_fetch_assoc($viewSQL)) {
$MY= $row['MY'];
echo "<tr>
<td><input type='checkbox' name='' onclick=\"toggle2(this); showMe2('divCheckbox');\" >
</td>
<tr>
<td><input type='checkbox' class='some_cls' name='check_all[".$i."]' value='' onclick='showMe2('divCheckbox')'></td>";
$i++;
}
}
Javascript
function toggle2(source) {
var checkboxesCls = document.querySelectorAll('input.some_cls');
for(var i=0, n=checkboxesCls.length;i<n;i++) {
checkboxesCls[i].checked = source.checked;
}
}
function showMe2 (box) {
var chboxs = document.querySelectorAll('input.some_cls');
var vis = "none";
for(var i=0;i<chboxs.length;i++) {
if(chboxs[i].checked){
vis = "inline";
break;
}
}
document.getElementById(box).style.display = vis;
}
I had a very hard time solving this, please help.
Edited:
This is the latest code I had implemented.. The current problem is that it will auto check for the data below "Jan 2016" when I just want to check all for the data below "April 2015". image

You can add a class attribute in input tag:
"<input type='checkbox' class='some_cls' name='check_all[".$i."]' onclick=\"toggle2(this); showMe2('divCheckbox');\" >"
Then, in javascript use querySelectorAll():
var chboxs = document.querySelectorAll('input .some_cls');

Check if any checkboxes are checked and if not, display an error

I'm trying to make a function that checks if any checkboxes generated by this line
foreach ($order->get_items() as $item ){
echo "<input type='checkbox' name='productinfo[]' value='" .$item->get_name() . "|" . $item->get_quantity() . "|" . $item->get_total() ."'>";
are checked, and if not it displays an error, how do you make one with php/javascript if you can? or do you need jQuery to make one. Preferably if none are checked it would prevent a form submit from being done

This will do the trick. Check the length of input element with the name productinfo[]" that are checked. In javascript the number 0 is false. All others are true.
The function console.error() will log an error to the console. But you can change that to any kind of error message you like.
function checkBoxCheck(e) {
if ($('input[name="productinfo[]"]:checked').length) {
console.log("at least one checked");
return true;
} else {
console.error("no checkbox checked");
return false;
}
}
$('#myForm').on('submit', checkBoxCheck);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="/dummy.html">
<input type='checkbox' name='productinfo[]' value='1'>
<input type='checkbox' name='productinfo[]' value='2'>
<input type='checkbox' name='productinfo[]' value='3'>
<input type='checkbox' name='productinfo[]' value='4'>
<input value="Check" type=submit>
</form>

You can use length of jQuery in order to check atleast one checkbox is checked
if($('input[type="checkbox"]:checked').length > 0){
//your code here
}else{
alert('Please check atleast one checkbox');
}
Note: this will check all checkboxes across the page, because your input checkbox has no class.

In order to check if a checkbox is checked use checked property in Jquery/Javascript like so:
Jquery:
var isChecked = $('input:checkbox').is(':checked'); // to check if any checkbox is checked
var isChecked = $('input[type=checkbox]:checked').length; // finds how many checkboxes are checked
if(length > 0){
alert(length); //alert how many checkboxes are checked
}
Javascript:
var inputElems = document.getElementsByTagName("input"),
count = 0;
for (var i=0; i<inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
count++;
}
}
alert(count)
OR you can also use :s
var length=document.querySelectorAll('input[type="checkbox"]:checked').length
Set a onclick trigger to a function on the submit button. Change the type of button from submit to button.
<button type ="button" id = "some-id" onclick = "savebutton();">
Inside the Javascript function use the validation :
function savebutton(){
if(document.querySelectorAll('input[type="checkbox"]:checked').length == 0){
alert('None of the checkboxes are checked');
}else{
var some_value = document.getElementById('id_of_some_element_you_wish_to_save').value;
$.ajax({
url : 'backend.php',
method : 'POST',
data: {values_you_want_to_send:some_value},
dataType: 'json',
success:function(data) {
window.reload();
}
error: function (xhr, ajaxOptions, thrownError) {
alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
alert("responseText: "+xhr.responseText);
}
});
}
}

jQuery check 2 checkboxes in a PHP foreach's loop

I have a javascript's script which allow to check 2 checkboxes with the same values at the same time but it doesn't work.
I get the values from a databases thanks to a php's foreach loop. Here is my test code:
<?php
//checkboxes
foreach($host1 as $row){
echo'<input type="checkbox" name="list[]" value="'.$row['table'].'">';
}
foreach($host1 as $row){
echo'<input type="checkbox" name="list[]" value="'.$row['table'].'">';
}
//script
foreach($host1 as $row){ ?>
<script type="text/javascript">
var $checkboxes = $("input[type=checkbox][name='list[]'][value='<?php echo $row['table']?>']");
$checkboxes.on("click", function() {
var checkedState = this.checked
$checkboxes.each(function() {
this.checked = checkedState;
});
});
</script>
<?php }
If I change the value $row['table'] into a simple number, "2" for example, it's working. I also look if the values ($row['table']) of every checkboxes are the same and they are all good.
Strange thing : When I check any checkboxes, it will not check the corresponding ones, but it will instead check the lasts of the table.
Any ideas where is my mistake ?
Thank you ;)

You should try this. I think this is what you want
<?php
//checkboxes
foreach ($host1 as $row) {
echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
foreach ($host1 as $row) {
echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
//script
?>
<script type = "text/javascript">
$(document).ready(function () {
$(".my_cb").on("click", function () {
var val = $(this).val();
var checkboxes = $("input[type=checkbox][name='list[]'][value='"+val+"']");
var checkedState = this.checked;
checkboxes.each(function () {
this.checked = checkedState;
});
});
});
</script>

Instead of doing a php loop and assigning each click event separately, let jQuery handle that:
// this selector should get all your checkboxes
var checkboxes = $("input[type=checkbox][name='list[]']");
checkboxes.click(function() {
// not sure what you are trying to do here but it just looks like you are trying to set all checkboxes to the same state as the current one
checkboxes.prop('checked', this.checked);
});
Update
As you only have 2 list of checkboxes with the same name, I have shown options for if they have different parent elements or the same parent element
JS:
var list = $('.parent-element').find("input[type=checkbox][name='list[]']"),
list1 = $('.parent-element1').find("input[type=checkbox][name='list[]']");
list.click(function() {
var checkbox = $(this),
thisIndex = list.index(checkbox);
list1.eq(thisIndex).prop('checked', this.checked);
// if at all possible I would use the above index to change the corresponding checkbox in the other list.
// if all checkboxes are under the same parent then you will only have list (list1 won't be needed)
// and it will contain all children so to get the corresponding index you would need to do:
var thisIndex = list.index(checkbox) + (list.length / 2);
list.eq(thisIndex).prop('checked', this.checked);
});

Javascript - Radio Button onChange

Here is my code:
<html>
<head>
<script type="text/javascript">
function Change(radio)
{
if(radio.value)
{
setvalue = "Yes";
radiovalue = radio.value;
value = setvalue;
ChangeValue(radiovalue,value)
}
}
function ChangeValue(radiovalue, value)
{
alert(radiovalue+"=>"+value);
}
</script>
</head>
<body>
<?php
for($i = 1; $i <= 3; $i++)
{
?>
<input type="radio" name="choice" value="<?php echo $i;?>" onchange="Change(this);" /><br />
<?php
}
?>
</body>
</html>
There are 3 radio buttons in the web page.
From the above code, when I click the first radio button, it will show alert message for the radio button that I choosen (i.e 1 => Yes).
Yes means that I choose the radio button.
No means that I didn't choose the radio button.
Now my questions is if I choose the first radio button, it will show alert message for each radio button (i.e. 1 => Yes, 2 => No, 3 => No). How should I modify?

In your example, radio.value will be the string "1", "2", or "3". All of these are truthy, so the if block will always run. You need to compare the actual value using a comparison opperator such as == in your if statement.
Example:
if(radio.value == "1")

I cut and pasted your example into a web app and it worked just the way you'd expect - both IE and chrome - so don't know why you're getting strange results. The if(radio.value) simply checks for the existence of a value (javascript thing) and is coded correctly. You might try onchange="return Change(this)" as some browsers may not like the open call.

Plese try this
<html>
<head>
<script type="text/javascript">
function Change(radio) {
for (var i = 1; i < 4; i++) {
var ele = document.getElementById("choice_"+i);
if(ele.checked) {
setvalue = "Yes";
radiovalue = ele.value;
value = setvalue;
ChangeValue(radiovalue,value)
} else {
setvalue = "No";
radiovalue = ele.value;
value = setvalue;
ChangeValue(radiovalue,value)
}
}
}
function ChangeValue(radiovalue, value) {
alert(radiovalue+"=>"+value);
}
</script>
</head>
<body>
<?php
for($i = 1; $i <= 3; $i++) {
?>
<input type="radio" name="choice" id="choice_<?php echo $i;?>" value="<?php echo $i;?>" onchange="Change(this);" /><br />
<?php
}
?>
</body>
</html>

How to separately validate each simple HTML radio form, created through a PHP loop, using Javascript and Jquery

I made a number of html forms containing only radio buttons and a submit button. However, I cannot get them to validate properly--independently of each other. Here is my code:
PHP/HTML code for the form:
<table>
<?php
for($i=0; $i<count($array1); $i++)
{
$number = $i + 1;
echo "<TR><TD>;
echo "<form name='move' action='listChange_controller.php' method='POST'>Title:<br/>
<input type='radio' name='change".$number."' value = 'val1' />Thing1
<input type='radio' name='change".$number."' value = 'val2'/>Thing2
<input type='radio' name='change".$number."' value = 'val3'/>Thing3
<input type='button' name='submit' value='submit' onClick='validate(".$number.");'/>";
echo "</form>";
echo "</TD></TR>";
}
?>
</table>
Here is the javascript/jquery I have been trying, but has not worked:
function validate(number)
{
var name_var = 'change'+number;
if($('input:radio[name=name_var]:checked').length > 0)
{
$.post('file.php',{ name_var:$('input:radio[name=name_var]:checked').val()});
}
else
{
alert('You must choose');
return false;
}
}
When I do this, it always thinks I have not chosen a radio button before pressing submit; it always carries out the 'else' part of my javascript function.
Please let me know why it is not working, and what would work. Any help and suggestions appreciated.

This line...
if($('input:radio[name=name_var]:checked').length > 0)
should read
if($('input:radio[name=' + name_var + ']:checked').length > 0)

Change...
if($('input:radio[name=name_var]:checked').length > 0)
to...
if ($('input[name=' + name_var + ']').is(':checked'))