Develop Reference

Check multiple checkboxes with one global funtion

I am trying to select a list of checkboxes. The inputs are generated dynamically and there is more than one list of checkboxes - so I created a global function by sending in the id of the < table > so that the correct list of checkboxes are checked/unchecked.
I think the looping of the nodes in the nodelist is causing the problem but in my mind, it makes sense, but the checkboxes are not checking and there is no error popping up either.
function checkAll(name) {
var nodeList = $(name).next('input[type="checkbox"]');
var nodes = $(nodeList);
nodes.each(function(node) {
if (!node.disabled) {
node.checked = true;
}
});
}
<table summary="User locations" id="LocationsTable">
<tr>
<th>
<input type='hidden' name='StoreSelector' id='StoreSelector' value='true'>
Other locations (multi-store)
<button type="button" onclick="javascript:checkAll('LocationsTable');">All</button>
<button type="button" onclick="javascript:uncheckAll('LocationsTable');">None</button>
</th>
</tr>
<tr id="LocationRow">
<td>
<input type="checkbox" name="Store" id="Store" value="Store"> <span id="StoreName">Store 1</span>
</td>
</tr>
</table>

You can use find here very well.
Consider that your name is an ID, so put in fron of your name the hashtag #name.
Also I would recommend using an event listener. I updated your code to use it therefore I gave your btn an id.
document.getElementById('btn').addEventListener('click', function(){checkAll('LocationsTable')})
function checkAll(name) {
var nodeList = [...$(`#${name}`).find('input[type="checkbox"]')];
nodeList.forEach(function(node) {
if (!node.disabled) {
node.checked = true;
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="User locations" id="LocationsTable">
<tr>
<th>
<input type='hidden' name='StoreSelector' id='StoreSelector' value='true'>
Other locations (multi-store)
<button id='btn' type="button" >All</button>
<button type="button" onclick="javascript:uncheckAll('LocationsTable');">None</button>
</th>
</tr>
<tr id="LocationRow">
<td>
<input type="checkbox" name="Store" id="Store" value="Store"> <span id="StoreName">Store 1</span>
<input type="checkbox" name="Store" id="Store" value="Store"> <span id="StoreName">Store 1</span>
<input type="checkbox" name="Store" id="Store" value="Store"> <span id="StoreName">Store 1</span>
</td>
</tr>
</table>

simply use querySelectorAll() :
function checkAll(name)
{
document.querySelectorAll(`#${name} input[type=checkbox]`).forEach(nod=>
{
if (!nod.disabled) nod.checked = true;
});
}

You want to prepend the selector passed to the functions with a # - an id selector. Then all you need in the function is:
$(name).find('input[type="checkbox"]').not(':disabled').prop('checked',true);
DEMO
function checkAll(name) {
$(name).find('input[type="checkbox"]').not(':disabled').prop('checked',true);
}
function uncheckAll(name) {
$(name).find('input[type="checkbox"]').not(':disabled').prop('checked',false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="User locations" id="LocationsTable">
<tr>
<th>
<input type='hidden' name='StoreSelector' id='StoreSelector' value='true'>
Other locations (multi-store)
<button type="button" onclick="javascript:checkAll('#LocationsTable');">All</button>
<button type="button" onclick="javascript:uncheckAll('#LocationsTable');">None</button>
</th>
</tr>
<tr id="LocationRow">
<td>
<input type="checkbox" name="Store" id="Store1" value="Store"> <span id="StoreName">Store 1</span>
<input type="checkbox" name="Store" id="Store2" value="Store"> <span id="StoreName">Store 2</span>
<input type="checkbox" name="Store" id="Store3" value="Store"> <span id="StoreName">Store 3</span>
<input type="checkbox" name="Store" id="Store4" value="Store" disabled> <span id="StoreName">Store 4</span>
</td>
</tr>
</table>
OPTION 2
However, I would not advise use of inline JS. Separate your JS, CSS, and HTML as in the following demo:
$('button.all').on('click', function() {
//this refers to button.all
$(this)
//go up the tree to select the table
.closest('table')
//go down to the checkboxes and check them
.find('input[type="checkbox"]').not(':disabled').prop('checked',true);
});
DEMO
$('button.all').on('click', function() {
//this refers to button.all
$(this)
//go up the tree to select the table
.closest('table')
//go down to the checkboxes and check them
.find('input[type="checkbox"]').not(':disabled').prop('checked',true);
});
$('button.none').on('click', function() {
//this refers to button.none
$(this)
//select tabl
.closest('table')
//select checkbox and uncheck
.find('input[type="checkbox"]').not(':disabled').prop('checked',false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="User locations" id="LocationsTable">
<tr>
<th>
<input type='hidden' name='StoreSelector' id='StoreSelector' value='true'>
Other locations (multi-store)
<button type="button" class="all">All</button>
<button type="button" class="none">None</button>
</th>
</tr>
<tr id="LocationRow">
<td>
<input type="checkbox" name="Store" id="Store1" value="Store"> <span id="StoreName">Store 1</span>
<input type="checkbox" name="Store" id="Store2" value="Store"> <span id="StoreName">Store 2</span>
<input type="checkbox" name="Store" id="Store3" value="Store"> <span id="StoreName">Store 3</span>
<input type="checkbox" name="Store" id="Store4" value="Store" disabled> <span id="StoreName">Store 4</span>
</td>
</tr>
</table>
OPTION 3
Alternatively, you can use one button to toggle all the checkboxes.
$('button.toggle').on('click', function() {
//this refers to button.all
$(this)
//go up the tree to select the table
.closest('table')
//go down to the checkboxes and check them
.find('input[type="checkbox"]').not(':disabled').prop('checked',function() {return !this.checked});
});
DEMO
$('button.toggle').on('click', function() {
//this refers to button.all
$(this)
//go up the tree to select the table
.closest('table')
//go down to the checkboxes and check them
.find('input[type="checkbox"]').not(':disabled').prop('checked',function() {return !this.checked});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="User locations" id="LocationsTable">
<tr>
<th>
<input type='hidden' name='StoreSelector' id='StoreSelector' value='true'>
Other locations (multi-store)
<button type="button" class="toggle">All</button>
<!--button type="button" class="none">None</button-->
</th>
</tr>
<tr id="LocationRow">
<td>
<input type="checkbox" name="Store" id="Store1" value="Store"> <span id="StoreName">Store 1</span>
<input type="checkbox" name="Store" id="Store2" value="Store"> <span id="StoreName">Store 2</span>
<input type="checkbox" name="Store" id="Store3" value="Store"> <span id="StoreName">Store 3</span>
<input type="checkbox" name="Store" id="Store4" value="Store" disabled> <span id="StoreName">Store 4</span>
</td>
</tr>
</table>
NOTE
Please note that in each option no reference is made to the id of the particular table in question as the event handler keeps the actions within the particular table whose button was clicked.

changing button to submit button in my javascript

I had this major failure in my codes, I forgot that buttons cant be isset() in PHP only submit buttons.
I used a next and prev buttons in my form, so they can next and prev the checked radio button.
but I need validation of form before going to the next radio button, when I tried converting the button to submit button it glitches and doesn't go to the next radio button.
help me convert these button codes to submit and arrange my javascript, been trying for the whole day I think I'm forgetting something again...
HTML
<form action="reservation_next_sample.php" method="POST">
<input type="radio" name="next[]" value="1" checked="checked">
<input type="radio" name="next[]" value="2" />
<div id="next1" class="desc">
<div class="div-details">
<h4>Event's Detail</h4>
<table>
<tr>
<td>
Street
</td>
<td>
<input type="text" name="event_street">
</td>
</tr>
<tr>
<td>
Barangay
</td>
<td>
<input type="text" name="event_brgy">
</td>
</tr>
<tr>
<td>
Town/City
</td>
<td>
<input type="text" name="event_town_city">
</td>
</tr>
<tr>
<td>
Province
</td>
<td>
<input type="text" name="event_province">
</td>
</tr>
</table>
<br>
<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button>
</div>
<div id="next2" class="desc" style="display: none;">
<p> inside of next 2 </p>
<button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Previous" tabindex="0" role="button">Previous</button>
<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button>
</div>
</form>
JAVASCRIPT
<script>
$(document).ready(function() {
$("input[name$='next[]']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#next" + test).show();
});
});
//this is in the bla bla next and previous -->
var index = 0;
dayNavigation = function(direction) {
var curr = $('input[name="next[]"]:checked');
if (direction == 'next') {
curr.next().attr("checked", "checked");
curr.next().click();
} else {
curr.prev().attr("checked", "checked");
curr.prev().click();
}
};
</script>

You can submit your form using jQuery example is given below. Don't change button to submit
$("button[type=button]").click(function(){
this.closest("form").submit();
})
Instead of selecting button like $("button[type=button]") give button id and select particular button $("#ButtonIdWillGoesHere")

enable/disable button on at least 2 checkboxes checked in javascript

I have a form with multiple checkboxes and a button, by default the button will be disable but after checking at least 2 or more than 2 checkboxes, the button should become active. How can i do this in javascript. code is
<form id="world" name="world">
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|11' id="A10" />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|10' id="A9" />
<label for="A9">A9</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|9' id="A8" />
<label for="A8">A8</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|6' id="A7" />
<label for="A7">A7</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|5' id="A6" />
<label for="A6">A6</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|4' id="A5" />
<label for="A5">A5</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|3' id="A4" />
<label for="A4">A4</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|2' id="A3" />
<label for="A3">A3</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|1' id="A2" />
<label for="A2">A2</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|0' id="A1" unchecked />
<label for="A1">A1</label>
</td>
</tr>
</table>
<button type="submit" name="next" />
</form>

Try below JQuery snippet;
<script type="text/javascript">
$(document).ready(function () {
$(":checkbox").click(function () {
var n = $("input:checked").length;
if (n < 2) {
$("button").attr("disabled", "disabled");
}
else {
$("button").removeAttr("disabled");
}
});
});
</script>

You can do it in this way.
window.onload = function() {
var arrCheckbox = document.getElementsByName('seatdata[]');;
arrCheckbox = Array.prototype.slice.call(arrCheckbox);
arrCheckbox.forEach(function(oneCheckbox, key) {
oneCheckbox.onchange = function() {
var intCheckedLength = document.querySelectorAll('input[name="seatdata[]"]:checked').length;;
if (intCheckedLength >= 2) {
document.getElementById("next").removeAttribute('disabled');
} else {
document.getElementById("next").setAttribute('disabled', true);
}
}
})
}
I have given id next to submit button

<form id="world" name="world">
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|11' id="A10" />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|10' id="A9" />
<label for="A9">A9</label>
</td>
</tr>
</table>
<button id = "butId" type="submit" name="next">
</form>
<script>
$(document).ready(function(){
$('#butId').attr("disabled","disabled");
}
function checkUncheck(obj){
var count = 0;
if(obj.value != 1){
$('#'+obj.id).val(1);
count+=1;
}else{
$('#'+obj.id).val(0);
}
var allCheck = document.getElementsByName('seatdata[]');
for(var i=0;i<allCheck.length;i++){
if(allCheck[i].value == 1){
count+=1;
}
if(count >= 2){
$('#butId').removeAttr("disabled");
}else{
$('#butId').attr("disabled","disabled");
}
}
}
</script>

<script>
var count;
function checkseat()
{
count = $('input[type="checkbox"][name="seatdata[]"]:checked').length;
alert(count);
if(count > 2)
{
$("#next").removeAttr("disabled");
}
else
{
$("#next").attr("disabled", true);
}
}
Add id="next" disabled to submit and add onChange="checkseat()" to each checkbox named as seatdata[]

First, you want to change your button so it starts disabled and add an id:
<button type="submit" name="next" disabled id="enable-on-two" >Stuff</button>
Next, write a function to count the number of selected checkboxes:
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
Then, write your event handler to actually change the state of the button:
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
}
Finally, bind that event handler to your whole form, since the individual change events from the checkboxes will bubble up:
document.getElementById('world').addEventListener('change', onChange, false);
Here's a fiddle demonstration: https://jsfiddle.net/wphgs09r/

var checkboxes = $('[type="checkbox"]')
checkboxes.change(() => {
$("button").prop( "disabled", checkboxes.filter(":checked" ).length >= 2 ? false : true )
})

Cloning table with hidden row

I have a repeating table with a hidden row and when clicking the a checkbox I have the row appearing, however when adding more than one table the same row always appears instead of the row that has just been cloned. I would appreciate any help with this.
My code looks like the following:
HTML:
<table class="repeatingTable">
<tr>
<td>
<label for="name">Name</label>
</td>
<td>
<input type="text" name="name" id="InputName" class="InputID_1" />
</td>
<td>
<label for="req">Required</label>
</td>
<td>
<input type="checkbox" name="req" id="CheckBox" class="ChexkBox_1" readonly="readonly" />
</td>
</tr>
<tr id="HiddenFields" class="HiddenFields_1">
<td>
<label for="Box">Box Number</label>
</td>
<td>
<input type="number" name="Box" id="InputBoxNo" class="InputBoxNo_1" readonly="readonly" />
</td>
<td>
<label for="id">ID Number</label>
</td>
<td>
<input type="number" name="id" id="inputNo" class="InputNo_1" />
</td>
</tr>
</table>
<div class="expensesBtns">
<input id="repeatingBtn" type="button" value="Add Another" />
</div>
Javascript:
document.getElementById("HiddenFields").style.visibility = "hidden";
$('.ChexkBox_1').click(function () {
if (!$(this).is(':checked')) {
document.getElementById("HiddenFields").style.visibility = "hidden";
}
else {
document.getElementById("HiddenFields").style.visibility = "visible";
}
})
$('#repeatingBtn').click(function (e) {
//$('.expensesSection').clone(false).find("*[id]").andSelf().each(function () {
// $(this).attr("id", $(this).attr("id") + "_cloned");
//})
e.preventDefault();
var lastRepeatingGroup = $('.repeatingTable').last();
var cloned = lastRepeatingGroup.clone(true);
cloned.insertAfter(lastRepeatingGroup);
cloned.find("input").val("");
//resetAttributeNames(cloned);
});
I have a js fiddle here: jsfiddle
Any help is greatly appreciated.

Check your UPDATED FIDDLE.
Worked after some changes in ChexkBox_1 click event, you have to use $(this) instead of document.getElementById("HiddenFields") to deal with current checkbox clicked :
$('.ChexkBox_1').click(function () {
if (!$(this).is(':checked')) {
$(this).parents('table').find(".HiddenFields_1").css('visibility',"hidden");
}
else {
$(this).parents('table').find(".HiddenFields_1").css('visibility',"visible");
}
});
NOTE : when you clone the row you have to change id because element IDs should be unique within the entire document.

Greasemonkey script to append text, to a form, when submitted with AJAX?

So I am making a Greasemonkey script for a mybb forum. What it does is that when you submit a post it adds code to the beginning and the end of the post. Well even though that is a bad explanation just look at the code, it explains itself
function form_submit(event) {
var form = event ? event.target : this;
var arTextareas = form.getElementsByTagName('textarea');
for (var i = arTextareas.length - 1; i >= 0; i--) {
var elmTextarea = arTextareas[i];
elmTextarea.value = "[font=Tahoma][color=white]" + elmTextarea.value + "[/color][/font]";
}
form._submit();
}
window.addEventListener('submit',form_submit, true);
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = form_submit;
Now it works everywhere I want it to except the quickreply post reply button. I am assuming this is because the quickreply button uses AJAX to submit the form and the page does not get reloaded.
So I am wondering how I can have it so that when I click the quickreply button it appends the text I want it to. I have searched around for a while and anything that i could find did not work
Also, here is the code for the button that uses ajax(The button that doesn't work with the above code)
<input id="quick_reply_submit" class="button" type="submit" accesskey="s" tabindex="2" value="Post Reply">
And here is where it is located
<!-- start: showthread_quickreply -->
<br />
<form method="post" action="newreply.php?tid=2023403&processed=1" name="quick_reply_form" id="quick_reply_form">
<input type="hidden" name="my_post_key" value="de77ee8401edd4fe176f2c6a3787d411" />
<input type="hidden" name="subject" value="*" />
<input type="hidden" name="action" value="do_newreply" />
<input type="hidden" name="posthash" value="a67ff7b68df0a0951770f7f4a24cce8f" id="posthash" />
<input type="hidden" name="quoted_ids" value="" id="quoted_ids" />
<input type="hidden" name="lastpid" id="lastpid" value="18370730" />
<input type="hidden" name="from_page" value="1" />
<input type="hidden" name="tid" value="2023403" />
<input type="hidden" name="method" value="quickreply" />
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<thead>
<tr>
<td class="thead" colspan="2">
<div class="expcolimage"><img src="http://cdn.myforums.net/images/blackreign/collapse.gif" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>
<div><strong>Quick Reply</strong></div>
</td>
</tr>
</thead>
<tbody style="" id="quickreply_e">
<tr>
<td class="trow1" valign="top" width="22%">
<strong>Message</strong><br />
<span class="smalltext">Type your reply to this message here.<br /><br />
<label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" checked="checked" /> <strong>Signature</strong></label><br />
<label><input type="checkbox" class="checkbox" name="postoptions[disablesmilies]" value="1" /> <strong>Disable Smilies</strong></label></span>
</td>
<td class="trow1">
<div style="width: 95%">
<textarea style="width: 100%; padding: 4px; margin: 0;" rows="8" cols="80" name="message" id="message" tabindex="1"></textarea>
</div>
<div class="editor_control_bar" style="width: 95%; padding: 4px; margin-top: 3px; display: none;" id="quickreply_multiquote">
<span class="smalltext">
You have selected one or more posts to quote. Quote these posts now or deselect them.
</span>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center" class="tfoot"><input type="submit" class="button" value="Post Reply" tabindex="2" accesskey="s" id="quick_reply_submit" /> <input type="submit" class="button" name="previewpost" value="Preview Post" tabindex="3" /></td>
</tr>
</tbody>
</table>
</form>
<!-- end: showthread_quickreply -->

You need to show us the javascript that associates itself to that button. If it's AJAX powered, that's the only way to know what it's doing.
That said, this code will probably work:
function form_submit (event) {
var form, bClickNotSubmit;
if (event && event.type == 'click') {
bClickNotSubmit = true;
form = document.getElementById ('quick_reply_form');
}
else {
bClickNotSubmit = false;
form = event ? event.target : this;
}
var arTextareas = form.getElementsByTagName ('textarea');
for (var i = arTextareas.length - 1; i >= 0; i--) {
var elmTextarea = arTextareas[i];
elmTextarea.value = "[font=Tahoma][color=white]" + elmTextarea.value + "[/color][/font]";
}
if ( ! bClickNotSubmit ) {
form._submit();
}
}
window.addEventListener ('submit', form_submit, true);
document.getElementById ('quick_reply_submit').addEventListener ('click', form_submit, true);
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = form_submit;
If it doesn't work, save the target page (complete HTML, JS, CSS) to a disk, zip the files together and share the zip -- so that we can see what is happening with that button.