I try do build a dynamic table, this table should replace a fix table.
<table cellpadding="3" cellspacing="0" border="1">
<tr>
<th>Aufgabe</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>Summe</th>
<th>Note</th>
</tr>
<tr>
<td> </td>
<td><input type="text" id="punkte0" name="punkte0" value="{$punkte.0}" size="3" onKeyUp="aktualisieren('punkte0','punkte1')" /></td>
<td><input type="text" id="punkte1" name="punkte1" value="{$punkte.1}" size="3" onKeyUp="aktualisieren('punkte1','punkte2')" /></td>
<td><input type="text" id="punkte2" name="punkte2" value="{$punkte.2}" size="3" onKeyUp="aktualisieren('punkte2','punkte3')" /></td>
<td><input type="text" id="punkte3" name="punkte3" value="{$punkte.3}" size="3" onKeyUp="aktualisieren('punkte3','punkte4')" /></td>
<td><input type="text" id="punkte4" name="punkte4" value="{$punkte.4}" size="3" onKeyUp="aktualisieren('punkte4','punkte5')" /></td>
<td><input type="text" id="punkte5" name="punkte5" value="{$punkte.5}" size="3" onKeyUp="aktualisieren('punkte5','punkte6')" /></td>
<td id="tds1">0</td>
<td></td>
</tr>
<tr>
<td>Gesamt</td>
<td colspan="6"></td>
<td id="summe">0</td>
<td id="note">{$student.note/10}</td>
</tr>
</table>
But the columns should be user-dependent, so I wrote a function in my PHP code, which save the value (number between 4 an 7) in my database. It is called in the database klausuraufgaben.
I tried this to replace the columns:
$iQuantity = (integer)$_POST['klausuraufgaben'];
$aTableHeads = [];
$aTableContents = [];
for ( $x=0; $x<$iQuantity; $x++ ) {
$aTableHeads[] = '<th>' . ($x + 1) . '</th>';
$aTableContents[] = '<td><input type="text" id="punkte' . (string)$x . '" name="punkte' . (string)$x . '" value="{$punkte.' . (string)$x . '}" size="3" onKeyUp="aktualisieren('punkte. (string)$x . '",'punkte. (string)$x+1 . '"></td>';
But it doesn't work. Can someone see what is wrong?
This is the Error, which I get:
[in kartei.tpl line 254]: syntax error: unrecognized tag: $aTableHeads[] = '' . ($x + 1) . ''; $aTableContents[] = '
thanks, i edit the code for the template in this way:
{php}
$iQuantity = (integer)$_POST['klausur_aufgaben'];
$aTableHeads = [];
$aTableContents = [];
{for $x=0 to $iQuantity;}
// {for( $x=0; $x<$iQuantity; $x++ )
$aTableHeads[] = '<th>' . ($x + 1) . '</th>';
$aTableContents[] = '<td><input type="text" id="punkte' . (string)$x . '" name="punkte' . (string)$x . '" value="{$punkte.' . (string)$x . '}" size="3" onKeyUp="aktualisieren('punkte. (string)$x . '",'punkte. (string)$x+1 . '"></td>';
{/for}
{/php}
I'm not smarty expert, but lets have a crack at this.
{php}
$iQuantity = (integer)$_POST['klausur_aufgaben'];
{/php}
<tr>
{for $x=0 to $iQuantity}
<th>{$x + 1}</th>
{/for}
</tr>
{for $x=0 to $iQuantity}
<td><input type="text" id="punkte{$x}" name="punkte{$x}" value="NotSureHere this needs to come from another array?" size="3" onKeyUp="aktualisieren('punkte{$x}','punkte{$x+1}')"/></td>
{/for}
Related
I have text field inside the table, and also the data below in it..I want to display the data to text field after clicking the row.
I tried these code but nothing happens. Help me please.
These are the code for the table.
<table id="tableqwe">
<tr>
<th>Name</th>
<th>Id Number</th>
<th>Course</th>
<th>Year level</th>
<th>School Year</th>
<th>Semester</th>
<th></th>
</tr>
<tr>
<th><input type="Text" id="name1" name="name1" style="width:200px;"></th>
<th><input type="Text" id="idnumber2" name="idnumber2" style="width:200px;"></th>
<th><input type="Text" id="course3" name="course3" style="width:80px;"></th>
<th><input type="Text" id="yearlvl4" name="yearlvl4" style="width:200px;"></th>
<th><input type="Text" id="schoolyear5" name="schoolyear5" style="width:150px;"></th>
<th><input type="Text" id="semester6" name="semester6" style="width:100px;"></th>
<th><input type="button" value="Add" class="btntable edit" style="width:50px;"></th>
</tr>
<?php
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['Id_number'] . "</td>";
echo "<td>" . $row['course'] . "</td>";
echo "<td>" . $row['year_level'] . "</td>";
echo "<td>" . $row['school_year'] . "</td>";
echo "<td>" . $row['semester'] . "</td>";
echo "<td>"?><input type="button" class="btntable delete" value="Delete" style="width:50px;"><?php
echo "</tr>";
}
?>
</table>
And these are the javascript code...
<script>
var table1 = document.getElementById('tableqwe');
for(var i = 2; i < table1.rows.length; i++)
{
table.rows[i].onclick = function()
{
rIndex = this.rowIndex;
console.log(rIndex);
document.getElementsByName("name1").value = this.cells[0].innerHTML;
document.getElementsByName("idnumber2").value = this.cells[1].innerHTML;
document.getElementsByName("course3").value = this.cells[2].innerHTML;
document.getElementsByName("yearlvl4").value = this.cells[3].innerHTML;
document.getElementsByName("schoolyear5").value = this.cells[4].innerHTML;
document.getElementsByName("semester6").value = this.cells[5].innerHTML;
}
}
</script>
Can someone help me with this.! All I want is if I click any row of the table, it will directly display it to the text field.
You should use HTML DOM getElementById() Method to get the element with the specified ID.
HTML DOM getElementsByName() Method Get all elements with the specified name.
You have to edit your js script as follows.
If you are using 'HTML DOM getElementsByName() Method' to assign value to that specific element you should use it as document.getElementsByName("name1")[0].value="value". Since this method returns the collection of objects having the same name passed as it's parameter.
If you are using the HTML DOM getElementById() you can assign values into it by using the code as document.getElementById("idofelement").value="value".
An example is given in the snippet below.
var table1 = document.getElementById('tableqwe');
for(var i = 2; i < table1.rows.length; i++)
{
table1.rows[i].onclick = function()
{
rIndex = this.rowIndex;
console.log(this.cells[0].innerHTML);
document.getElementById("name1").value = this.cells[0].innerHTML;
console.log(document.getElementsByName("name1")[0].value);
document.getElementById("idnumber2").value = this.cells[1].innerHTML;
document.getElementById("course3").value = this.cells[2].innerHTML;
document.getElementById("yearlvl4").value = this.cells[3].innerHTML;
document.getElementById("schoolyear5").value = this.cells[4].innerHTML;
document.getElementById("semester6").value = this.cells[5].innerHTML;
}
}
<table id="tableqwe">
<tr>
<th>Name</th>
<th>Id Number</th>
<th>Course</th>
<th>Year level</th>
<th>School Year</th>
<th>Semester</th>
<th></th>
</tr>
<tr>
<th><input type="Text" id="name1" name="name1" style="width:200px;"></th>
<th><input type="Text" id="idnumber2" name="idnumber2" style="width:200px;"></th>
<th><input type="Text" id="course3" name="course3" style="width:80px;"></th>
<th><input type="Text" id="yearlvl4" name="yearlvl4" style="width:200px;"></th>
<th><input type="Text" id="schoolyear5" name="schoolyear5" style="width:150px;"></th>
<th><input type="Text" id="semester6" name="semester6" style="width:100px;"></th>
<th><input type="button" value="Add" class="btntable edit" style="width:50px;"></th>
</tr>
<tr>
<td>name</td>
<td>12</td>
<td>Course</td>
<td>Course 12</td>
<td>School year 12</td>
<td>School year 12</td>
<td><input type="button" class="btntable delete" value="Delete" style="width:50px;"></tr>;
</table>
Change the code like this.
<?php
while($row = mysqli_fetch_array($result)) {
echo "<tr contenteditable = 'true' id='name' data-name= '//php variable like $id '>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>"?><input type="button" class="btntable delete" value="Delete" style="width:50px;"><?php
echo "</tr>";
}
?>
then change your javascript to like this (Im coding it Jquery and change it you want.)
<Script>
$(document).on('click', '#button Id or Class here', function(){
//get id of user updates
var id = $(this).data("name");
// get values
var val = $(this).text();
});
</script>
this the solution. if is this help for your leave a comment.
<script>
function removeAllRowsContainingCheckedCheckbox() {
alert("hello");
for (var rowi= table.rows.length; rowi-->0;) {
var row= table.rows[rowi];
var inputs= row.getElementsByTagName('input');
for (var inputi= inputs.length; inputi-->0;) {
//alert("inside for");
var input= inputs[inputi];
if (input.type==='checkbox' && input.checked) {
//alert("indide if ")
row.parentNode.removeChild(row);
break;
}
}
}
}
</script>
<html>
<head>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr>
<td>c</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>hadoop</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>core java</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>Javascript</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>springs</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="submit" name="sub"></td>
</tr>
<input type='button' value='del' onclick='removeAllRowsContainingCheckedCheckbox();'>Click me to delete
</table>
</form>
<?php
if(isset($_POST['sub']))
{
$db = pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=ndem$123");
if(!$db){
echo "Error : Unable to open database\n";
} else {
echo "Opened database successfully\n";
}
$checkbox1=$_POST['techno'];
$chk="";
foreach($checkbox1 as $chk1)
{
$chk .= $chk1."";
echo '<script>alert("Inserted Successfully")</script>';
}
$in_ch=pg_query("insert into news_table(technology) values ('$chk')");
echo "the check box value is " . $in_ch;
if($in_ch==1)
{
echo '<script>alert("Inserted Successfully")</script>';
echo "Records created successfully\n";
}
else
{
echo pg_last_error($db);
}
pg_close($db);
}
?>
</body>
</html>
For the submit can i able to write javascript function with out using
$checkbox1=$_POST['techno'];
$chk="";
foreach($checkbox1 as $chk1)
{
$chk .= $chk1."";
echo '<script>alert("Inserted Successfully")</script>';
}
above code because if(isset($_POST['sub'])) is reloading the already submitted checkboxs in the table so user may confuse after delete the page will again show all the check box those who are submitted also .. Please suggest alternatives for this any ways i want to insert the checked checkboxes into database but my thought is to delete the checked submitted also in the table.
I'm using braintree to process payments for a website that I'm creating. The api requires that I generate a payment method nonce via javascript in order to process the payment. I'm able to generate the nonce on form submit and place it in the input field however, the value is not being posted.
The jquery:
$( document ).ready(function() {
$('#checkout').on("submit", function() {
var client = new braintree.api.Client({clientToken: "<?php echo $clientToken ?>"});
client.tokenizeCard({
number: $('#number').val(),
cardholderName: $('#first_name').val() + ' ' + $('#last_name').val(),
expirationMonth: $('#expiration_month').val(),
expirationYear: $('#expiration_year').val(),
cvv: $('#cvv').val(),
}, function (err, nonce) {
$("#checkout input[name=nonce]").val(nonce);
$('#checkout input[name=random]').val('randomtext');
});
});
});
The php:
<?php
echo $_POST['first_name'];
echo '<br/>';
echo $_POST['last_name'];
echo '<br/>';
echo $_POST['phone_number'];
echo '<br/>';
echo $_POST['expiration_month'];
echo '<br/>';
echo $_POST['expiration_year'];
echo '<br/>';
echo $_POST['nonce'];
echo '<br/>';
echo $_POST['random'];
echo '<br/>';
$result = Braintree_Transaction::sale(array(
'amount' => '113.00',
'paymentMethodNonce' => $_POST['nonce'],
'orderId' => 'order id',
'customer' => array(
'firstName' => $_POST['first_name'],
'lastName' => $_POST['last_name'],
'phone' => $_POST['phone_number'],
)
));
if ($result->success) {
print_r("success!: " . $result->transaction->id);
} else if ($result->transaction) {
print_r("Error processing transaction:");
print_r("\n code: " . $result->transaction->processorResponseCode);
print_r("\n text: " . $result->transaction->processorResponseText);
} else {
print_r("Validation errors: \n");
print_r($result->errors->deepAll());
}
?>
The html:
<form id="checkout" name="checkout" action="checkout_result.php" method="post" style="width:20em;font-size:1.5em;margin-left:auto;margin-right:auto;">
<table style="margin-top:0.5em;">
<tr>
<td style="padding-left:0.75em;">First Name:</td>
<td><input style="font-size:0.75em;"data-braintree-name="first_name" name="first_name" id="first_name" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Last Name:</td>
<td><input style="font-size:0.75em;"data-braintree-name="last_name" name="last_name" id="last_name" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Email Address:</td>
<td><input style="font-size:0.75em;" name="email_address" id="email_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Phone Number:</td>
<td><input style="font-size:0.75em;" name="phone_number" id="phone_number" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Street Address:</td>
<td><input style="font-size:0.75em;" data-braintree-name="street_address" name="street_address" id="street_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Apt #:</td>
<td><input style="font-size:0.75em;" data-braintree-name="extended_address" name="extended_address" id="extended_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Postal Code:</td>
<td><input style="font-size:0.75em;" data-braintree-name="postal_code" name="postal_code" id="postal_code" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Card Number:</td>
<td><input style="font-size:0.75em;" data-braintree-name="number" name="number" id="number" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Expiration Month:</td>
<td><input style="font-size:0.75em;" data-braintree-name="expiration_month" name="expiration_month" id="expiration_month" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Expiration Year:</td>
<td><input style="font-size:0.75em;" data-braintree-name="expiration_year" name="expiration_year" id="expiration_year" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">CVV:</td>
<td><input style="font-size:0.75em;" data-braintree-name="cvv" name="cvv" id="cvv" value=""/> </td>
</tr>
<tr>
<td style="padding-left:0.75em;">Random:</td>
<td><input style="font-size:0.75em;" name="random" id="random" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Nonce:</td>
<td><input type="text" style="font-size:0.75em;" name="nonce" id="nonce" value=""/></td>
</tr>
</table>
<div style="padding-top:0.25em;padding-bottom:0.25em;text-align:center;"><span><input style="font-size:0.5em;" type="submit"
id="submit" value="SUBMIT"/></span></div>
</div>
</form>
How do I get the nonce input field to post. The random text input field doesn't post either.
The problem is probably with the fact, that tokenizeCard makes an asynchronous call to get the nonce. The flow of events is then like this:
submit form begins -> tokenizing begins -> submit form ends ->
(somewhere here the promise is resolved - the result comes back from the server)
-> tokenizing ends
What you can do is to add return false to the end of submit listener (conditions by the emptiness of nonce field) and then then call submit again (without getting the nonce from server again) from the client callback. It would look like this:
$('#checkout').on("submit", function() {
//I could be wrong in the condition below - it may be undefined
if($("#checkout input[name=nonce]").val() === ''){
var client = new braintree.api.Client({clientToken: "<?php echo $clientToken ?>"});
client.tokenizeCard({
number: $('#number').val(),
cardholderName: $('#first_name').val() + ' ' + $('#last_name').val(),
expirationMonth: $('#expiration_month').val(),
expirationYear: $('#expiration_year').val(),
cvv: $('#cvv').val(),
}, function (err, nonce) {
$("#checkout input[name=nonce]").val(nonce);
$('#checkout input[name=random]').val('randomtext');
$('#checkout').submit();
});
return false; //stops form submitting
} else {
return true; //continues form submitting
}
});
Edit: This fiddle represents your problem exactly
$("#form").submit(function(){
alert("submit invoked!");
if($("#writeMe").val() === ''){
writeValue();
alert("submit not done - writeValue invoked");
} else {
alert("submit actually done");
}
return false;
});
function writeValue(){
setTimeout(function() {
alert("result's back -> gonna submit again");
$("#writeMe").val("written");
$("#form").submit();
}, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id="form">
<input type="text" readonly id="writeMe" />
<input type="submit" value="Submit me!" />
</form>
My questions are in the end of this referred as MY PROBLEMS. Please read the questions before you try to go through all the things I have written, so that I don't waste so much of your time.
I have a form where I need to enter certain values as
ITEM | QUANTITY | PRICE | DISCOUNT | TOTAL
Item 1 | 1 | 100 | 05 | 95
Item 2 | 4 | 250 | 10 | 900
Add more
Total : 995
On clicking the 'Add more' link, a new set of same input fields appear, and so forth.
Each subtotal is automatically calculated (95 and 900 in this case).
These sub totals are automatically added to get the final total (995 in this case).
The script I use to have the 'Add more' functionality is the following
<script>
$(document).ready(function() {
var InputsWrapper = $("#InputsWrapper");
var AddButton = $("#AddMoreFileBox");
var x = InputsWrapper.length;
var FieldCount = 1;
$(AddButton).click(function(e){
FieldCount++;
$(InputsWrapper).append('<tr><td><input class="item" type="text" name="item[]"></td><td><input class="qty" type="number" name="qty[]"></td><td><input class="price" type="number" name="price[]"></td><td><input class="discount" type="number" name="discount[]">%</td><td><input class="total" type="number" name="total[]" readonly ></td></tr>');
x++;
return false;
});
});
</script>
The following is the form I have.
<table id="InputsWrapper">
<tr>
<span class="small">Add More Field</span></tr>
<tr>
<td><label for='item'>Item:</label></td><td><label for='qty'>Quantity:</label></td><td><label for='price'>Price:</label></td><td><label for='discount'>Discount</label></td><td><label for='vat'>VAT</label></td><td><label for='total'>Final Price:</label></td>
</tr>
<tr>
<td><input class='item' type='text' name='item[]'></td>
<td><input class='qty' type='number' name='qty[]'></td>
<td><input class='price' type='number' name='price[]'></td>
<td><input class='discount' type='number' name='discount[]'>%</td>
<td><input class='total' type='number' name='total[]' readonly></td>
</tr>
<tr>
<td><input id='totaldp' type='number' name='totaldp' readonly</td>
</tr>
</table>
Now, I need to have an extra field called tax, which will be fetched using a drop down populated from a database with tax values. I need this tax value also to be displayed against each item as a dropdown
ITEM | QUANTITY | PRICE | DISCOUNT | TAX | TOTAL
This is the code I use to make the dropdown in the form
<td>
<?php
$query = mysqli_query($con, "SELECT * FROM `tax`");
echo '<select name="vat" class="vat">';
while ($row = mysqli_fetch_array($query)) {
echo '<option value="' . $row['tax_rate'] . '">' . $row['tax'] . '</option></br>';
}
echo '</select>';
?>
</td>
And in the script, I add class="vat" type="number" name="vat[]"
MY PROBLEMS:
Doing this way, I get the dropdown only once. Clicking the 'add more' field gives only an empty dropdown.
If anyone could help, let me know how.
I think this is very inefficient and stupid way of doing it, so if there is a better way, please let me know.
Please share how do you add the select to the append code. It seems that you are making something wrong there.
So i would recommend you this first the html and php:
<table id="InputsWrapper">
<tr>
<span class="small"><a onclick="addRow();" id="AddMoreFileBox" class="btn btn-info">Add More Field</a></span></tr>
<tr>
<td><label for='item'>Item:</label></td><td><label for='qty'>Quantity:</label></td><td><label for='price'>Price:</label></td><td><label for='discount'>Discount</label></td><td><label for='vat'>VAT</label></td><td><label for='total'>Final Price:</label></td>
</tr>
<tr>
<td><input class='item' type='text' name='item[]'></td>
<td><input class='qty' type='number' name='qty[]'></td>
<td><input class='price' type='number' name='price[]'></td>
<td><input class='discount' type='number' name='discount[]'>%</td>
<td>
<?php
$query = mysqli_query($con, "SELECT * FROM `tax`");
echo '<select name="vat" class="vat">';
while ($row = mysqli_fetch_array($query)) {
echo '<option value="' . $row['tax_rate'] . '">' . $row['tax'] . '</option></br>';
}
echo '</select>';
?>
</td>
<td><input class='total' type='number' name='total[]' readonly></td>
</tr>
<tr>
<td><input id='totaldp' type='number' name='totaldp' readonly</td>
</tr>
Note that for the "Add more button" i use a javascript function:
<script type="text/javascript"><!--
var module_row = <?php echo $module_row; ?>;
function addRow() {
html = '<tr>';
html+= '<td><input class='item' type='text' name='item[]'></td>';
html+= '<td><input class='qty' type='number' name='qty[]'></td>';
html+= '<td><input class='price' type='number' name='price[]'></td>';
html+= '<td><input class='discount' type='number' name='discount[]'>%</td>';
<?php $query = mysqli_query($con, "SELECT * FROM `tax`"); ?>
html += '<select name="vat" class="vat">';
<?php while ($row = mysqli_fetch_array($query)) { ?>
html += '<option value="<?php echo $row['tax_rate']; ?>">';
html += $row['tax'];
html += '</option></br>';
<?php } ?>
html += '</select>';
html+= '<td><input class='total' type='number' name='total[]' readonly></td>';
html+= '</tr>';
module_row++;
$(InputsWrapper).append(html);
}
//--></script>
I am very sorry for the code format and that there is no code check, but i am in work and have no time. If you can remove the js and code mistakes i did, it should work fine. If not i can make you a better solution when i am back home.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I created this jQuery script to create dynamic table to enter data of multiple address I have problem when I want add new row is not adding new row to my table can someone help me ?my console told me this message
event.returnValue is deprecated. Please use the standard
event.preventDefault() instead. GET id: 1 | $id :street_01
HTML
<html>
<body>
<form>
<div class="container">
<table id="address_table" class="table">
<thead>
<tr>
<th>Street</th>
<th>City</th>
<th>Province</th>
<th>PostalCode</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="street_01" maxlength="255" required /></td>
<td><input type="text" name="city_01" maxlength="255" required /></td>
<td><input type="text" name="province_01" maxlength="255" required /></td>
<td><input type="text" name="postalCode_01" maxlength="7" required /></td>
<td> </td>
</tr>
</tbody>
</table>
<input type="button" value="Add Row" id="add_AdressRow" />
</div> <!--/container-->
</form><!--/form-->
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/script.js"></script>
</body>
</html>
javascript
// GET ID OF last row and increment it by one
var $lastChar = 1, $newRow;
$get_lastID = function () {
var $id = $('#address_table tr:last-child td:first-child input').attr("name");
$lastChar = parseInt($id.substr($id.length - 2), 10);
console.log('GET id: ' + $lastChar + ' | $id :' + $id);
$lastChar = $lastChar + 1;
$newRow = "<tr> \
<td><input type='text' name='street_0" + $lastChar + "' maxlength='255' /></td> \
<td><input type='text' name='city_0" + $lastChar + "' maxlength='255' /></td> \
<td><input type='number' name='province_0" + $lastChar + "' maxlength='11' /></td> \
<td><input type='text' name='postalCode_0" + $lastChar + "' maxlength='255' /></td> \
<td><input type='button' value='Delete' class='del_ExpenseRow' /></td> \
</tr>"
return $newRow;
}
// ***** -- START ADDING NEW ROWS
$('#add_AdressRow').bind("click", function () {
if ($lastChar <= 9) {
$get_lastID();
$('#expense_table tbody').append($newRow);
} else {
alert("Reached Maximum Rows!");
};
});
$(".del_AdressRow").bind("click", function () {
$(this).closest('tr').remove();
$lastChar = $lastChar - 2;
});
see the id selector on javascript is #expense_table and on html is #address_table.just change it to address_table
Change this:
$get_lastID();
$('#expense_table tbody').append($newRow);
to this:
$('#expense_table tbody').append($get_lastID());
For the console error, just change event.returnValue to event.preventDefault();