Develop Reference

How to make an instant search for div results?

I have results shows up inside a table, I designed it to show as grid by separating them by td for each.
I used a JS code to filter the results by a text written in textbox, but the only results shows is the labels!
I want each td shows as a result, complete with the contents (Image + Input + label).
Here's the JS code & example of a table same what I have:
$(document).ready(function() {
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#table *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<table>
<input type="text" id="filter">
<div name="table">
<td>
<label>Product1</label>
<img src='/img/a.jpg'>
<input type="text" value="55">
</td>
<td>
<label>Product2</label>
<img src='/img/b.jpg'>
<input type="text" value="70">
</td>
<td>
<label>Product3</label>
<img src='/img/c.jpg'>
<input type="text" value="20">
</td>
</div>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Use closest this link to get parent td from your search and then toggle visibility.
below is logic to your solution.
$(this).closest("td").toggle($(this).text().toLowerCase().indexOf(value) > -1)
$(document).ready(function() {
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table label").filter(function() {
$(this).closest("td").toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<input type="text" id="filter">
<div name="table">
<td>
<label>Product1</label>
<img src='/img/a.jpg'>
<input type="text" value="55">
</td>
<td>
<label>Product2</label>
<img src='/img/b.jpg'>
<input type="text" value="70">
</td>
<td>
<label>Product3</label>
<img src='/img/c.jpg'>
<input type="text" value="20">
</td>
</div>
</table>

remove table tr when click btn jquery

I am creating a add and remove function in jQuery when minus btn [remove_button] will click. but it not working.
I am appending the td when which plus btn [add_button] it works but how I achieve for deletion method.
My code is below, I am fresh in jQuery and hoping if I am wrong you buddy developers will help to fix the issue.
var maxField = 5;
var x = 1;
$('.add_button').click(function() {
if (x < maxField) {
x++;
newrow = '<tr class="ok"><td><select class="form-control" name="product_name[]" id="product_id" required><option value="14563">Product 1</option><option value="96547">Product 2</option><option value="965489">Product 3</option></select></td><td><input type="tel" class="form-control" name="quantity[]" placeholder="Enter Quantity" /></td><td><button type="button" class="btn btn-danger remove_button"><i class="fa fa-minus"></i></button></td></tr>';
var rowspan = parseInt($('.field_data').attr('rowspan')) + 1;
$('.field_data').attr('rowspan', rowspan);
$('.complaint_table tr:eq(3)').after(newrow);
}
});
$(".complaint_table").on("click", ".remove_button", function(e) {
e.preventDefault();
$(this.tr).remove();
x--;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover table-bordered complaint_table">
<tbody>
<tr>
<td>Company:</td>
<td>
<input class="form-control" type="text" maxlength="50" placeholder="Company" />
</td>
<td>Company RegDate:</td>
<td>
<input class="form-control" type="date" />
</td>
</tr>
<tr class="complaint_table">
<td rowspan="10" class="field_data">Products<span style="color: red; font-size: 14px;"> *</span>:</td>
<td>
<select class="form-control" name="product_name[]">
<option value="14563">Product 1</option>
<option value="96547">Product 2</option>
<option value="965489">Product 3</option>
</select>
</td>
<td><input class="form-control" type="number" maxlength="2" minlength="1" name="quantity[]" /></td>
<td><button type="button" class="btn btn-success add_button"><i class="fa fa-plus"></i></button></td>
</tr>

The issue is because this in the .remove_button click handler refers to the DOM element. They do not have a tr property.
Instead to get a reference to the parent tr element to the clicked button use closest():
$(".complaint_table").on("click", ".remove_button", function(e) {
e.preventDefault();
$(this).closest('tr').remove();
x--;
});

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.