Develop Reference

get all td names associated with checked checkboxes and show in html input field

i am developing a quote generator. what i am trying to do is when the user select a feature it should display associated tfeature name in html input field with id features
here is what i have tried
html
<table class="table" id="table">
<thead class="thead-dark">
<tr>
<th scope="col"></th>
<th scope="col">Features</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" name="product" value="300" type="checkbox" onclick="totalIt()">
<label class="form-check-label" for="exampleCheck1"></label>
</div>
</td>
<td>Homepage</td>
<td>Simplistic design with standard element</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" name="product" value="200" type="checkbox" onclick="totalIt()">
<label class="form-check-label" for="exampleCheck1"></label>
</div>
</td>
<td>Login</td>
<td>Standard Login with forgot password functionality</td>
</tr>
</tbody>
</table>
<div class="form-group">
input type="text" class="form-control" placeholder="Feature 1, Feature 2, ..." value="" id="features">
</div>
<input type="button" value="Get Selected" class="tble_submit" onclick="GetSelected()" />
so here when user select a checkbox the feature field like homepage, login should be displayed in html input field
here is updated jquery code
<script src="../js/checkbox-total.js"></script>
<script type="text/javascript">
$(".tble_submit").click(function() {
$('.table tr input[type="checkbox"]:checked').each(function() {
var abc = [];
var $row = $(this).closest('tr');
//used :not(:first-child) to skip first element (the checkbox td)
$('td:not(:first-child)', $row).each(function(i) {
abc.push($row.find('td:nth-child(2)').text());
})
$.each(abc, function(i, v) {
document.getElementById("features").value += v
})
});
});
</script>
but it is not working.
here when i select 2 features it should display homepage,login in input field but it shows description of login in input field
output - homepage,homepage,login,login
expected output - Homepage, Login

$(".tble_submit, input[name ='product']").click(function() {
var abc = []; //move the array to here
$('.table tr input[type="checkbox"]:checked').each(function() {
var $row = $(this).closest('tr');
//used :not(:first-child) to skip first element (the checkbox td)
$('td:nth-child(2)', $row).each(function(i) {
abc.push($(this).text());
});
});
document.getElementById("features").value = abc.join(',');
});

Disable the inputs when checkbox not checked

I have this code and I want to disable all the inputs when the checkbox is not checked.
<tr class="select_tr">
<td><?= ucwords($food_name); ?></td>
<td class="form-group text-center">
<input value="<?= $order_food_id; ?>" type="checkbox" name="select_food[]" checked>
</td>
<td class="form-group">
<input value="<?= $order_food_total_members; ?>" type="text" name="total_members[]" class="form-control" placeholder="Total Members">
</td>
<td class="form-group ">
<input value="<?= $order_food_date; ?>" type="date" name="food_date" class="form-control">
</td>
<td class="form-group ">
<input value="<?= $order_food_time; ?>" type="time" name="food_time" class="form-control">
</td>
</tr>
I have used this code but it is disabling only the first input and I don't know how to taget the remaining two.
$('input[type="checkbox"]').click(function () {
if(!this.checked) {
$(this).closest('td').next('td').find('input:text').attr('disabled' , true);
} else {
$(this).closest('td').next('td').find('input:text').attr('disabled' , false);
}
});

Whatever you have done is partially correct, what you have done is you have targetted with $(this) so obviously it will take the checkbox input and will find the closest 'td' and disable only the first input tag because it is the one which is closest rather you can do this by targetting the element which has this form-control class and disable the event so it will apply to all the input field which has this class which is indirectly the other three input field.
$('input[type="checkbox"]').click(function () {
if(!this.checked) {
$('.form-control').attr('disabled' , true);
} else {
$('.form-control').attr('disabled' , false);
}
});
Or the second choice is you can use this each statement to update the input element.

