I have a table like this on my MVC view
<table class="PBHEP table table-bordered">
<thead>
<tr>
<th style="text-align: center">Compute PBHEP Offsets</th>
</tr>
</thead>
<tbody>
<tr>
<th style="text-align: center">Present Conditions</th>
</tr>
</tbody>
</table>
<table class="PDHEPparams table table-bordered">
<tbody>
<tr>
<th></th>
<th>Township</th>
<th>Range</th>
<th>Section</th>
<th>Crop</th>
<th>Acres</th>
</tr>
<tr id="rowtoadd">
<td style =" text-align:center">
<input type="button" class="btn btn-small btn-primary" value="+" onclick="addrow"></td>
<td style =" text-align:center">
<input class="input-small" type="text" placeholder="Township"></td>
<td style =" text-align:center">
<input class="input-small" type="text" placeholder="Range"></td>
<td style =" text-align:center">
<input class="input-small" type="text" placeholder="Section"></td>
<td style =" text-align:center">
<select></select></td>
<td style =" text-align:center">
<input class="input-small" type="text" placeholder="Acres"></td>
</tr>
</tbody>
</table>
How do I add a new row to this table on the button click ? what should be my javascript function for the button onclick.
Here is the general idea of it.
$('.btn').on('click', function() {
var township = $('.input-small').eq(0).val();
var range = $('.input-small').eq(1).val();
var section = $('.input-small').eq(2).val();
var acres = $('.input-small').eq(3).val();
$('.PDHEPparams tbody').append("<tr><td>" + township + "</td><td>" + range + "</td><td>" + section + "</td><td>" + acres + "</td></tr>");
});
Here is a rough fiddle.
Related
I need to get current selected value from selected check box from table.Below the code i am using for get selected value from checkbox.But It is getting all the selected value from table.I need only selected table row value.
$.each($('input[type="checkbox"]:checked').closest("td").next("td"), function() {
values.push($(this).text().trim())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall-custom" onclick="selectAllCustom(this)" />SA</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr id="tr_device_id1">
<td>
<input type="checkbox" name="checkBox[]" onclick="DeviceClickedBox()">
</td>
<td id="macadd" style="word-break:break-all;">
Mac1
</td>
<td style="word-break:break-all;">
Dev 1
</td>
<td style="word-break:break-all;">
Model 1
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;"></b>
</td>
</tr>
<tr id="tr_device_id2">
<td>
<input type="checkbox" name="checkBox[]" onclick="DeviceClickedBox()">
</td>
<td id="macadd" style="word-break:break-all;">
Mac 2
</td>
<td style="word-break:break-all;">
Parm 2
</td>
<td style="word-break:break-all;">
Model 2
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;"></b>
</td>
</tr>
</tbody>
</table>
Give your TDs a class instead of ID
I do not know what you want to click, but here I do it on click of the checkbox
$(function() { // assuming jquery is loaded, execute on page load
$("#check_selectall-custom").on("click", function() {
var checked = this.checked;
$("input[type=checkbox]").not(this).prop("checked",checked);
});
$("#getval").on("click", function() {
var values = $("input[type=checkbox]:checked").not(this).map(function() {
return $(this).closest("tr").find(".macadd").text().trim();
}).get();
$("#res").html(values.join("<br/>"))
});
});
#tr_device_id1 td {
word-break: break-all
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<label><input type="checkbox" id="check_selectall-custom" />SA</label>
</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr id="tr_device_id1">
<td>
<input type="checkbox" name="checkBox[]">
</td>
<td class="macadd">
Mac 1
</td>
<td class="device">
Dev 1
</td>
<td class="model">
Model 1
</td>
<td class="Selected_Device">
</td>
</tr>
<tr id="tr_device_id2">
<td>
<input type="checkbox" name="checkBox[]">
</td>
<td class="macadd">
Mac 2
</td>
<td class="device">
Dev 2
</td>
<td class="model">
Model 2
</td>
<td class="Selected_Device">
</td>
</tr>
</tbody>
</table>
<button type="button" id="getval">Show checked</button>
<span id="res"></span>
var TotalChkBx;
$("input:checkbox").on("click", function() {
var n = $("input:checkbox").index(this);
$('#detail').append("Column 1" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(1) ").text() + '<br/>');
$('#detail').append("Column 2" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(2) ").text() + '<br/>');
$('#detail').append("Column 3" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(3) ").text() + '<br/>');
$('#detail').append("Column 4" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(4) ").text() + '<br/>');
});
function CheckAll(CheckBox) {
$('#detail').html("");
var TargetBaseControl = document.getElementById("DeviceTable"); // objRef.parentNode.parentNode.parentNode;
var TargetChildControl = "check";
//var Check_TEXT = "CHECK_CheckBox"
var Inputs = TargetBaseControl.getElementsByTagName("input");
// var Spans = TargetBaseControl.getElementsByTagName("span");
for (var n = 0; n < Inputs.length; ++n) {
if ((Inputs[n].type === 'checkbox')) //
{
Inputs[n].Checked = CheckBox.checked;
$("#" + Inputs[n].id).attr("Checked", CheckBox.checked);
$('#detail').append("Column 1" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(1) ").text() + '<br/>');
$('#detail').append("Column 2" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(2) ").text() + '<br/>');
$('#detail').append("Column 3" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(3) ").text() + '<br/>');
$('#detail').append("Column 4" + $("table#DeviceTable tbody tr:eq(" + n + ") td:eq(4) ").text() + '<br/>');
}
// else { $('#detail').html("");}
}
Counter = CheckBox.checked ? TotalChkBx : 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check1" name="checkBox" id="check_selectall-custom" onclick="CheckAll(this)" />SA</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<tr id="tr_device_id1">
<td>
<input type="checkbox" id="check2" name="checkBox">
</td>
<td id="macadd" style="word-break:break-all;">
Mac1
</td>
<td style="word-break:break-all;">
Dev 1
</td>
<td style="word-break:break-all;">
Model 1
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;"></b>
</td>
</tr>
<tr id="tr_device_id2">
<td>
<input type="checkbox" id="check3" name="checkBox">
</td>
<td id="macadd" style="word-break:break-all;">
Mac 2
</td>
<td style="word-break:break-all;">
Parm 2
</td>
<td style="word-break:break-all;">
Model 2
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;"></b>
</td>
</tr>
</tbody>
</table>
<div id="detail"></div>
I need to add the items from simpleCart to a form. I can't find any built-in functions that will do this so I'm trying to create my own script.
On the checkout page simpleCart adds the items like this:
<div class="simpleCart_items">
<table>
<thead>
<tr class="headerRow">
<th class="item-name">Name</th>
<th class="item-price">Price</th>
<th class="item-size">Size</th>
<th class="item-color">Color</th>
<th class="item-decrement"></th>
<th class="item-quantity">Qty</th>
<th class="item-increment"></th>
<th class="item-total">SubTotal</th>
<th class="item-remove"></th>
</tr>
</thead>
<tbody>
<tr class="itemRow row-0 odd" id="cartItem_SCI-1">
<td class="item-name">Deer Shirt</td>
<td class="item-price">฿400.00</td>
<td class="item-size">Small</td>
<td class="item-color">Blue</td>
<td class="item-decrement">-</td>
<td class="item-quantity">2</td>
<td class="item-increment">+</td>
<td class="item-total">฿800.00</td>
<td class="item-remove">Remove</td>
</tr>
<tr class="itemRow row-1 even" id="cartItem_SCI-2">
<td class="item-name">Deer Shirt</td>
<td class="item-price">฿400.00</td>
<td class="item-size">Medium</td>
<td class="item-color">Clay</td>
<td class="item-decrement">-</td>
<td class="item-quantity">1</td>
<td class="item-increment">+</td>
<td class="item-total">฿400.00</td>
<td class="item-remove">Remove</td>
</tr>
</tbody>
</table>
</div>
On that same checkout page I have a form where the customer adds their name, mailing address, etc. I'd like to add each item above as an input to the form like this:
<input type="hidden" name="Item 1" value="Deer Shirt">
...
It seemed using jQuery's .each would work, but it's not producing the desired result.
This is what I've got now:
simpleCart.ready(function() {
$('.itemRow').each(function(){
$('form').append('<input type="hidden" name="' + $('.itemRow').attr('id') + '" value="' + $('.item-name').text() + '">');
$('form').append('<input type="hidden" name="' + $('.itemRow').attr('id') + '" value="' + $('.item-color').text() + '">');
});
});
Expected output:
<input type="hidden" name="cartItem_SCI-1" value="Deer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="Blue">
<input type="hidden" name="cartItem_SCI-2" value="Deer Shirt">
<input type="hidden" name="cartItem_SCI-2" value="Clay">
Actual output:
<input type="hidden" name="cartItem_SCI-1" value="NameDeer ShirtDeer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="ColorBlueClay">
<input type="hidden" name="cartItem_SCI-1" value="NameDeer ShirtDeer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="ColorBlueClay">
Maybe .each isn't the best way. Any ideas on how to get the expected output?
First error is here
$('.itemRow').each(function(){
$('form').append('<input type="hidden" name="' + $(this).attr('id') + '" value="' + $(this).find('.item-name').text() + '">');
$('form').append('<input type="hidden" name="' + $(this).attr('id') + '" value="' + $(this).find('.item-color').text() + '">');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simpleCart_items">
<table>
<thead>
<tr class="headerRow">
<th class="item-name">Name</th>
<th class="item-price">Price</th>
<th class="item-size">Size</th>
<th class="item-color">Color</th>
<th class="item-decrement"></th>
<th class="item-quantity">Qty</th>
<th class="item-increment"></th>
<th class="item-total">SubTotal</th>
<th class="item-remove"></th>
</tr>
</thead>
<tbody>
<tr class="itemRow row-0 odd" id="cartItem_SCI-1">
<td class="item-name">Deer Shirt</td>
<td class="item-price">฿400.00</td>
<td class="item-size">Small</td>
<td class="item-color">Blue</td>
<td class="item-decrement">-</td>
<td class="item-quantity">2</td>
<td class="item-increment">+</td>
<td class="item-total">฿800.00</td>
<td class="item-remove">Remove</td>
</tr>
<tr class="itemRow row-1 even" id="cartItem_SCI-2">
<td class="item-name">Deer Shirt</td>
<td class="item-price">฿400.00</td>
<td class="item-size">Medium</td>
<td class="item-color">Clay</td>
<td class="item-decrement">-</td>
<td class="item-quantity">1</td>
<td class="item-increment">+</td>
<td class="item-total">฿400.00</td>
<td class="item-remove">Remove</td>
</tr>
</tbody>
</table>
</div>
<form></form>
And as for me same hidden input name for color and name is error
Pavlo's answer above is correct per the way I asked the original question but due to xDreamCoding's comment I did some digging and found that simpleCart has it's own .each operator. In the end I'm able to get what I need with this:
simpleCart.each(function( item , x ){
$('form').append('<input type="hidden" name="' + item.get('id') + ' Name" value="' + item.get('name') + '">');
$('form').append('<input type="hidden" name="' + item.get('id') + ' Color" value="' + item.get('color') + '">');
});
I am trying to create a bill calculator that requires user input of their bill type and cost (i will get on to all the calculations after).
At the minute i have got a bootstrap table which is currently 3 rows.
My question is how do i get a new row for each time the user enters their input?
I have a "Bill type field" where the user would enter the type of bill they have.
Then i have the "Amount" for the user to enter how much it will cost.
Finally i have the "Have Paid?" button where the user would click to finish the bill.
Onclick of that button, i would like a new row to be inserted.
Any help would be very much appreciated.
This is my current HTML:
<div class="container">
<h2>Bill Table</h2>
<p>Select the bill type to see how much it will cost</p>
<table class="table table-bordered table-content">
<thead>
<tr>
<th class="table-content">Bill type</th>
<th class="table-content" ">Amount (£)</th>
<th class="table-content">Is paid?</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="billType1"></td>
<td><input type="number" id="amountType1"/></td>
<td id="btnContainer1">
<button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>Mary</td>
<td><input type="number" id="Food"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>July</td>
<td><input type="number" id="Drink"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
</tbody>
</table>
Thanks!
Just to start, see following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class="container">
<h2>Bill Table</h2>
<p>Select the bill type to see how much it will cost</p>
<table class="table table-bordered table-content">
<thead>
<tr>
<th class="table-content">Bill type</th>
<th class="table-content">Amount (£)</th>
<th class="table-content">Is paid?</th>
</tr>
</thead>
<tbody id="myGrid">
<tr>
<td><input type="text" id="billType1"></td>
<td><input type="number" id="amountType1"/></td>
<td id="btnContainer1">
<button class="btn btn-sm btn-success yesBtn" id="yesPaid1">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>Mary</td>
<td><input type="number" id="Food"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
<tr>
<td>July</td>
<td><input type="number" id="Drink"/></td>
<td>
<button class="btn btn-sm btn-success yesBtn">Yes</button>
<img class="greenTickImg" src="css/greentick.png">
</td>
</tr>
</tbody>
</table>
<script>
$(".yesBtn").click(function(){
var name = $("#billType1").val();
var amount = $("#amountType1").val();
$("#myGrid").append("<tr><td>" + name + "</td><td>" + amount + "</td></tr>")
$("#billType1").val("");
$("#amountType1").val("");
});
</script>
</body>
</html>
Let assume that your button has id="havePaidButton" and your table id="billTable" and the fields have ids billType, amount and isPaid, respectively.
Your code in the jQuery should look like this:
$('#havePaidButton').off().on('click', function() {
('#billTable tr:last).after('<tr><td>' + ('#billType').val() + '</td><td>' + ('#amount').val() + '</td><td>' + $('#isPaid').val() + '</td>');
});
I am able to create dynamic textboxes on one button click but now the requirement is that we have to get values of that textboxes and send it to java class where I can use those values entered in the created dynamic textboxes but I am unable to do so.I have tried my best to solve this problem but I am stuck in getting values and sending it to action class.I have referred this link where umesh awasthi sir has answered but here it is for single value but how to get values from dynamically created and pass those and get it separately in action class.
Below is my javascript code :
<script>
function addFieldForDescription() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addDesc"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function addFieldForAmount() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables1");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addAmount"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function submitValues()
{
alert("Inside Submit");
var amountId=document.getElementById("addTables");
alert(amountId.value);
for(var i=0;i<amountId.rows.length;i++)
{
var temp=document.getElementById("addDesc"+i);
alert(temp.value);
}
}
</script>
and below is my jsp code
<html>
<head>
</head>
<body>
<table class="responstable3" id="addTable">
<tr>
<th></th>
<th style="width: 60%;">Description <input
type="button" name="add" value="+"
onclick="addFieldForDescription()" id="addDesc0"
class="btn btn-warning" /> <input type="button"
value="Submit" onclick="submitValues()"/></th>
<th data-th="Amount"><span>Amount <input
type="button" name="add" value="+"
onclick="addFieldForAmount()" id="addAmount"
class="btn btn-warning" /></span></th>
</tr>
<tr>
<td> </td>
<td id="addTables"><input type="text" id="add" size="40" /><br></td>
<td id="addTables1"><input type="text" id="addAmount"
size="40" /><br></td>
</tr>
<tr>
<td colspan="2" style="padding: 0px;">
<table class="responstable4">
<tr>
<td style="text-align: left;">Pan No. :<input
type="text" name="invoiceVar.panNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Net Amount :</td>
</tr>
<tr>
<td style="text-align: left;">Service Tax No. :<input
type="text" name="invoiceVar.serviceTaxNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Service Tax # 14.00%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">SBC # 0.50%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">Total Amount</td>
</tr>
</table>
</td>
<td style="padding: 0px;">
<div ng-app>
<table class="responstable4">
<tr>
<td><input type="text" name="invoiceVar.netAmount"
class="profarma_formtextbox2" ng-model="a" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.serviceTax"
class="profarma_formtextbox2" value="{{a*0.14}}" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.sbcTax"
class="profarma_formtextbox2" value="{{a*0.005}}" /></td>
</tr>
<tr>
<td><input type="text"
name="invoiceVar.invoiceTotalAmount"
class="profarma_formtextbox2"
value="{{a--(a*0.14)--(a*0.005)}}" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: left;">Total Amount in
Words :</td>
</tr>
</table>
</body>
</html>[![error][2]][2]
and here it is how it looks like.yellow plus button will add textboxes in description and amount column and I have to call those values in action class.
Any help would be greatly appreciated .thank you :)
I am retrieving values from database and print them in table. Now I want to get values to another div and place them in form.
I am using twitter bootstrap.
First I get values from database and print them in table
<div class="col-xs-10">
<table id="example" class="table table-bordered table-striped">
<thead>
<tr class="bg-red">
<th>Id</th>
<th>Name</th>
<th>Quality</th>
<th>Dimensions</th>
<th>COlor</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<?php
while($r=$q->fetch()){ ?>
<tr>
<td><?='Nb'. $r['Id']?> </td>
<td> <?=$r['MatVrstaNaziv']?> </td>
<td><?=$r['Quality']?></td>
<td><?=$r['Width'] . ' X '. $r['Height']?></td>
<td><?=$r['COlor']?></td>
<td> <button class="addValues" value="<?='Nb'. $r['Id']?> "> Add</button></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<div class="col-xs-2">
<div id="selection">
</div>
</div>
I have added button Add to add that row in another div. For that I am using script
<script>
$(function () {
$(".addValues").click(function () {
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
targetArea.append(myRow.children().not(myCol).text() + "<br />");
});
});
</script>
This script does not work it does not print values in specified div. I only want to print id number in another div.
Could someone give me advice what is wrong?
When you add . before addValues in selector $(".addValues") its work, see example bellow with static data.
If it still not working that mean you have problem in your PHP code, check if the query return valide result and check name of attributes like 'COlor' for example.
$(".addValues").click(function () {
$('#selection').show();
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
var rowId = $("td.data-id", myRow).text();
var qte_input = (' <input type="text" placeholder="Qte" size="5"/>');
targetArea.prepend(rowId + qte_input +"<br />");
});
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-10">
<table id="example" class="table table-bordered table-striped">
<thead>
<tr class="bg-red">
<th>Id</th>
<th>Name</th>
<th>Quality</th>
<th>Dimensions</th>
<th>COlor</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr>
<td class='data-id'> 1</td>
<td> bb</td>
<td> ccc</td>
<td> dd X '. dd</td>
<td> ee</td>
<td> <button class="addValues" value="fff"> Add</button></td>
</tr>
<tr>
<td class='data-id'>2</td>
<td> YYY</td>
<td> ccc</td>
<td> dd X '. dd</td>
<td> ee</td>
<td> <button class="addValues" value="fff"> Add</button></td>
</tr>
<tr>
<td class='data-id'>3</td>
<td> XXX</td>
<td> ccc</td>
<td> dd X '. dd</td>
<td> ee</td>
<td> <button class="addValues" value="fff"> Add</button></td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-2">
<div id="selection" style="display: none">
</br>
<button class="submitValues">Submit</button>
</div>
</div>