We Keep Coding

Select Items not showing after form appends

The Select Items in my code below works if I havent added a new row yet.
The items are fetched from a db using php mysql.
How Can I still make the select options in the children elements work like the parent element cloned. The select button works like its disabled in the children element
I want the children element to also have the room to select items
<script type="text/javascript">
function create_tr(table_id) {
let table_body = document.getElementById(table_id),
first_tr = table_body.firstElementChild
tr_clone = first_tr.cloneNode(true);
table_body.append(tr_clone);
clean_first_tr(table_body.firstElementChild);
}
function clean_first_tr(firstTr) {
let children = firstTr.children;
children = Array.isArray(children) ? children : Object.values(children);
children.forEach(x => {
if (x !== firstTr.lastElementChild) {
x.firstElementChild.value = '';
}
});
}
function remove_tr(This) {
if (This.closest('tbody').childElementCount == 1) {
alert("First Row Can't Be Deleted");
} else {
This.closest('tr').remove();
}
}
</script>
<div class="col-xl-8 col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Add Device Information</h3>
</div>
<div class="card-body">
<form id="" method="POST" autocomplete="off" novalidate="novalidate">
<table class="table border text-nowrap text-md-nowrap table-striped mb-0">
<thead>
<tr>
<th>Device Model</th>
<th>Serial No</th>
<th>
<button type="button" id="add" class=" btn text-success" onclick="create_tr('table_body')">
<i class="fe fe-plus-circle" id="add" style="font-size:1.6em;"></i>
</button>
</th>
</tr>
</thead>
<tbody class="field_wrapper" id="table_body">
<tr>
<td>
<select class="form-control form-select select2" data-bs-placeholder="Select" name="model[]" required="" id="model"> <?php
$readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
$displayAll1 = mysqli_query($conn,$readALL1);
while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
$modelName = $rowFetchAll1['modelName'];
$modelid = $rowFetchAll1['modelID'];
?> <option value="
<?=$modelid?>"> <?=$modelName?> </option> <?php } ?> </select>
</td>
<td>
<input type="" name="" class="form-control" placeholder="Serial No...">
<input type="text" name="addedBy[]" class="form-control" id="addedBy" value="
<?=$_SESSION['user_uniq_id']?>" hidden="">
<input type="text" name="client[]" class="form-control" value="
<?=$clientID?>" id="client" hidden="">
<input type="text" name="deviceID[]" class="form-control" value="
<?=time()?>" id="deviceID" hidden="">
</td>
<td>
<button type="button" id="add" class=" btn text-danger" onclick="remove_tr(this)">
<i class="fe fe-minus-circle" id="add" style="font-size:1.6em;"></i>
</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>