You should be able to do something like this - get all of the elements and then disable. You'll have to do it onclick of the checkbox.
var inputs, index;
inputs = document.getElementsByTagName('input'); // get all of the input elements
for (index = 0; index < inputs.length; ++index) { // loop through them
inputs[index].disabled = true; // disable them
}

The issue is that you are only selecting a single element:
$(this).closest('td').next('td').find('input:text')
This will find the closest <td> ancestor element to the checkbox, then select the next sibling <td> element, and finally get the descendants of that <td> element that matches the selector input:text. This will result in a single element because only one of your inputs is of type "text", and you are only selecting inside of a single <td>.
What you want to do instead is select all of the input elements that are not checkboxes in the table row <tr> (class .select_tr):
$(this).closest('.select_tr').find('input:not([type=checkbox])')
This will select the parent <tr> with class .select_tr and then select all input children of it that do not have type=checkbox.
Example:
$('.select_tr input:checkbox').change(function() {
$(this).closest('.select_tr').find('input:not([type=checkbox])').prop("disabled", !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="select_tr">
<td>
<?= ucwords($food_name); ?>
</td>
<td class="form-group text-center">
<input value="<?= $order_food_id; ?>" type="checkbox" name="select_food[]" checked>
</td>
<td class="form-group">
<input value="<?= $order_food_total_members; ?>" type="text" name="total_members[]" class="form-control" placeholder="Total Members">
</td>
<td class="form-group ">
<input value="<?= $order_food_date; ?>" type="date" name="food_date" class="form-control">
</td>
<td class="form-group ">
<input value="<?= $order_food_time; ?>" type="time" name="food_time" class="form-control">
</td>
</tr>
</table>

Your code isn't selecting all the inputs. Use nextAll() for selecting each td after the closest('td').
$('input[type="checkbox"]').click(function(){
if(!this.checked){
$(this).closest('td').nextAll('td').find('input').attr('disabled' , true);
}else{
$(this).closest('td').nextAll('td').find('input').attr('disabled' , false);
}
});
JQuery.next() is used for selecting the first matched element after the selected element
So, your code is just affecting the first next only.
JQuery.nextAll() is used for select the next all matched elements after the selected element.
So, using nextAll() instead of next() may solve your problem.

You can try something like this:
var elemCheckbox = document.querySelectorAll('[type="checkbox"]')[0];
var elemInputs = document.querySelectorAll('.form-control');
function toggleInputs() {
// https://stackoverflow.com/questions/9887360/check-if-checkbox-is-checked-javascript#answer-9887439
var shallDisable = !elemCheckbox.checked;
// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
for (i = 0, len = elemInputs.length; i < len; ++i) {
// https://stackoverflow.com/questions/7526601/setattributedisabled-false-changes-editable-attribute-to-false#answer-7526666
elemInputs[i].disabled = shallDisable;
}
}
elemCheckbox.addEventListener("click", toggleInputs);
Find the explanation in the comments.
This example won’t disable the checkbox (if you meant it like that).
I would recommend to add an id to the checkbox. This will guarantee an explicit element selection.
You can then get like document.getElementById("<yourUniqueId>");

select2 doesn't work when add from dynamically with jquery

i have a form that the elements is dynamic. we can add a row according to the needs. Here is a image link
dynamic form
as we can see, we can add a row just press "tambah kolom" button and then the row will be attached to the form. i use jquery to adding dynamic. here is my forms code
HTML
<tr>
<td>
<input type="number" class="form-control" value="{{ old('itemujiriksa[0][jumlah_barang]') }}" name="itemujiriksa[0][jumlah_barang]">
</td>
<td>
<input type="text" class="form-control" value="{{ old('itemujiriksa[0][nama_barang]') }}" name="itemujiriksa[0][nama_barang]">
</td>
<td class="form_tabung">
<select name="itemujiriksa[0][tube_id]" class="form-control tube" style="width: 100%">
</select>
</td>
<td class="form_alat" style="display:none">
<select name="itemujiriksa[0][alat_id]" class="form-control alat" style="width: 100%">
</select>
</td>
<td>
<input type="text" class="form-control" value="{{ old('itemujiriksa[0][keluhan]') }}" name="itemujiriksa[0][keluhan]">
</td>
<td>
<input type="file" class="form-control" value="{{ old('itemujiriksa[0][fototabung][]') }}" name="itemujiriksa[0][fototabung][]" multiple />
</td>
</tr>
and here is my jquery code
jquery
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $("#input_fields_wrap"); //Fields wrapper
var add_button = $("#add_field_button"); //Add button ID
var x = {{$a}}; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
$(wrapper).append('<tr>\
<td>\
<input type="number" class="form-control" value="{{ old('jumlah_barang[]') }}" name="itemujiriksa[' + x +'][jumlah_barang]">\
</td>\
<td>\
<input type="text" class="form-control" value="{{ old('nama_barang[]') }}" name="itemujiriksa[' + x +'][nama_barang]">\
</td>\
<td class="form_tabung">\
<select name="itemujiriksa[0][tube_id]" class="form-control tube" style="width: 100%">\
</select>\
</td>\
<td class="form_alat" style="display:none">\
<select name="itemujiriksa[0][alat_id]" class="js-selectize form-control" placeholder="Pilih No Alat">\
<option disabled selected value></option>\
#foreach($alats as $at)\
<option value="{{ $at->id }}">{{ $at->no_alat }}</option>\
#endforeach\
</select>\
</td>\
<td>\
<input type="text" class="form-control" value="{{ old('keluhan[]') }}" name="itemujiriksa[' + x +'][keluhan]">\
</td>\
<td>\
<input type="file" class="form-control" value="{{ old("itemujiriksa['+ x +'][fototabung][]") }}" name="itemujiriksa[' + x +'][fototabung][]" multiple>\
</td>\
<td><a class="btn btn-danger remove_field">Hapus Kolom</a></td>\
</tr>'); //add input box
x++; //text box increment
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parents("tr").remove(); x--;
}) });
and here's my select2 code
SELECT2
$(document).ready(function() { var $select2Elm = $('.alat');
$select2Elm.select2({
width: 'resolve',
placeholder: "Pilih No Alat",
ajax: {
url: function(){
var value = $('#customer').val();
var url = "/admin/getDataAlat/ujiriksa/"+value;
console.log(url);
return url;
},
dataType: 'json',
type: "GET",
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: $.map(data, function (item) {
return {
text: item.name,
id: item.id
}
})
};
},
cache: true
},
}); });
my question is
i have defined class alat to initiate the no tabung select box for populate data from select2. but after adding a new row which is the class is same. the new select box doesnt populate data. what should i do master?

