Add array to Object - javascript

I have a collection of inputs
<input type="text" name="item" id="item" value="Name">
<input type="number" name="unit_price" id="unit_price" value="100">
<input type="number" name="qty" id="qty" value="2">
<input type="number" name="discount" id="discount" value="0">
<input type="text" name="item" id="item" value="Name 2">
<input type="number" name="unit_price" id="unit_price" value="200">
<input type="number" name="qty" id="qty" value="5">
<input type="number" name="discount" id="discount" value="10">
I'm trying to loop through all of these inputs to create an object with keys exactly the same as names in my inputs and add those values as values.
So my steps are:
let arr = []
inputs.forEach((elem) => {
console.log(elem.value)
arr.push({
'item': elem.value,
'unit_price': elem.value,
'qty': elem.value,
'discount': elem.value
});
})
EDITED
the expected output should look like this:
arr = [{
'item': 'Name',
'unit_price': '100',
'qty': '2',
'discount': '0',
},
{
'item': 'Name 2',
'unit_price': '200',
'qty': '5',
'discount': '10'
}
]


You can iterate over the input elements in chunks of 4.
let inputs = document.querySelectorAll('input');
let res = [];
let names = ['item', 'unit_price', 'qty', 'discount'];
for (let i = 0; i < inputs.length; i += names.length)
res.push(names.reduce((acc, curr, j) => (acc[curr] = inputs[i + j].value, acc), {}));
console.log(res);
<input type="text" name="item" id="item" value="Name">
<input type="number" name="unit_price" id="unit_price" value="100">
<input type="number" name="qty" id="qty" value="2">
<input type="number" name="discount" id="discount" value="0">
<input type="text" name="item" id="item" value="Name 2">
<input type="number" name="unit_price" id="unit_price" value="200">
<input type="number" name="qty" id="qty" value="5">
<input type="number" name="discount" id="discount" value="10">


Well, maybe you can wrap your inputs inside divs, and then find each block of values and map the values into two objects. Like:
<div id="first">
<input type="text" name="item" id="item" value="Name">
<input type="number" name="unit_price" id="unit_price" value="100">
<input type="number" name="qty" id="qty" value="2">
<input type="number" name="discount" id="discount" value="0">
</div>
<div id="second">
<input type="text" name="item" id="item" value="Name 2">
<input type="number" name="unit_price" id="unit_price" value="200">
<input type="number" name="qty" id="qty" value="5">
<input type="number" name="discount" id="discount" value="10">
</div>
And in JS
const first = {}
const second = {}
document.querySelectorAll('input').forEach( input => {
if (input.parentElement.id === 'first') {
first[input.name] = input.value;
} else {
second[input.name] = input.value;
}
});
console.log(first, second);


If you want two separate objects, you can add a class to the inputs to group them like so.
<input class="item1" type="text" name="item" id="item" value="Name">
<input class="item1" type="number" name="unit_price" id="unit_price" value="100">
<input class="item1" type="number" name="qty" id="qty" value="2">
<input class="item1" type="number" name="discount" id="discount" value="0">
<input class="item2" type="text" name="item" id="item2" value="Name 2">
<input class="item2" type="number" name="unit_price" id="unit_price2" value="200">
<input class="item2" type="number" name="qty" id="qty2" value="5">
<input class="item2" type="number" name="discount" id="discount2" value="10">
Then, for the javascript, because you are wanting to turn an array of items into a single object, this is a good candidate to use a reduce!
function aggrigateInputs(className) {
const elements = document.getElementsByClassName(className)
return elements.reduce((acc, elem) => {
acc[elem.name] = elem.value;
return acc;
}, {})
}
const item1 = aggrigateInputs('item1');
const item2 = aggrigateInputs('item2');
console.log(item1, item2);

Related

Summing up Input Groups using JQuery

I'm new in JavaScript and JQuery
I have some input group of Items with 3 parameters which are Price, Discount, and Quantity.
I'd like to sum it up first before submitting it to see how much the total is.
so far here's what I got:
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<button type="button" onClick="Total()"></button>
In my mind I could use a loop such as :
total = 0;
for(i = 0; i < count(price); i++){
total += price[i] * qty[i] * dsc[i] / 100;
}
also, what if I delete a group, will the array index changes?

