How to hide table elements using jquery and hide class of bootstrap - javascript

I use this HTML code:
<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>TTL</th>
<th class="hide" id="srv_new">new th1</th>
<th class="hide" id="Th1">new th2</th>
<th class="hide" id="Th2">new th3</th>
<th class="hide" id="Th3">new th4</th>
<th class="hide" id="Th4">new th5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="host_new" placeholder="subdomain">
</td>
<td>
<input type="numeric" name="ttl_new" value="3600">
</td>
<td>
<select name="type_new" id="type_new">
<option value="1">sample text</option>
<option value="2">sampe text</option>
<option value="3">sample text</option>
</select>
</td>
<td>
<input type="text" name="destination_new" placeholder="1.3.3.7">
</td>
<td class="hide" id="Td1">
<select class="form-control" name="srv_type" id="srv_type">
<option value="0">Minecraft</option>
</select>
</td>
<td class="hide" id="Td2">
<select class="form-control" name="srv_protocol" id="srv_protocol">
<option value="0">UDP</option>
<option value="1">TCP</option>
</select>
</td>
<td class="hide" id="Td3">
<input class="form-control" type="numeric" name="srv_priority" value="0">
</td>
<td class="hide" id="Td4">
<input class="form-control" type="numeric" name="srv_weight" value="0">
</td>
<td class="hide" id="Td5">
<input class="form-control" type="numeric" name="srv_port" placeholder="1234">
</td>
</tr>
</tbody>
As soon as the value of "type_new" == 3 I would like to show the hidden th & hidden td elements.
To use this I've already tried to use jquerys toogle function:
Here is the working sample
$( "#type_new" ).change(function () {
console.log("changed");
if (this.value == 3) {
$("#srv_new").removeClass('hide');
$('#destination_new').attr("disabled", true);
}
else{
$("#srv_new").addClass('hide');
$('#destination_new').removeAttr('disabled');
}
});
Any idea why it only makes the first TH element visible?
$("#type_new").change(function() {
console.log("changed");
if (this.value == 3) {
$("#srv_new").removeClass('hide');
$('#destination_new').attr("disabled", true);
} else {
$("#srv_new").addClass('hide');
$('#destination_new').removeAttr('disabled');
}
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Jquery library for bootstrap-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>TTL</th>
<th class="hide" id="srv_new">new th1</th>
<th class="hide" id="Th1">new th2</th>
<th class="hide" id="Th2">new th3</th>
<th class="hide" id="Th3">new th4</th>
<th class="hide" id="Th4">new th5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="host_new" placeholder="subdomain">
</td>
<td>
<input type="numeric" name="ttl_new" value="3600">
</td>
<td>
<select name="type_new" id="type_new">
<option value="1">sample text</option>
<option value="2">sampe text</option>
<option value="3">sample text</option>
</select>
</td>
<td>
<input type="text" name="destination_new" placeholder="1.3.3.7">
</td>
<td class="hide" id="Td1">
<select class="form-control" name="srv_type" id="srv_type">
<option value="0">Minecraft</option>
</select>
</td>
<td class="hide" id="Td2">
<select class="form-control" name="srv_protocol" id="srv_protocol">
<option value="0">UDP</option>
<option value="1">TCP</option>
</select>
</td>
<td class="hide" id="Td3">
<input class="form-control" type="numeric" name="srv_priority" value="0">
</td>
<td class="hide" id="Td4">
<input class="form-control" type="numeric" name="srv_weight" value="0">
</td>
<td class="hide" id="Td5">
<input class="form-control" type="numeric" name="srv_port" placeholder="1234">
</td>
</tr>
</tbody>

You are giving same id to all tds instead you should make it a class. One id should be for one element. I have made changes to your code and see below if this is what you are looking for:
<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>TTL</th>
<th class="hide srv_new">new th1</th>
<th class="hide srv_new">new th2</th>
<th class="hide srv_new">new th3</th>
<th class="hide srv_new">new th4</th>
<th class="hide srv_new">new th5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="host_new" placeholder="subdomain">
</td>
<td>
<input type="numeric" name="ttl_new" value="3600">
</td>
<td>
<select name="type_new" id="type_new">
<option value="1">sample text 1</option>
<option value="2">sampe text 2</option>
<option value="3">sample text 3</option>
</select>
</td>
<td>
<input type="text" name="destination_new" placeholder="1.3.3.7">
</td>
<td class="hide srv_new">
<select class="form-control" name="srv_type" id="srv_type">
<option value="0">Minecraft</option>
</select>
</td>
<td class="hide srv_new">
<select class="form-control" name="srv_protocol" id="srv_protocol">
<option value="0">UDP</option>
<option value="1">TCP</option>
</select>
</td>
<td class="hide srv_new">
<input class="form-control" type="numeric" name="srv_priority" value="0">
</td>
<td class="hide srv_new">
<input class="form-control" type="numeric" name="srv_weight" value="0">
</td>
<td class="hide srv_new">
<input class="form-control" type="numeric" name="srv_port" placeholder="1234">
</td>
</tr>
</tbody>
</table>
JS:
$( "#type_new" ).change(function () {
console.log("changed", this.value);
if (this.value == 3) {
$(".srv_new").removeClass('hide');
$('#destination_new').attr("disabled", true);
}
else{
$(".srv_new").addClass('hide');
$('#destination_new').removeAttr('disabled');
}
});
Demo fiddle:
https://jsfiddle.net/bxkgmwhy/1/

Ids are meant to be unique though your html document. Since you make use of ids, $('#srv_new) will only return you the first element and henc eyou see the result on only th elements
Make use of class
<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>TTL</th>
<th class="hide srv_new">new th1</th>
<th class="hide" id="Th1">new th2</th>
<th class="hide" id="Th2">new th3</th>
<th class="hide" id="Th3">new th4</th>
<th class="hide" id="Th4">new th5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="host_new" placeholder="subdomain">
</td>
<td>
<input type="numeric" name="ttl_new" value="3600">
</td>
<td>
<select name="type_new" id="type_new">
<option value="1">sample text</option>
<option value="2">sampe text</option>
<option value="3">sample text</option>
</select>
</td>
<td>
<input type="text" name="destination_new" placeholder="1.3.3.7">
</td>
<td class="hide" id="Td1">
<select class="form-control srv_new" name="srv_type" >
<option value="0">Minecraft</option>
</select>
</td>
<td class="hide" id="Td2">
<select class="form-control" name="srv_protocol" id="srv_protocol">
<option value="0">UDP</option>
<option value="1">TCP</option>
</select>
</td>
<td class="hide" id="Td3">
<input class="form-control" type="numeric" name="srv_priority" value="0">
</td>
<td class="hide" id="Td4">
<input class="form-control" type="numeric" name="srv_weight" value="0">
</td>
<td class="hide" id="Td5">
<input class="form-control" type="numeric" name="srv_port" placeholder="1234">
</td>
</tr>
</tbody>
JS
$( "#type_new" ).change(function () {
console.log("changed");
if (this.value == 3) {
$(".srv_new").removeClass('hide');
$('#destination_new').attr("disabled", true);
}
else{
$(".srv_new").addClass('hide');
$('#destination_new').removeAttr('disabled');
}
});

First add an ID to the <tr> head and remove the .hide class. This is not neccesary, but you don't need it if you use jQuery's build in .hide() and .show() functions.
<thead>
<tr id="table-head">
<th>Host</th>
<th>TTL</th>
<th id="srv_new">new th1</th>
<th id="Th1">new th2</th>
<th id="Th2">new th3</th>
<th id="Th3">new th4</th>
<th id="Th4">new th5</th>
</tr>
</thead>
Then in the jQuery function, loop through the elements in the <tr> and find elements that have the .hide class. Again, I suggest you use the default .hide() and .show() functions.
The .find() function searches for elements that match what you put into it (I believe only to the first child, but don't quote me on that). So it's going to search for every <th> that is a child of <tr id="table-head">.
Then we need to check if those <th> are visible or not, because if they already are, then don't bother. So we add the .not(":visible") which tells jQuery to look for items that are invisible (make sure this works by display: none; and make sure the element is shown as block/inline-block. visibility: none; won't affect the visibility, but you will be able to do some own google searc on that).
After that we use the .each(function(index, element) to create a loop through those elements we found, in which element is the <th> which we need to perform edits on. In the function we can then simply select that element using jQuery by doing $(element) where element is the variable passed in the function. After that we call the .show() method to show the element.
Then using the .prop("disabled", true) function we set the disabled property of the selected element. In our case the $("#destination_new).
In the else statement we do the same thing, but then the other way around. I'm sure you'll understand if you take a brief look at it.
$("#type_new").change(function() {
console.log("changed");
if(this.value == 3) {
$("#table-head").find("th").not(":visible").each(function(index, element) {
$(element).show();
});
$("#destination_new").prop("disabled", true);
} else {
$("#table-head").find("th").is(":visible").each(function(index, element) {
$(element).hide();
$("#destination_new").prop("disabled", false);
});
}
});
Remember, using jQuery's selector $("element") you only pick one element. So by telling the selector to grab something with an id, it will only grab a single element. Use the .each() function to do multiple. Good luck, hope this helped!

Related

Convert dynamic HTML tabular form to JSON

I have a simple form with dynamic number of rows, each row having the same fields.
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">
<p>1</p>
</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<!-- Dynamic rows appear here -->
</tbody>
</table>
Form is present as a table, but it's not a strict requirement, so can be flexible here.
On form submission I need this form data to be converted to JSON.
I have this function to convert form into JSON:
function convertFormToJSON(form) {
const array = $(form).serializeArray();
const json = {};
$.each(array, function () {
json[this.name] = this.value || "";
});
return json;
}
But every row overwrites previous one, so I end up having only last row data in this JSON. I realize I need to have a loop and append each new row data into final JSON, but I struggle finding the criterion for this loop. Table rows? Or better not to use table and switch to a different form presentation?
Here is a simple non-jQuery way of collecting all the input data from this form with a variable number of input elements:
document.querySelector("button").onclick=ev=>{
let res=[...document.getElementById("tbody").children].map(tr=>
Object.fromEntries([...tr.querySelectorAll("input,select")].map(el=>
[el.name,el.value])));
console.log(res);
}
input,select {width:80px;}
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">1</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R2" name="record">
<td class="row-index text-center">2</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R3" name="record">
<td class="row-index text-center">3</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
</tbody>
</table>
<button>collect data</button>

jQuery check all checkboxes in table

I have a table with a checkbox in the table head which I want to use to check/uncheck all the checkboxes in my table. This is my code, but it doesn't work.
$(document).on('change', '#select_products_checkbox', function() {
$('.form-control').toggleClass('selected');
var selectAllProductsIsChecked = $('#select_products_checkbox').prop('checked');
$('.form-control .form-control').each(function(i, v) {
$(v).prop('checked', selectAllProductsIsChecked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
if you pass your event into the change function you can just use the currentTarget checked to set your checked prop on your other checkboxes:
$(document).on('change', '#select_products_checkbox', function(e) {
$('.form-control')
.toggleClass('selected', e.currentTarget.checked)
.prop('checked', e.currentTarget.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
To do what you require you can use the closest() and find() methods to find the checkboxes in the tbody of the table related to the 'All' checkbox. Then you can use prop() to set their checked state to match. Similarly you can provide a boolean to toggleClass() to add or remove the class based on whether or not the 'All' was checked.
$(document).on('change', '#select_products_checkbox', function() {
$(this).closest('table').find('tbody :checkbox')
.prop('checked', this.checked)
.toggleClass('selected', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t} - SELECT ALL</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>

An invalid form control with name='AdjustmentBuyerPrice' is not focusable

Below is the HTML and the JavaScript being used to display the dropdown only if one of the options from the preceding dropdown is selected. When I select the one that is linked the following dropdown it works while when I select the second option not linked to the following dropdown and click submit, it throws the error "An invalid form control with name='AdjustmentBuyerPrice' is not focusable". Please point out the mistake that I did in my code.
`{include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'}
{literal}
<style type="text/css">
#loading-icon {
position: absolute;
top: 75px;
right: 250px; width:
32px; height: 32px;
display: none;
background: url('/images/lightbox/loading.gif');
}
</style>
{/literal}
{if isset($tpl_error_msg) }
<div id="message">{$tpl_error_msg}</div>
{/if}
{include file='view_order_snippet.tpl'}
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
{if !($update_shipping_info_flag)}
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
{else}
{section name=lineitems loop=$tpl_order_list}
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="{$tpl_order_list[lineitems].id}">
<input type="hidden" name="vendor_id_array[]" value="{$tpl_order_list[lineitems].vendor_fk}">
</td>
<td>{$tpl_order_list[lineitems].sku}
<td>{$tpl_order_list[lineitems].item_description}</td>
<td>{$tpl_order_list[lineitems].quantity}</td>
<td>{$tpl_order_list[lineitems].item_status}</td>
<td>{$tpl_order_list[lineitems].shipping_mode}</td>
{if $tpl_order_list[lineitems].shipping_tracking_no == ""}
<td>N/A</td>
{else}
<td>{$tpl_order_list[lineitems].shipping_tracking_no}</td>
{/if}
</tr>
{/section}
{/if}
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
{html_options options=$tpl_action_type}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
{html_options options=$tpl_adjustment_reason}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
{html_options options=$tpl_adjustment_type}
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice" required>
<option value="">Select Adjustment Buyer Price Type</option>
{html_options options=$tpl_adjustment_buyer_price}
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="submit" id="cancel_button" name="cancel_action" value="Cancel" class="button">
</div>
</div>
</form>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function () {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
}
});
});
</script>
{/literal}
{include file="footer.tpl"}
This is happening because you have AdjustmentBuyerPrice as required so when you have not selected value ItemPriceAdjustments its hidden and when you click on submit button that error shows .Instead you can remove required attribute when that select box is hidden else add required attribute .
Demo Code :
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function() {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="1">
<input type="hidden" name="vendor_id_array[]" value="2">
</td>
<td>A
<td>B</td>
<td>5</td>
<td>ok</td>
<td>htm</td>
<td>N/A</td>
</tr>
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
<option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
<option value="ItemPriceAdjustments1">5</option>
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<!--remove required from here-->
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
<option value="">A</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
</form>

Bootstrap table row disappearing

I am trying to add and delete rows when the buttons are clicked. Everything is working properly, but, whenever I scale the window to a small size, to check the mobile responsiveness, the rows are disappearing.
I am new to Bootstrap i am not sure whether I have done any mistakes.
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('#addrow').click(function() {
//Add row
table.append('<tr scope="row"><td ><select id="ex1" required ><option value="">Iphone</option><option value="">IPod</option><option value="">Galaxy Tab</option> <option value="">PocoPhone</option> </select> </td> <td > <input id="ex2" type="number"> </td> <td ><input id="ex3" type="number"> </td> <td > <input id="ex4" type="number"> </td> <td > <button class="btnDelete btn-outline-success" id="delrow" >Delete</button> </td> </tr> ');
})
$("#myTable").on('click', '.btnDelete', function() {
$(this).closest('tr').remove();
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<table class="table table-striped" data-toggle="table" data-pagination="true" data-mobile-responsive="true" id="myTable">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">QTY</th>
<th scope="col">Price</th>
<th scope="col">Total</th>
<th scope="col">Option</th>
</tr>
</thead>
<tbody>
<tr scope="row">
<td>
<select id="ex1" required>
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td>
<input id="ex2" type="number">
</td>
<td>
<input id="ex3" type="number">
</td>
<td>
<input id="ex4" type="number">
</td>
<td>
<button class="btn btn-outline-success" id="addrow" class="addnew"> Add </button>
</td>
</tr>
</tbody>
</table>
This Code work Perfectly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="table-responsive">
<table class="table ">
<thead>
<th>Product</th>
<th>QTY</th>
<th>Cost</th>
<th>Price</th>
<th>Total</th>
<th>Option</th>
</thead>
<tbody>
<tr>
<td>
<select id="ex1" required>
<option value="">Iphone</option>
<option value="">IPod</option>
<option value="">Galaxy Tab</option>
<option value="">PocoPhone</option>
</select>
</td>
<td><input class="form-control" id="ex2" type="number" ></td>
<td><input class="form-control" id="ex3" type="number"></td>
<td>
<select class="form-control">
<option>Monthly</option>
<option>Yearly</option>
</select>
</td>
<td><input class="form-control" id="ex2" type="number" ></td>
<td><button class="btn btn-outline-success" id="addrow" class="addnew"> Add </button></td>
</tr>
</tbody>
</table>
</div>
</form>

Calculate load based on value return 0 or NaN

User will enter three values quantity, load, duration and then click on total button to show the multiplication in the watt hour textbox. But I always ended up getting a 0 or NaN.I tried with input type="number" but always getting the same result. Here is the code:
$(document).ready(function() {
var quantityval = parseInt($("#quantity").text(), 10);
var wattsval = $("#wattage option:selected").val();
var duration = parseInt($("#duration_use").text(), 10);
$("#total").click(function() {
var totalval = (quantityval * wattsval) * duration;
$("#watt-hour").val(totalval);
console.log($("#watt_hour").val(totalval));
});
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>
Multiple issues here,
use val instead of text
directly take the value of select instead of its option
Put the fetch of values in the click event
use watt_hour instead of watt-hour while setting value.
Make it
var quantityval = +$("#quantity").val();
var wattsval = +$("#wattage").val();
var duration = +$("#duration_use").val();
Note
parseInt is fine, I am simply putting unary + for keeping it short.
Demo
$(document).ready(function() {
$("#total").click(function() {
var quantityval = +$("#quantity").val();
var wattsval = +$("#wattage").val();
var duration = +$("#duration_use").val();
console.log(quantityval, wattsval, duration);
var totalval = (quantityval * wattsval) * duration;
console.log(quantityval, wattsval, duration, totalval);
$("#watt_hour").val(totalval);
console.log($("#watt_hour").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>
Replace .text() with .val() and retrive all the values inside the click event handle
$(document).ready(function() {
$("#total").click(function() {
var quantityval = parseInt($("#quantity").val(), 10);
var wattsval = $("#wattage option:selected").val();
var duration = parseInt($("#duration_use").val(), 10);
var totalval = (quantityval * wattsval) * duration;
console.log(totalval)
$("#watt_hour").val(totalval);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>

Categories