I need a little help creating a dynamic array of JSON object from the values of different elements. Example is elements below. I have other elements to create the values required for JSON. I didnt want to post 3 lots of same code. So belwo x3
<tr>
<td style="width: 5%"><label>Title:</label></td>
<td><input type="text" class="leds" name="title" style="width:150px"value=""></td><tr>
<td style="width: 5%"><label>Message:</label></td>
<td><input type="text" class="leds" name="message" style="width: 150px" value=""></td><tr>
<td style="width: 5%"><label>IP address:</label></td>
<td><input type="text" class="leds" name="ip_address" style="width:150px" value=""></td>
<td style="width: 5%"><label>Message Colour:</label></td>
<td><select type="text" class="leds" name="led_colour" style="width:150px">
<option value=""></option>
<option value="255,0,0,0">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</td>
</tr>
I can get the values with the following
$.each($('.leds'), function(index, obj) {
console.log(index + ':' + obj.value);
});
What I would like to do is create JSON like below:
[{
"title": "Test1",
"message": "Test1 message",
"ip_address": "1.1.1.1",
"led_colour" : "255,0,0,0"},
{
"title": "Test2",
"message": "Test2 message",
"ip_address": "2.2.2.2",
"led_colour" : "255,0,0,0"},
{
"title": "Test3",
"message": "Test3 message",
"ip_address": "3.3.3.3",
"led_colour" : "255,0,0,0"
}]
A simple way is to loop each tr and get all .leds inputs, get the name of input and it's value an build object, then put it to array. See the code bellow.
var itemsArray = [];
$.each($('tr'), function() {
var item = {};
$(this).find('.leds').each(function(index, obj) {
item[$(obj).attr("name")]=$(obj).val();
});
itemsArray.push(item);
});
I think it's solution, but better need modify your html structure
1) In your case:
function getJson(keys) {
let result = [];
$('.leds').each(function(i) {
let keyIndex = i % keys.length,
key = keys[keyIndex];
if (!keyIndex) {
result.push({});
}
let index = result.length - 1;
result[index][key] = this.value;
})
return result;
}
const jsonData = getJson(['title', 'message', 'ip_address', 'led_colour']);
console.log('jsonData:', jsonData);
2) Try use tbody for group your tr
DEMO in Codepen.io
function getJson() {
let result = [];
$('tbody').each(function() {
let item = {}
$('.leds', this).each(function() {
let $this = $(this);
item[$this.prop('name')] = $this.val();
})
result.push(item);
})
console.log('result:', result)
return result;
}
$(() => {
getJson();
$('button').click(() => {
console.clear();
const jsonData = getJson();
alert(JSON.stringify(jsonData));
})
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Get Json Data</button>
<table>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title1" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess1" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.1" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title2" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess2" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.2" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title3" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess3" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.3" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
</table>
Related
I have 2 submit buttons, one for submitting the form and the other for cancelling the submission and redirecting. When clicking the Cancel submit button, it doesn't simply cancel and go back to the processing PHP script. It requires the required fields to be filled for the cancel button to work. I don't understand what is wrong with this. Please check my code below and suggest possible solutions.
{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">
<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="button" id="cancel_button" name="submit_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.
}
});
$(function() {
$('#cancel_button').click(function() {
$("#amazon_order_adjustment").submit();
});
});
});
</script>
{/literal}
{include file="footer.tpl"}
When your cancel button is clicked you can remove required attribute from all inputs and then submit your form in this way $_POST datas for input will also get send to server .
Demo Code :
$(function() {
$('#cancel_button').click(function() {
$("input , select ").removeAttr("required") //remove required attr
$("#amazon_order_adjustment").append("<input type='hidden' name='submit_action' value='Cancel'>") //add this to know which button click
$("#amazon_order_adjustment").submit(); //submit
});
});
<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>
<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="button" id="cancel_button" name="submit_action" value="Cancel" class="button">
</div>
</form>
Use <input type="button" ...> instead that <input type="submit" ...> for cancel button
I am using Laravel and javascript + jQuery then, what I need is if I click the select option value, it will change the other form input based on (count value).
Here is my preview image :
nah if i click the value of select option in "Tipe Biaya" column, it will count jumlah column*biaya operational column then put the result in total column (in One row).
here my Html code:
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Nama Cabang</th>
<th class="text-center">Jumlah</th>
<th class="text-center">Biaya Operasional</th>
<th class="text-center">Tipe Biaya</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody class="distributionList">
#foreach($branches as $key => $fb)
<tr>
<td class="pt-3-half text-left">
{{ $fb->name }}
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="" placeholder="0" readonly>
</td>
</tr>
#endforeach
</tbody>
</table>
Here my JavaScript and jQuery
$(document).ready(function(){
var count = 0;
$(".operational_cost_type").each(function() {
$(this).change(function(){
event.preventDefault();
var var_operational_cost_type = $(this).val();
var var_each_operational_cost = $(this).closest('.each_operational_cost');
var var_total_operational_cost = $(this).find('.total_operational_cost').val();
console.log(var_each_operational_cost);
});
count++;
});
});
Thank you so much!
You can get value of jumlah and biaya column using $(this).closest("tr").find.. then simply use .val() to add result inside your total column inputs.
Demo Code :
$(document).ready(function() {
var count = 0;
//if you need on chnage of input as well(else remove that input[type=number]..)
$(document).on("change input", ".operational_cost_type , input[type=number]", function() {
event.preventDefault();
var var_operational_cost_type = $(this).val();
var selector = $(this).closest("tr")
//get product quantity
var product_quantity = selector.find('.product_quantity').val();
var total_operational_cost = selector.find('.total_operational_cost')
//get opertional cost
var each_operational_cost = selector.find('.each_operational_cost').val();
//mutliply and add total to total col
total_operational_cost.val(product_quantity * each_operational_cost)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Nama Cabang</th>
<th class="text-center">Jumlah</th>
<th class="text-center">Biaya Operasional</th>
<th class="text-center">Tipe Biaya</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody class="distributionList">
<tr>
<td class="pt-3-half text-left">
something
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
<tr>
<td class="pt-3-half text-left">
something1
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
<tr>
<td class="pt-3-half text-left">
something2
</td>
<td class="pt-3-half">
<input type="number" class="form-control product_quantity" name="product_quantity[{{$fb->id}}]" id="product_quantity" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<input type="number" class="form-control each_operational_cost" name="each_operational_cost[{{$fb->id}}]" id="each_operational_cost" value="0" placeholder="0">
</td>
<td class="pt-3-half">
<select class="form-control operational_cost_type" name="operational_cost_type" id="operational_cost_type">
<option value="pecentage">Pecentage</option>
<option value="flat">Number</option>
</select>
</td>
<td class="pt-3-half">
<input type="text" class="form-control total_operational_cost" name="total_operational_cost[{{$fb->id}}]" id="total_operational_cost" value="0" placeholder="0" readonly>
</td>
</tr>
</tbody>
</table>
If you look at my last javascript line | document.book.grandtotal.value= grandTotal. toFixed(2); |
after trying to run my code it gives me an error saying that "grandTotal.toFixed is not a function"
and if I try to remove toFixed it will work just fine. I don't know what's wrong it worked for everything except for this line
function calc()
{quan_1= document.book.quan1.value;
quan_2= document.book.quan2.value;
quan_3= document.book.quan3.value;
quan_4= document.book.quan4.value;
quan_5= document.book.quan5.value;
quan_6= document.book.quan6.value;
quan_7= document.book.quan7.value;
unit_1= document.book.unit1.value;
unit_2= document.book.unit2.value;
unit_3= document.book.unit3.value;
unit_4= document.book.unit4.value;
unit_5= document.book.unit5.value;
unit_6= document.book.unit6.value;
unit_7= document.book.unit7.value;
total_1= document.book.total1.value;
total_2= document.book.total2.value;
total_3= document.book.total3.value;
total_4= document.book.total4.value;
total_5= document.book.total5.value;
total_6= document.book.total6.value;
total_7= document.book.total7.value;
totalPrice1= (unit_1 * quan_1)
document.book.total1.value=totalPrice1 .toFixed(2);
totalPrice2= (unit_2 * quan_2)
document.book.total2.value=totalPrice2 .toFixed(2);
totalPrice3= (unit_3 * quan_3)
document.book.total3.value=totalPrice3 .toFixed(2);
totalPrice4= (unit_4 * quan_4)
document.book.total4.value=totalPrice4 .toFixed(2);
totalPrice5= (unit_5 * quan_5)
document.book.total5.value=totalPrice5 .toFixed(2);
totalPrice6= (unit_6 * quan_6)
document.book.total6.value=totalPrice6 .toFixed(2);
totalPrice7= (unit_7 * quan_7)
document.book.total7.value=totalPrice7 .toFixed(2);
subTotal_= (totalPrice1 + totalPrice2 + totalPrice3 + totalPrice4 + totalPrice5 + totalPrice6 + totalPrice7);
document.book.subTotal.value= subTotal_ .toFixed(2);
taxValue= document.book.county.value;
calcTax= (subTotal_ * taxValue).toFixed(2)
document.book.tax.value= calcTax;
if (document.book.county.value == "0")
{alert("Please select a county");}
if (subTotal_ <= 15)
{shippingCost= "5.5"}
else {shippingCost= 5.5 + (0.0450 * subTotal_)}
document.book.shipping.value= shippingCost .toFixed(2);
grandTotal = (subTotal_ + shippingCost + calcTax );
document.book.grandtotal.value= grandTotal. toFixed(2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<script src = "dynDate.js">
</script>
<script src = "beyond14.js">
</script>
<link rel = "stylesheet" href = "beyond14.css">
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("<h6>Last Modified on: "+document.lastModified+"</h6>");
</script>
<main>
<center>
<table>
<form name="book" id="book">
<tr>
<th width="180px" > Cover </th>
<th width="270px"> Title </th>
<th width="200px"> Product Type </th>
<th width="200px"> Quantity </th>
<th width="230px"> Unit Price </th>
<th width="200px"> Total Price </th>
</tr>
<tr>
<td class="align"> <img src="bk_book_woman.jpg" width="120px" height="150px" name="bookwoman" title="bookwoman"> </td>
<td class="align"><input type="text" readonly="readonly" value="The Book Woman of Troublesome Creek" size="36"> </td>
<td class="align"> <select size="1" name="type1" id="type1">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan1" id="quan1"> </td>
<td class="align"> <input type="text" readonly="readonly" value="15.50" name="unit1" id="unit1"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total1" id="total1"> </td>
</tr>
<tr>
<td class="align"> <img src="au_dispatcher.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="The Dispatcher" size="36"> </td>
<td class="align"> <select size="1" name="type2" id="type2">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan2" id="quan2"> </td>
<td class="align"> <input type="text" readonly="readonly" value="12.50" name="unit2" id="unit2"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total2" id="total2"> </td>
</tr>
<tr>
<td class="align"> <img src="dk_gaia.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="Dreams of Gaia" size="36"> </td>
<td class="align"> <select size="1" name="type3" id="type3">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan3" id="quan3"> </td>
<td class="align"> <input type="text" readonly="readonly" value="24.99" name="unit3" id="unit3"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total3" id="total3"> </td>
</tr>
<tr> <td class="align"> <img src="bk_goldenInDeath.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="Golden in Death" size="36"> </td>
<td class="align"> <select size="1" name="type4" id="type4">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan4" id="quan4"> </td>
<td class="align"> <input type="text" readonly="readonly" value="22.50" name="unit4" id="unit4"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total4" id="total4"> </td>
</tr>
<tr> <td class="align"> <img src="bk_jefferson.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="A Walk Down Historic Jefferson" size="36"> </td>
<td class="align"> <select size="1" name="type5" id="type5">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan5" id="quan5"> </td>
<td class="align"> <input type="text" readonly="readonly" value="13.50" name="unit5" id="unit5"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total5" id="total5"> </td>
</tr>
<tr>
<td class="align"> <img src="puz_millennium.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="The New Millennium" size="36"> </td>
<td class="align"> <select size="1" name="type6" id="type6">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan6" id="quan6"> </td>
<td class="align"> <input type="text" readonly="readonly" value="18.95" name="unit6" id="unit6"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total6" id="total6"> </td>
</tr>
<tr>
<td class="align"> <img src="bk_signs.jpg" width="120px" height="150px" name="" title=""> </td>
<td class="align"><input type="text" readonly="readonly" value="Signs & Symbols Sourcebook" size="36"> </td>
<td class="align"> <select size="1" name="type7" id="type7">
<option> Audio </option>
<option> Deck </option>
<option> Fiction </option>
<option> Music </option>
<option> Non-Fiction </option>
<option> Puzzle </option>
<option> Reference </option>
</select> </td>
<td class="align"> <input type="number" size="3" name="quan7" id="quan7"> </td>
<td class="align"> <input type="text" readonly="readonly" value="34.95" name="unit7" id="unit7"> </td>
<td class="align"> <input type="text" readonly="readonly" name="total7" id="total7"> </td>
</tr>
<tr> <td>TN County: <select size="1" name="county" id="county">
<option value="0"> Select your county </option>
<option value="0.0925"> Anderson </option>
<option value="0.0875"> Cannon </option>
<option value="0.0950"> Fayette </option>
<option value="0.0800"> Johnson </option>
<option value="0.0975">Williamson </option>
</select>
<td colspan="3" class="alignR"> </td>
<td class="alignR"> SubTotal: </td>
<td class="align"> <input type="text" readonly="readonly" name="subTotal" id="subTotal"> </td> </tr>
<tr>
<td colspan="4"> </td>
<td class="alignR"> S&H: </td>
<td class="align"> <input type="text" name="shipping" id="shipping" readonly="readonly" </td> </tr>
<tr>
<td colspan="4"> </td>
<td class="alignR"> Tax: </td>
<td class="align"> <input type="text" name="tax" id="tax" readonly="readonly"> </td> </tr>
<tr>
<td colspan="4"> </td>
<td class="alignR"> Grand Total: </td>
<td class="align"> <input type="text" readonly="readonly" name="grandtotal" id="grandtotal"> </td> </tr>
<tr>
<td colspan="6" class="align"> <input type="button" class="calc" value="Calculate Order" onclick="calc()"> </tr>
<tr>
<td colspan="6" class="align"> <input type="reset" class="del" value="Cancel Order"> </tr>
</center>
</form>
</main>
</html>
First thing is to remove all spaces in there, between the call of the function and the variables, i hope its just a paste format issue.
Then you have to make sure that you are calling toFixed on a numeric type value, so you can convert to number first, to make sure you are not using it on a string.
so make it like:
Number(someVariable).toFixed()
if (subTotal_ <= 15)
{shippingCost= "5.5"}
"5.5" is a string, not a number. You're trying to add it to two numbers, which changes everything into a string and then call toFixed() on that string (which works only with numbers). Change "5.5" into 5.5 !
As the comments state .toFixed() is method of a Number type and you are attempting to use it on the String type. So, converting your data to a number will solve that issue. This can most easily be done by prepending a + to the string. Here's an example:
var x = "5";
var y = "6";
console.log(x + y); // "56" because of string concatenation
console.log(+x + +y); // 11 because prepending a + converts string to number
i can clone the first and the last row but i cant clone the 2, 3, 4 and so on rows, so how can i target this rows to clone and erase them respectively.
now i have to write trash so i can post cause my whatever have too mucho code, really men come on this is not esayflow is it XD
demo
$('button[name=add]').on('click', function() {
var cloned = $('#table1 tr:last').clone(true);
$('#table1').append(cloned);
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
If clone does not work properly use "outerHTML" and append it to nearest "tbody".
as follows:
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr')[0].outerHTML;
$(this).closest('tbody').append(cloned);
});
For removing row:
$('button[name=minus]').on('click', function() {
$(this).closest('tr').remove();
});
You need to clone the tr that has the button you clicked.
In your code, you are specifying only the last row to be cloned.
So, to clone any other row, target the row containing the button that has been clicked using jQuery .closest()
$('button[name=add]').on('click', function() {
// this will select the first tr parent that contain the button
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
Use remove() function to remove your target.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest('tr').remove();
});
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
Use closest() to clone and remove closest tr.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1 tbody tr:last').after(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest("tr").remove();
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td class="count">1</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
I have a table with cells that contain inputs, textareas and selects, and I've used a function to check that the values of these are not empty, which works fine for the first row, but doesn't perform the check for each row in the table, even though I've selected the inputs via the row class they are within (example: $('tr.invoiceItems input').
Any idea how I could ensure that this passes over each row in the table and not just the first?
HTML for first row (using Handlebars templating). Automatically added on page load before others inserted:
{{#each Items}}
<tr class="invoiceItems">
<td style="display:none" class="invoiceItemId" value="{{Id}}">{{Id}}</td>
<td class="descriptionColumn" style="height: 18.5667px">
<input class="descriptionInput" style="resize:none; margin: 0" rows="1" value="{{Description}}"></input>
</td>
<td class="nominalColumn">
<select class="nominalInput">
<option value="{{NominalId}}" selected>{{NominalName}}</option>
</select>
</td>
<td class="quantityColumn">
<input type="number" class="quantityInput" value="{{Quantity}}"></input>
</td>
<td class="unitPriceColumn">
<input type="text" class="unitPriceInput alignRight" value="{{UnitPrice.BaseValue}}"></input>
</td>
<td class="subtotalColumn inputDisabled">
<input type="text" class="itemSubtotal alignRight" value="{{Subtotal.BaseValue}}" disabled></input>
</td>
<td class="taxCodeColumn" style="text-align:left; margin-left:4px; padding-left:0;">
<select class="taxCodeInput">
<option value="{{TaxCodeId}}" selected>{{TaxCodeName}}</option>
</select>
</td>
<td style="display:none">
<input class="itemTaxCodeId" value="{{TaxCodeId}}" disabled></input>
</td>
<td style="display:none" class="inputDisabled">
<input type="number" class="itemTaxRate" value="{{TaxRate}}" disabled></input>
</td>
<td class="taxValueColumn inputDisabled">
<input type="text" class="itemTaxValue inputDisabled alignRight" value="{{Tax.BaseValue}}" disabled></input>
</td>
<td class="deleteItemColumn">
<div>
<a class="deleteInvoiceItem" href="#"><span class="fa fa-times fa-lg"></span></a>
</div>
</td>
</tr>
{{/each}}
HTML for additional rows added later on click handler:
<tr class="invoiceItems">
<td class="descriptionColumn">
<input class="descriptionInput editInvoiceItemDescription" style="resize:none" placeholder="Item Description" value=""></input>
</td>
<td style="text-align:left; margin-left:10px; padding-left:0;" class="nominalColumn">
<select class="nominalInput">
<option id="defaultNominal" value="">Select Nominal</option>
</select>
</td>
<td class="quantityColumn">
<input type="number" class="quantityInput" placeholder="0" value=""></input>
</td>
<td class="unitPriceColumn">
<input type="text" class="unitPriceInput alignRight" placeholder="0.00" value=""></input>
</td>
<td class="subtotalColumn inputDisabled">
<input type="text" class="itemSubtotal inputDisabled alignRight" disabled value="0.00"></input>
</td>
<td class="taxCodeColumn" style="text-align:left; margin-left:4px; padding-left:0;">
<select class="taxCodeInput">
<option id="defaultTaxCode" value="">Select Tax Code</option>
</select>
</td>
<td style="display:none">
<input class="itemTaxCodeId inputDisabled" disabled></input>
</td>
<td style="display:none">
<input type="number" class="itemTaxRate inputDisabled" disabled></input>
</td>
<td class="taxValueColumn inputDisabled">
<input type="text" class="itemTaxValue inputDisabled alignRight" disabled value="0.00"></input>
</td>
<td class="deleteItemColumn">
<a class="deleteInvoiceItem" href="#"><span class="fa fa-times fa-lg"></span></a>
</td>
JS:
$('#saveInvoice').click(function(e) {
e.preventDefault();
var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ];
var $emptyFields = $fields.filter(function(element) {
return $.trim(element.val()) === '';
});
if (!$emptyFields.length) {
saveInvoice();
} else {
alert('Unable to save invoice. There are incomplete item fields.');
}
});
Try replacing your script with this it should work.
$('#saveInvoice').click(function(e) {
e.preventDefault();
var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ]
var $emptyFields;
for(var i=0;i< $fields.length;i++){
$emptyFields = $fields[i].filter(function(i,element) {
return $.trim($(this).val()) === '';
});
if ($emptyFields.length)
break;
}
if (!$emptyFields.length) {
saveInvoice();
} else {
alert('Unable to save invoice. There are incomplete item fields.');
}
});
Working Fiddle here: https://jsfiddle.net/20fsvkjg/