get length of input array field in html form using javascript - javascript

I need the array length
html code
<form action="#" method="POST" name="form1">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr id="profile_1_">
<td>Geethu</td>
<td>2017-05-10 06:20:35</td>
<td><button type="button" class="btn btn-danger btn-xs remove-profile" id="1">Remove</button></td>
<td><input type="hidden" name="candidate[1]"></td>
</tr>
<tr id="profile_2_">
<td>John</td>
<td>2017-05-10 09:04:12</td>
<td><button type="button" class="btn btn-danger btn-xs remove-profile" id="2">Remove</button></td>
<td><input type="hidden" name="candidate[2]"></td>
</tr>
</tbody>
</table>
</form>
I want to get the count of candidate array each time i remove a table row.
javascript code
<script type="text/javascript">
$(".remove-profile").click(function(){
alert($('input[name="candidate[]"]').length);
var id = $(this).attr('id');
$('#profile_'+id).remove();
getTotal();
});
function getTotal(){
var count = $('input[name="candidate[]"]').length;
var total = count * 10 ;
$('input[name=total]').val(total);
}
</script>
but I'am getting count as 0 always.

Firstly add a class to your table tbody say .profile-tbody
<tbody class="profile-tbody">
#foreach($data as $key => $item)
...
#endforeach
</tbody>
Next add the following jQuery code
$(".profile-tbody").on( "click", ".remove-profile", function() {
$('.profile-tbody tr').length;
});
Since you're removing elements dynamically, you need to use the event delegation approach to attach an event handler to the element. A simple .click(function would not work.
Assuming the number of <tr>(rows) are the number of items($item) in your array
Also please remove the $('input[name="candidate[]"]').length you have added, you are just checking the length of a input field(textbox) which is not even present & hence it will always return 0.

Related

Read cell Contents Dynamic JS/Jquery table

I am using JS/Jquery to dynamically add rows to by Table. Here is a template that I found online:
<table id="tblCustomers" cellpadding="0" cellspacing="0" border="1">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtCountry" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
From what I gather, in order to ensure that the actual cell content values get passed on Post I need to assign them to hidden fields.
How do I read the actual contents of the cells.
I tried:
$("#submitForm").click(function(){
alert("submit Clicked");
$('#tblCustomers tfoot td').each(function() {
var cellText = $(this).html();
});
});
however, All I got was this as return value:
Can you let me know what I need to do to get actual value of cell.
I need to make a dynamic table/item list and i would like to send the list of items back to server for processing. Sort of like a purchase list etc..
BTW: the backend is Django 2.0
Thanks for your help.
Tanmay

How to find the row number in which button is clicked in jquery?