Use jQuery.map to convert Objects to array of values
function Total() {
let total = 0;
//Convert to array of values
let price = $("input[name='price[]']").map((i, el) => $(el).val());
let qty = $("input[name='qty[]']").map((i, el) => $(el).val());
let dsc = $("input[name='dsc[]']").map((i, el) => $(el).val());
//I prefer each over for
$.each(price, (i, element) => {
total += price[i] * qty[i] * dsc[i] / 100;
//if 'dsc' is discount in % may be the formula is different:
//example : price = 100 quantity = 1;dsc = 20; => grossRowTotal = 100 * 1 = 100; total = 100 - (100*20/100) = 100 - 20 = 80;
//let grossRowTotal = price[i] * qty[i];
//total += grossRowTotal - (grossRowTotal * dsc[i]/ 100);
});
console.log(total);
$("#result").html(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">
<button type="button" onClick="Total()">Total</button>
<div id="result"></div>

I don't know what exactly result you want.
this code may help you . try it and edit as per your requirement.
function Total()
{
let total=0;
for(i=0;i<$("input[id=price]").length;i++)
{
let p=$("input[id=price]")[i].value;
let q=$("input[id=qty]")[i].value;
let d=$("input[id=dsc]")[i].value;
total+=(p*q)-d;
}
$("#total").val(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<button type="button" onClick="Total()">Total</button>
<input type="number" id="total" placeholder="total">

How to reset checkbox values after user clicks new dropdown select option

I have a select box with a few dropdown options. Under each option there will be a checklist and total (each checklist item has a value). I need to accomplish this using pure javascript.
My problem is I don't know how to make each checklist specific to its dropdown item, and to reset the checkbox values after a user clicks a new dropdown option. I've tried calling the totalIt function in the display function but I can't get it to work.
Fiddle
My HTML is:
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
CSS:
.hide {
display: none;
}
JS:
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
// Select box show/hide div
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementsByName("total")[0].value = total + "%";
}

Try to use the selected box children property. So that only those elements under the box would be updated. You are almost there I just had to tweak the code just a little.
HTML:
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()" name="percentage1"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
JS:
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
let selectedBox = "";
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
selectedBox = box;
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt() {
let total = 0;
if(selectedBox.children.proPercent1.checked) total = total + parseInt(selectedBox.children.proPercent1.value)
if(selectedBox.children.proPercent2.checked) total = total + parseInt(selectedBox.children.proPercent2.value)
selectedBox.children.total.value = `${total} %`;
}
Hopefully this helps

Hi,
I get solution to your problem...
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
// Select box show/hide div
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt(Group) {
let input = document.querySelectorAll(`.${Group} [name=product]`),
total = 0,
totalInput = document.querySelector(`.${Group} [name=total]`)
input.forEach(input => {
if(input.checked) total += parseFloat(input.value);
totalInput.value = total + "%"
})
}
.hide {
display: none;
}
.box {
margin-top:30px;
}
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('A')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('A')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('B')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('B')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('C')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('C')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
I Convert for loop to forEach array loop
I Change the selector from getElementsByNames to querySelector and querySelectorAll
I Add argument to the function represent the Group
I Noticed that you add class for each Group represent Name
I Use this to make input selector and totalInput selector dedicated for each group... Like document.querySelectorAll(.a [name=product])
Finally I call function and type name group in html

To uncheck a checkbox you set the element.checked value to false, (more here Check/Uncheck checkbox with JavaScript)
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
function display (value) {
allCheckboxes.forEach(element => element.checked = false);
// your code
...
}

How to call selected radio button's input ID?

I have multiple inputs with their ID in the radio button group and range slider. I want the addition of all multiplication of checked radio buttons and range sliders. But I don't get checked radio button's input type text value. Below something I tried but it's the wrong code.
$(document).ready(function() {
$('.range').on('change', function() {
let total = 0;
let multiplyFactor = document.getElementById(`actualtime${inputIndex}`).value;
console.log(multiplyFactor);
$('.range').each(function() {
total += (parseFloat($(this).val()) * multiplyFactor);
});
$('#timetoproduce').text(total);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="starter"><input type="radio" id="" class="radio-roi"name="plan" value="starter" checked>
<input type="text" value="2" id="actualtime1" class="hiden-actual-time" disabled></label><br>
<label for="plus"><input type="radio" id="" class="radio-roi"name="plan" value="plus" >
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled></label><br>
<label for="pro"><input type="radio" id="" class="radio-roi"name="plan" value="pro" >
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled></label><br>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1"><br>
<span id="timetoproduce" value=""></span>

You could do with :checked and next to find the input value
$(document).ready(function() {
$('.range').on('change', function() {
let n = $(this).attr('id').match(/\d+/g)[0];
let total = 0;
let checkVal = $('.radio-roi:checked').next('input').val();
let multiplyFactor = parseFloat(checkVal);
console.log(multiplyFactor)
$('.range').each(function() {
total += (parseFloat($(this).val()) * multiplyFactor);
});
$('#timetoproduce').text(total);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="" class="radio-roi" name="plan" value="starter" checked>
<input type="text" value="2" id="actualtime1" class="hiden-actual-time" disabled><br>
<input type="radio" id="" class="radio-roi" name="plan" value="plus">
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>
<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1"><br>
<span id="timetoproduce" value=""></span>

Select last input with a value greater than zero jquery

I have a form with a bunch of inputs set with value zero like
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">
The user then types in quantities of products they want. I want to select the last input where they entered a quantity. I was able to do something similar with checkboxes like this.
$('.product-checkbox:checkbox:checked:last')
But how can I put in a condition for an input box to select the last input with value greater than zero? Thanks.

You could use :not() and the Attribute Selector [attribute]
:not([value='0'])
JavaScript example
let qtyGT0 = [...document.querySelectorAll(".qty:not([value='0'])")].reverse()[0];
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
Another JavaScript example
in pure JavaScript ES6 it would look like
let qtyGT0 = [...document.querySelectorAll(".qty")].filter( el => el.value > 0 ).pop();
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
jQuery:
var $qtyGT0 = $(".qty").filter((i, el) => el.value > 0 ).last();
// Just to test
$qtyGT0.addClass("red");
.red{ background:red; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
http://api.jquery.com/filter/
https://api.jquery.com/last/

A pure JavaScript answer is that you would just iterate them in reverse and stop at the first one you find.
var inputs = document.querySelectorAll("input");
for(var len = inputs.length-1; len >=0; len--){
if(inputs[len].value > 0){
console.log(inputs[len].name);
inputs[len].style.backgroundColor = "yellow";
break;
}
}
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="1">
<input type="text" name="qty2" size="4" autocomplete="off" class="form-control quantity_wanted text" value="2">
<input type="text" name="qty3" size="4" autocomplete="off" class="form-control quantity_wanted text" value="3">
<input type="text" name="qty4" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">

Getting form values in dynamic table using jquery

I want to get the input form values that are in a table to use in jquery to parse on another page. Since the table is dynamic I need to be able to adjust on the fly. Here's a table example:
<table class="table table-striped table-bordered"><thead>
</thead>
<tbody>
<tr data-key="49"><td><input type="text" class="pull-right form-control" name="" value="Kansas City Chiefs" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Denver Broncos"></td><td><input type="text" class="form-control" name="" value="3" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="41" maxlength="3" style="width:60px"></td><td>2015-09-18 00:25:00 <input type="text" class="form-control" name="" value="2015-09-18 00:25:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="50"><td><input type="text" class="pull-right form-control" name="" value="Carolina Panthers" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Houston Texans"></td><td><input type="text" class="form-control" name="" value="3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="40" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="51"><td><input type="text" class="pull-right form-control" name="" value="New Orleans Saints" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-10" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Tampa Bay Buccaneers"></td><td><input type="text" class="form-control" name="" value="10" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="47" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="52"><td><input type="text" class="pull-right form-control" name="" value="Pittsburgh Steelers" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="San Francisco 49ers"></td><td><input type="text" class="form-control" name="" value="6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="45" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="53"><td><input type="text" class="pull-right form-control" name="" value="Minnesota Vikings" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Detroit Lions"></td><td><input type="text" class="form-control" name="" value="3" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="43" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="54"><td><input type="text" class="pull-right form-control" name="" value="Buffalo Bills" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="1" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="New England Patriots"></td><td><input type="text" class="form-control" name="" value="-1" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="45" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="55"><td><input type="text" class="pull-right form-control" name="" value="Chicago Bears" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="2" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Arizona Cardinals"></td><td><input type="text" class="form-control" name="" value="-2" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="45" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="56"><td><input type="text" class="pull-right form-control" name="" value="Cleveland Browns" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="1" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Tennessee Titans"></td><td><input type="text" class="form-control" name="" value="-1" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="41" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="57"><td><input type="text" class="pull-right form-control" name="" value="Cincinnati Bengals" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="San Diego Chargers"></td><td><input type="text" class="form-control" name="" value="3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="46" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="58"><td><input type="text" class="pull-right form-control" name="" value="Washington Redskins" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="St. Louis Rams"></td><td><input type="text" class="form-control" name="" value="-3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="41" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="59"><td><input type="text" class="pull-right form-control" name="" value="New York Giants" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-2.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Atlanta Falcons"></td><td><input type="text" class="form-control" name="" value="2.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="51" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="60"><td><input type="text" class="pull-right form-control" name="" value="Oakland Raiders" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Baltimore Ravens"></td><td><input type="text" class="form-control" name="" value="-6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="43" maxlength="3" style="width:60px"></td><td>2015-09-20 20:05:00 <input type="text" class="form-control" name="" value="2015-09-20 20:05:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="61"><td><input type="text" class="pull-right form-control" name="" value="Jacksonville Jaguars" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Miami Dolphins"></td><td><input type="text" class="form-control" name="" value="-6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="41" maxlength="3" style="width:60px"></td><td>2015-09-20 20:05:00 <input type="text" class="form-control" name="" value="2015-09-20 20:05:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="62"><td><input type="text" class="pull-right form-control" name="" value="Philadelphia Eagles" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Dallas Cowboys"></td><td><input type="text" class="form-control" name="" value="5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="55" maxlength="3" style="width:60px"></td><td>2015-09-20 20:25:00 <input type="text" class="form-control" name="" value="2015-09-20 20:25:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="63"><td><input type="text" class="pull-right form-control" name="" value="Green Bay Packers" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Seattle Seahawks"></td><td><input type="text" class="form-control" name="" value="3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="49" maxlength="3" style="width:60px"></td><td>2015-09-21 00:30:00 <input type="text" class="form-control" name="" value="2015-09-21 00:30:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="64"><td><input type="text" class="pull-right form-control" name="" value="Indianapolis Colts" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-7" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="New York Jets"></td><td><input type="text" class="form-control" name="" value="7" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="47" maxlength="3" style="width:60px"></td><td>2015-09-22 00:30:00 <input type="text" class="form-control" name="" value="2015-09-22 00:30:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
</tbody></table>
I use the following below in jquery to grab the whole table since its constantly changing. On another page i parse the values of the form inputs in each table field.
$("<input>", { name: "table", value: $("#table").html() }).appendTo(form);
The problem with this is when I parse this way it parses only the original form input values. A user can change the value, but it will still take the original values. Now I did some experimenting using .val() on single form input values instead of using .html() and i can get the desired response. But these form inputs are generated dynamically. How can I do this efficiently
the whole javascript
$(document).ready(function() {
$("#nfl .deleteLink").on("click",function() {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(400, function(){
tr.remove();
});
return false;
});
$('.c-box').change(function () {
var td = $(this).closest('td');
var total = $(this).siblings(":text");
if($(this).prop("checked")) {
$(this).attr('checked', true);
$(this).attr('value', 1);
total.fadeToggle("slow", "linear" );
} else {
total.fadeToggle("slow", "linear" );
$(this).attr('value', 0);
}
return false;
});
$('#refreshButton').click(function() {
location.reload();
});
var tableData = $('tr[data-key]').map(function(){
var $row= $(this), key = $row.data('key'),
values= $row.find(':input').map(function(){
return this.value;
}).get();
return {
key : key,
values : values
};
}).get();
$('#download').on('click', function(e) {
e.preventDefault();
var csrfToken = $('meta[name="csrf-token"]').attr("content");
var form = $("<form>", { action: "print", method: "POST", target: "_blank" });
$("<input>", { name: "logo", value: $("#logo").html() }).appendTo(form);
$("<input>", { name: "header", value: $("#header").html() }).appendTo(form);
$("<input>", { name: "title", value: $("#title").val() }).appendTo(form);
$("<input>", { name: "table", value: $("#table").html() }).appendTo(form);
$("<input>", { name: "rules", value: $("#rules").html() }).appendTo(form);
$("<input>", { name: "payone", value: $("#payone").val() }).appendTo(form);
$("<input>", { name: "paytwo", value: $("#paytwo").val() }).appendTo(form);
$("<input>", { name: "paythree", value: $("#paythree").val() }).appendTo(form);
$("<input>", { name: "payfour", value: $("#payfour").val() }).appendTo(form);
$("<input>", { name: "payfive", value: $("#payfive").val() }).appendTo(form);
$("<input>", { name: "paysix", value: $("#paysix").val() }).appendTo(form);
$("<input>", { name: "payseven", value: $("#payseven").val() }).appendTo(form);
$("<input>", { name: "payeight", value: $("#payeight").val() }).appendTo(form);
$("<input>", { name: "bayone", value: $("#bayone").val() }).appendTo(form);
$("<input>", { name: "baytwo", value: $("#baytwo").val() }).appendTo(form);
$("<input>", { name: "baythree", value: $("#baythree").val() }).appendTo(form);
$("<input>", { name: "bayfour", value: $("#bayfour").val() }).appendTo(form);
$("<input>", { name: "bayfive", value: $("#bayfive").val() }).appendTo(form);
$("<input>", { name: "baysix", value: $("#baysix").val() }).appendTo(form);
$("<input>", { name: "bayseven", value: $("#bayseven").val() }).appendTo(form);
$("<input>", { name: "bayeight", value: $("#bayeight").val() }).appendTo(form);
$("<input>", { name: "csrf", value: csrfToken }).appendTo(form);
form.submit();
});
});

Following will map each row to an array of objects that looks like:
[
{
key: 56, // value of "data-key"
values: ["Kansas City Chiefs", "-3", "Denver Broncos", "3", "41", "2015-09-18 00:25:00"]
},
.......// other row objects
]
JS
var tableData = $('tr[data-key]').map(function(){
var $row= $(this), key = $row.data('key'),
values= $row.find(':input').map(function(){
return this.value;
}).get();
return {
key : key,
values : values
};
}).get();
Iterating this array should make it very easy to reproduce table on another page
DEMO

Categories