As per the comment I made above, you have duplicate IDs so whenever you use document.getElementByID you are going to have issues if attempting to call an element that has it's ID duplicated.
Fo the delete buttons to work you can either assign the event handler explicitly when you make the clone of the entire table row or the preferred method is to use a delegated event handler that intercepts click events to the common parent ( the table is easy ) and then reacts accordingly. The following HTML is a modified version of the above - all IDs have been removed, some replaced with dataset attributes. The select menu simply has a basic statically written few options to illustrate the case.
// No element in the HTML now has an ID so there will be no duplicate IDs. To identify
// DOM elements a more useful set of selectors (querySelector & querySelectorAll) are
// very useful. The `event` can be used to begin DOM traversal to find elements of
// interest rather than rely upon a static ID or crudely constructed dynamic IDs, usually
// involving numbers.
document.querySelector('button[data-name="add"]').addEventListener('click', e => {
// from the event.target, find the parent table row and from that the table-body
let tbody = e.target.closest('table').querySelector('tbody');
// clone the first row from table-body and do some manipulations
let clone=tbody.firstElementChild.cloneNode(true);
clone.querySelector('button[data-name="del"]').hidden=false;
clone.querySelectorAll('input, select').forEach(n=>{
n.value='';
});
// add the new row - no IDS anywhere.
tbody.appendChild(clone);
});
// Delegated Event Listener. This is bound to the table and monitors `click` events
// but processes only those events originating from the specified elements (button & i)
// - newly added elements are not registered in the DOM when the page loads initially
// which is why a delegated listener is used.
document.querySelector('form table#dyntbl').addEventListener('click', e => {
e.stopPropagation();
// only process clicks from either a button with dataset.name='del' or it's child i
if (e.target != e.currentTarget && (e.target.dataset.name == 'del' || e.target.parentNode.dataset.name == 'del')) {
// identify the table-body as before
let tbody = e.target.closest('table').querySelector('tbody');
// remove table row unless it is the 1st one otherwise things break.
if( tbody.childNodes.length > 3 ) tbody.removeChild(e.target.closest('tr') )
}
});
<div class='col-xl-8 col-md-12'>
<div class='card'>
<div class='card-header'>
<h3 class='card-title'>Add Device Information</h3>
</div>
<div class='card-body'>
<form method='POST' autocomplete='off' novalidate='novalidate'>
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th>Device Model</th>
<th>Serial No</th>
<th>
<button type='button' data-name='add' class=' btn text-success'>
<i class='fe fe-plus-circle' data-id='add' style='font-size:1.6em;'>#Add#</i>
</button>
</th>
</tr>
</thead>
<tbody class='field_wrapper'>
<tr>
<td>
<select class='form-control form-select select2' data-bs-placeholder='Select' name='model[]' required>
<option>A
<option>B
<option>C
</select>
</td>
<td>
<input type='text' name='serial[]' class='form-control' placeholder='Serial No...' />
<input type='text' name='addedBy[]' class='form-control' hidden />
<input type='text' name='client[]' class='form-control' hidden />
<input type='text' name='deviceID[]' class='form-control' hidden />
</td>
<td>
<button type='button' data-name='del' class='btn text-danger' hidden>
<i class='fe fe-minus-circle' style='font-size:1.6em;'>#Delete#</i>
</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>

Updating my database with the changed elements in a table

I'm making an address book of a company's tech support contacts and the admin gets access to all addresses in a form of a table. In this table, he can add, delete and make changes to data in the same page.
I have set up the add and delete functions successfully, but I struggle a lot with the edit. I'm using node, express, mongodb and vanilla javascript.
I'm still a newbie in web developement and there is are words I may use wrong, so sorry in advance!
(Excuse my french, but most of the words mean the same in english.)
My HTML
<div>
<input id="edit" type="button" value="Editer" onclick="return edit()">
<input id="valider" type="hidden" value="Valider" onclick="return valider()">
</div>
<table id='myTable'>
<thead>
<tr class="header">
<th>Nom de l'entreprise</th>
<th>Téléphone 1</th>
<th>Téléphone 2</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<% companies.forEach(function(company){ %> //I loop through my db
<tr class="compName">
<td hidden id='_id' > <%= company._id %> </td>
<td> <input id="name" class="readonly" type="text" value=" <%= company.name %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone" class="readonly" type="text" value=" <%= company.phone %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone2" class="readonly" type="text" value=" <%= company.phone2 %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="mail" class="readonly" type="text" value=" <%= company.mail %>" readonly style="border: none" onblur="change(this)"> </td>
</tr>
<% }) %>
</tbody>
</table>
My Script
<script>
function edit() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'hidden'; //get the edit button and hide it
var valider = document.getElementById('valider').type = 'button'; //then unhide the validate button so I can use it
for (var i = 0; i < editComp.length; i++) { //remove the readonly for each td so I can edit it
editComp[i].removeAttribute('readonly');
editComp[i].setAttribute("style", "border: 1px solid red;");
};
}
function valider() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'button'; //unhide the edit button
var valider = document.getElementById('valider').type = 'hidden' //hide my validate button
for (var i = 0; i < editComp.length; i++) { //put back the readonly for each td so its uneditable
editComp[i].setAttribute('readonly', true);
editComp[i].setAttribute("style", "border: none;");
};
}
function change(element) { //when the input gets unfocused, I assume that's because changes happened
var setChanged = element.setAttribute("class", "readonly changed"); //I mark all changed element
/*I want to udapte my database with the changed elements
I was thing of getting the hidden company._id and the id of the changed element so I can update them specifically*/
}
</script>
So I was think of getting the col[0] of the changed row, which is the _id of my changed element, so I can target it for updating in my database, but I don't know how I should do it.
Thanks!