you'll need to initialize each new select element after you append the html.
$(add_button).click(function(e){
//append new table rows here
$(wrapper).append('...');
//reinitialize the new select box
$('.alat').select2({
//configuration
});
});

You can initialize after append your code.
You can see below example
$(document).on("click",".add-new-item",function(e){
var html = 'your html';
$( '.element' ).append(html);
initSelect2();});
function initSelect2() {
$('.select2_single').select2();}

the "closest()" method in jquery wont work

so i have this html code and jquery code. And when i press a tablerows "produkter" button whith the class name "fa-products", i want to find the hidden field input that is on the same tablerow as the button you choose to click(every tablerow have a hidden field input and a "produkter button"). Then i want to save the value of the hidden field in a variable thats all can anyone help me? when i "console.log(discountId);" it responds undefiend
<div class="eastSide row top-buffer col-xs-8" style="overflow:scroll; height:250px;">
<table style="width:100%">
<tr>
<th>Code</th>
<th>Aktiv</th>
<th>Skapad</th>
<th></th>
</tr>
#foreach (var discount in Model.DiscountList)
{
<tr>
<td><input name="codeTextBox" id="codeTextBox" value="#discount.Code" maxlength="18" /></td>
<td><input type="checkbox" id="activeCheckBox" name="activeCheckBox" checked="#discount.Active" /></td>
<td><input type="datetime" value="#discount.CreatedDate" readonly /></td>
<td>
<input type="button" value="Radera" class="fa fa-remove" data-url="#Url.Action("DeleteDiscountCode","Discount",new { id= discount.Id})" />
<input type="button" value="Uppdatera" class="fa fa-update" data-url="#Url.Action("UpdateDiscount","Discount")" />
<input type="button" value="Produkter" class="fa fa-products" id="#discount.Id" data-url="#Url.Action("chooseProductsForDiscountCode","Discount")" />
</td>
<td><input id="id" type="hidden" value="#discount.Id" /></td>
</tr>
}
</table>
</div>
<script>
$(".fa-products").on("click", function (e) {
var discountId = $(event.target).closest('input[type="hidden"]').val();
console.log(discountId);
});
</script>