I have a table in which there is a button in the last column called issue. In each row, when I click the button I want it to call an ajax function that gets a certain value from the server. The value from the server will vary based on the row chosen. The current code I have is as follows
var $dntb = $("#dntb");
$dntb.on("focusin", function() {
var i //have to get the row where the button is clicked
$("#iss" + i).click(function(event) {
var sditmId = $("#sditm").val();
var sdhedId = $("#sdhed").val();
$.get('getstock', {
sditmId: sditmId,
sdhedId: sdhedId
}, function(response) {
$("#stk").val(response);
});
});
});
Please tell me how to find the value of 'i' in the above code, if this is wrong please tell me the correct method
The table is given below
<table class="table table-bordered table-striped table-hover" id="dntb">
<thead>
<th><strong>Sales Order Number</strong></th>
<th><strong>Reference Order</strong></th>
<th><strong>Order Item</strong></th>
<th><strong>Quantity</strong></th>
<th><strong>Transport Time</strong></th>
<th><strong>Mode of Shipment</strong></th>
<th><strong>Delivery Date</strong></th>
<th><strong>Actions</strong></th>
</thead>
<jsp:useBean id="gen" scope="request" class="Common.General"/>
<tbody>
<c:set var="i" value="0"/>
<c:forEach items="${dlv.allDeliveryDetails}" var="row">
<tr>
<td>${row.sdhedIdDn}</td>
<td>${row.sdhedDn}</td>
<td>${row.sditmDn} - ${row.prdDn}</td>
<td>${row.qtyDn}</td>
<td>${row.trntmDn}</td>
<td>${row.mshDn}</td>
<td>${row.datDn}</td>
<td>
<button type="button" class="btn btn-default btn-sm btn-primary" data-toggle="modal" data-target="#myModal" onclick="setData('${row.sdconDn}', '${row.sdhedIdDn}', '${row.sditmDn}', '${row.sdconIdDn}')" id="iss">
<span class="glyphicon glyphicon-download"></span> Issue
</button>
</td>
</tr>
<c:set var="i" value="${i+1}"/>
</c:forEach>
</tbody>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</table>
This might help u mate .. :)
Note:Jquery version >=1.7
$('body').on('click', 'button', function(event) {
var rowindex = $(this).closest('tr').index();
console.debug('Index', rowindex);
});
FYI
index()
Add a class to the button in table row and bind the button as shown below:-
$(".btnClass").click(function() {
$(this).closest("tr");
// anything you want to do
return false;
});
try this.. ( use class instead id because id is unique )
$('table').on('click','button',function(){
$( this ).closest('tr').find('.field1').val('bind value for field one.!');
$( this ).closest('tr').find('.field2').val('bind value for field two.!');
});
u can also use
$('.button').click(function(){
$( this ).closest('tr').find('.field1').val('bind value for field one.!');
$( this ).closest('tr').find('.field2').val('bind value for field two.!');
});
but click method won't work if your DOM inserted After Loading Page.
SEE DEMO

How to set value in dynamically added rows form using jquery?

I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.
Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}

How to get the count of checked rows of a table on a button click using jQuery?

I'm working with Asp .net MVC3 following is my table,
<table id="myIndiaTable">
<thead>
<tr>
<th>Select All<input type="checkbox" class="chkhead" onchange="Getchecked()"/></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>1</td>
<td>xxx</td>
</tr>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>2</td>
<td>yyytd>
</tr>
<tr>
<td><input type="checkbox" class="chkdata"/></td>
<td>3</td>
<td>zzz</td>
</tr>
</tbody>
</table>
<div class="btn">
<input type="button" name = "Submit" value ="Submit" onclick ="GetValues()"/>
</div>
When I click the submit button I have to get the count of selected rows count as an alert. How can I get this using jQuery?
USe :checked for getting the checked checkboxes,
$( ".chkdata:checked" ).length;
pure javascript
thi line ckbox = document.getElementsByClassName("chkdata"); will get all the element with class name chkdata return an array of element and then we loop through those element to check how many element are checked .if it is checked then we increment the counter otherwise continue to loop
ckbox = document.getElementsByClassName("chkdata");
count=0;
for(var i=0;i<ckbox.length;i++){
element = ckbox[i];
if(element.checked){
count++;
}
}
alert("Number : " + count);
You can get all the checked checkboxes with class chkdata inside the table myIndiaTable
function GetValues(){
alert($('#myIndiaTable .chkdata:checked').length)
}
to get only the checked checkboxs in the table use
$('#myIndiaTable').find("input[type='checkbox']:checked").length

how to get the id when a certain button is clicked using jquery

How can I get the id of tbody's input when #moveToAnTable is clicked using jQuery? Thanks.
<table id="yearSectionAdd2Table">
<thead>
<tr id="columnHeader">
<th>
<div>
<input id="moveToAnTable" type="button" value="<<">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center>
<input id="moveToAnTableOne" type="button" value="<<">
</center>
</td>
</tr>
</tbody>
</table>
Use jQuery.closest to get the table of the button.
After that search for the input.
jQuery.attr will return the attribute of the first element in the match:
$("#moveToAnTable").click(function(){
var id = $(this).closest("table").find("tbody input").attr("id");
alert(id);
});
See the fiddle:
http://jsfiddle.net/URGVp/
You can also write it like this with the on method, and test out your results in a console window if that better suits you, rather than constant pop-ups.
$('#moveToAnTable').on("click",function(){
var mvalue = $(this).closest('table').find('tbody input').attr('id');
console.log('my value is: ' + mvalue);
});

Categories