Table TH not displaying correctly after onchange evernt fires

So I'm trying to hide the Company Name <th> column when the employee drop down is selected.
I have this jQuery function that I've been trying to figure out for sometime now and cant seem to get it working. I've tried to walk though script with FF debugger but nothing happens, with no errors. Im kind of lost on where to take it from here.
DropDown
#using (Html.BeginForm())
{
#Html.DropDownList("SearchStatus", new SelectList(ViewBag.SearchStatusList, "Value", "Text", ViewBag.SelectedItem), new { #class = "form-control", #onchange = "form.submit();" })
}
jQuery
<script type="text/javascript">
$("#SearchStatus").on("change", function () {
if ($("#SearchStatus option:selected").val() == 0) {
$("#hidden_div").hide();
} else {
$("#hidden_div").show();
}
});
VIEW
#model PagedList.IPagedList<Login.Models.EditProfile>
#using PagedList.Mvc;
#{
ViewBag.Title = "Pending Accounts";
}
<link href="~/Content/PagedList.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<style>
... deleted CSS that was here
</style>
<h2>Pending Accounts</h2>
#using (Html.BeginForm())
{
#Html.DropDownList("SearchStatus", new SelectList(ViewBag.SearchStatusList, "Value", "Text", ViewBag.SelectedItem), new { #class = "form-control", #onchange = "form.submit();" })
}
<br />
<table class="table grid">
<tr>
<th>
<b>Options</b>
</th>
<th>
First Name:
</th>
<th>
Last Name:
</th>
<th>
Email:
</th>
<th>
Phone Number:
</th>
<th id="hidden_div" style="display: none;">
Company Name:
</th>
<th></th>
</tr>
#foreach (var item in Model.ToList())
{
<tr>
<td>
<div class="btn-group">
<button type="button" id="bootstrap-ok" class="btn btn-default btn-sm icon-success">
<span class="glyphicon glyphicon-ok "></span>
</button>
<button type="button" id="bootstrap-danger" class="btn btn-default btn-sm icon-danger">
<span class="glyphicon glyphicon-remove "></span>
</button>
</div>
</td>
<td>
#Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.EmailAddress)
</td>
<td>
#Html.DisplayFor(modelItem => item.PhoneNumber)
</td>
#if (item.CompanyName != null)
{
<td>
#Html.DisplayFor(ModelItem => item.CompanyName)
</td>
}
</tr>
}
</table>
<br />
Page #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("PendingAccounts", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("Logout", "User", FormMethod.Post, new { id = "logoutForm" }))
{
Logout
}
}
<script type="text/javascript">
$("#SearchStatus").on("change", function () {
if ($("#SearchStatus option:selected").val() == 0) {
$("#hidden_div").hide();
} else {
$("#hidden_div").show();
}
});

you can get the value of the dropdown by using $(yourDropdown).val() and not selecting the options. So try this:
$("#SearchStatus").on("change", function () {
if ($("#SearchStatus").val() == 0) {
$("#hidden_div").hide();
} else {
$("#hidden_div").show();
}
});

Change all the dropdown option' s value when the checkbox is checked