It will not work, because the hidden input is not the parent of the registered element.
Probably this will solve your issue: $(event.target).closest('tr').find('input[type="hidden"]').val();

You need to do search for common parent element via closest and then find input inside of the result:
$(".fa-products").on("click", function (e) {
var discountId = $(event.target).closest('tr').find('input[type="hidden"]').val();
console.log(discountId);
});

Change value of select option using Js without page refresh

So I want to change the select option using javascript but without reloading the page.
I am able to change other element data using document.getElementById.value
but not the select element
This is what I am trying to do: there is a form and a table inside my webpage , the table data is fetched dynamically using php. The form will edit the data. so when the edit button is pressed the row data against it will be automatically filled into the form.
All other elements of the form could fetch the data with my code. except the select option input element.
below is the the code I have used for each element of the form
jsfiddle here:http://jsfiddle.net/ZE6BX/11/
document.getElementById("l_type").value = data[1];
data array contains the values of the row against which edit is pressed!

u can check whether using index value or option value.
var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
if(opt[i].value == 'Ve'){
**opt[i].selected = true;** }
}
this will help u.

This works http://jsfiddle.net/ZE6BX/12/
YOu had a difference in case in between VE in the table and Ve as the value in the select.
Here's the code
HTML:
<div id="l-form">
<form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
<h3>Add</h3>
<label>Name</label>
<input type="text" class="field" id="l_name" name="l_name" />
<label>City</label>
<input type="text" class="field" id="l_city" name="l_city" />
<label>Phone</label>
<input type="text" class="field" id="l_phone" name="l_phone" />
<label>OP</label>
<div class="cl"> </div>
<input type="text" class="field" id="l_op" name="l_op" />
<label>Type</label>
<select class="select_field" id="l_type" name="l_type">
<option value=" ">Select type</option>
<option value="cu">Cu</option>
<option value="Ve">Ve</option>
<option value="Ex">Ex</option>
</select>
<div class="cl"> </div>
<div class="btnp">
<input type="submit" value="Save" name="submit" id="submit" />
</div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr style:padding-left:10px;>
<td>sweet_name</td>
<td>Ve</td>
<td style="display:none">dream_city</td>
<td style="display:none">123456</td>
<td style="display:none">SWAG</td>
<td>
<button class="edit_button" value="Edit" name="button">Edit</button>
</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function () {
var data;
$("#existing").on("click", ".edit_button", function () {
data = $(this).closest("td").siblings().map(function () {
return $(this).text();
}).toArray();
console.log(data[0]); // name
console.log(data[1]); //type
console.log(data[2]); //city
console.log(data[3]); //phone
console.log(data[4]); //op
document.getElementById("l_name").value = data[0];
$("#l_type").value = data[1];
document.getElementById("l_city").value = data[2];
document.getElementById("l_phone").value = data[3];
document.getElementById("l_op").value = data[4];
});
});