I'm wondering when i check the checkbox (Select all), can all the dropdowns be forced to select "Y"
if it's unchecked, all the dropdowns will be forced to select "N"
Many thanks.
var check = $('#check');
check.onclick(function(){
$('.option') = "Y";
})
<table id="table">
<th>
select all <input type="checkbox" id="check">
</th>
<tr>
<td>
<select class="option status">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="option status">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
Orginally i have a table that show the total amount needs to be paid and payment in arrears
$(document).ready(function() {
$("#table").on('input', '.txtCal, .status', function() {
calculate();
});
function calculate() {
var calculated_total_sum = 0;
var to_be_paid = 0;
$("#table tr").each(function() {
var get_textbox_value = $('.txtCal', this).val();
var get_payment_status = $('.status', this).val();
if (get_textbox_value && get_payment_status) {
if ($.isNumeric(get_textbox_value)) {
calculated_total_sum += parseFloat(get_textbox_value);
}
if (get_payment_status === 'N') {
to_be_paid += parseFloat(get_textbox_value);
}
}
});
$(".total_sum_value").html(calculated_total_sum);
$(".arrears").html(to_be_paid);
}
calculate();
});
HTML
<div class="col-lg-6 result">
<div class="input-group">
<p>
<span class="input-group-addon">Total Payment</span>
<span class="input-group-addon">$HKD</span>
<span class="input-group-addon total_sum_value"></span></p>
<br><br><br>
<p>
<span class="input-group-addon">In Arrears</span>
<span class="input-group-addon">$HKD</span>
<span class="input-group-addon arrears"></span></p>
</div>
Each table row will have a select dropdown that consists of two option "Y" and "N". Originally, i have to manually change its table row option, and the payment in arrears will change accordingly.
For example, if the dropdown is "Y" which means paid, the amount of payment in arrears will decrease automatically.
Now after adding the select all function, to force all dropdowns to select "Y",for some reason the calculate function fail to work.
Any ideas

Add a common class to all the select and value to the option. Trigger a function on checking the checkbox which will select all Y option.Use jquery 'prop' method to add the property
function selectAll(elem) {
if ($(elem).prop('checked')) {
$('.selOptions option[value=Y]').prop('selected', true);
} else {
$('.selOptions option[value=N]').prop('selected', true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>
select all <input type="checkbox" onchange="selectAll(this)">
</th>
<tr>
<td>
<select class="selOptions">
<option value = "Y">Y</option>
<option value = "N">N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="selOptions">
<option value = "Y">Y</option>
<option value = "N">N</option>
</select>
</td>
</tr>
</table>

Using vainilla JS
<table>
<th>
select all <input id="selectAll" type="checkbox" />
</th>
<tr>
<td>
<select>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
</table>
<script>
var selectAll = document.getElementById('selectAll');
var options = document.getElementsByTagName('select');
selectAll.addEventListener( 'change', function() {
if(this.checked) {
for(var i=0; i < options.length; i++) {
options[i].selectedIndex = 0;
}
}
});
</script>

First determine when the checkbox is checked or not.
$('#check').on('change', function() { if ($(this).is(':checked')) {...
Then you could use a selector based on an option's text content (you don't have a value attribute which you should but it's still functional.)
$('option:contains(Y)')...
Then use .prop() method to programmatically change it's selected state.
.prop('selected', true);
Demo
$('#check').on('change', function() {
if ($(this).is(':checked')) {
$('option:contains(Y)').prop('selected', true);
} else {
$('option:contains(N)').prop('selected', true);
}
});
<table>
<th>
select all <input type="checkbox" id="check">
</th>
<tr>
<td>
<select class="option">
<option>--</option>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="option">
<option>--</option>
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to disable button click if value inputed is less than Minimum bid amount?

I would like to be able to disable button click if the value entered in the text box below named "bidamt" is less then the Minimum Bid value below in the table. How do I go about doing this? I am trying to do this in JavaScript but it doesnt seem to pull the Minimum Bid value. Any help would be greatly appreciated.
#model IList<NucorPrototypes_V1.ViewModel.AuctionPage>
#{
ViewBag.Title = "MyBids";
}
<!doctype html>
<html>
<head>
<title>Auction </title>
<script type="text/javascript">
function checkBids(el) {
var bidInput = el.value
var MinBid = confirmbids.MinBid.value
if (el.value <= MinBid) {
document.getElementById("Bid").disabled = true;
}
else {
document.getElementById("Bid").disabled = false;
}
}
function RemoveBid(rb) {
if (typeof (rb) == "object") {
$(rb).closest("tr").remove();
}
}
</script>
#*<script type="text/javascript">
$('#bidamt').bind('keyup', function () {
if (Filled()) $('#btnSubmit').removeAttr('disabled');
});
function Filled() {
var filled = true;
$('body input').each(function () {
if ($(this).val() == '0') filled = false;
});
return filled;
}
*#
#*<script type="text/javascript">
//Validates that textbox value entered is a number or a number with a decimal
function checkDec(el) {
var typedBid = el.value
var min = confirmbids.MinBid.value
if (el.value <= confirmbids.MinBid.value) {
//alert("Invalid Bid Amount. Please enter a correct bid amount.");
document.getElementByName("Bid").disabled = true;
}
else {
document.getElementById("message").innerHTML = 'Your Bid is ' + el.value;
document.getElementByName("Bid").disabled = false;
}
}
*#
<body>
<div id="header" style="background-color: #008751">
<h1 style="margin-bottom: 0; color: #FFFFFF">Secondary Coil Auction</h1>
</div>
<br />
<div id="content">
<center>
<h4>In order to confirm bid you must enter a Bid Amount or Remove Bid before clicking Confirm.</h4>
#*Table that populates with bids the user selects. Here they can place a bid and remove a bid.*#
<form method="post" id="confirmbids" action="PlaceBid">
<table id="myTable1" border="2" style="background-color: #B0B0B0" cellpadding="10" class="table">
<tr>
<th>Bid Amount per 100 Weight</th>
<th>Remove Bid</th>
<th>Serial Number</th>
<th>Minimum Bid</th>
<th>Current High Bid</th>
<th>Grade</th>
<th>Heat Number</th>
<th>Gauge</th>
<th>Width</th>
<th>Weight</th>
<th>Defect 1</th>
<th>Defect 2</th>
<th>Defect 3</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type="text" #*pattern="[0-9]+([\.|,][0-9]+)?" step="0.01"*# name="bidamt" onkeyup="checkDec(this);" id="bidamt" />
</td>
<td>
<input type="button" value="Remove Bid" id="removeme" onclick="RemoveBid(this);"/>
</td>
<td>
<input type="text" style="background-color: #B0B0B0" readonly="true" name="coilID" value="#item.Coil_ID" />
</td>
<td>
<input type="text" style="background-color: #B0B0B0" readonly="true" name="MinBid" value="#item.Auc_MinBid" />
#*#Html.DisplayFor(modelItem => item.Auc_MinBid)*#
</td>
<td>
#Html.DisplayFor(modelItem => item.HighBid)
</td>
<td>
#Html.DisplayFor(modelItem => item.Coil_Grade)
</td>
<td>
#Html.DisplayFor(modelItem => item.Coil_HeatNo)
</td>
<td>
#Html.DisplayFor(modelItem => item.Coil_Gauge)
</td>
<td>
#Html.DisplayFor(modelItem => item.Coil_Width)
</td>
<td>
#Html.DisplayFor(modelItem => item.Coil_Weight, new { #id = "CoilWeight" })
</td>
<td>
#Html.DisplayFor(modelItem => item.Coil_Defect1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Coil_Defect2)
</td>
<td>
#Html.DisplayFor(modelItem => item.Coil_Defect3)
</td>
</tr>
}
</table>
<center><input type="submit" name="Bid" id="Bid" onclick="checkBids(this)" value="Confirm Bids" />
</form>
<br />
</center>
</div>
<center>
<div class="well">
<div id="message"></div>
</div>
</center>
<br />
<br />
`

With jquery you can try this:
To use jquery you just embed
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
on the head tag of your html file. And put this on your click event.
$("#Bid").attr('disabled','disabled');
like this:
$("#Bid").click(function(){
if(something true){
$(this).attr('disabled','disabled');
}
});

You put your bidamt textbox in foreach loop and you set id="bidamt". So the problem is you can not set the same id many element, id is unique. The second problem is you called checkBids function on click event of button, so you can not get value of the button.