i have added new row but i want update new row data also in database but there is no updated data how to get new row data also add address json array
<tr ng-repeat="x in Profile.addresses">
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.site_name ' name='site_name'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.street_address ' name='street_address'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.city ' name='city'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.state ' name='state'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.country ' name='country'></td>
<tr ng-repeat="lines in array">
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.site_name ' name='site_name'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.street_address ' name='street_address'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.city ' name='city'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.state ' name='state'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.country ' name='country'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.zip_code ' name='zip_code'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.phone_number ' name='phone_number'></td>
</tr>
<div class="col-md-2">
<a href="" data-toggle="tooltip" title="Add Address" ng-click="addRow()"><i class="fa fa-plus fa-2x cust_primary" aria-hidden="true">
In your controller, create a counter and an array.
$scope.i = 0;
$scope.array = [];
Everytime your user clicks on the button, add one to the counter and create the array.
$scope.addRow = function() {
$scope.i++;
$scope.array = [];
for(var i = 0; i < $scope.i; i++) {
$scope.array.push(i);
}
}
In your html, simply repeat the lines based on that counter.
<tr ng-repeat="lines in array">
// Your tds
</tr>
EDIT Since I can't understand your english, I will give you a generic answer.
Your controller must have an array of objects
$scope.i = 0;
$scope.array = [{
id: 0,
address: 'address 1',
name: 'Jack Reacher'
}, {
id: 1,
address: 'address 2',
name: 'Ethan Hawk'
}];
you will then slightly change your addRow function.
$scope.addRow = function() {
$scope.i++;
$scope.array = [];
for(var i = 0; i < $scope.i; i++) {
$scope.array.push({
id: null,
address: '',
name: ''
});
}
}
And in your HTML you use it.
<tr ng-repeat="object in array">
<td>{{object.id}}</td>
<td><input type="text" ng-model="object.address" /></td>
<td><input type="text" ng-model="object.name" /></td>
</tr>
And if you want to save it, you use an $http request. I'll let you handle that part.
Related
I have an HTML structure like the following,
$(".zip-save").on('click', function(e) {
e.preventDefault();
var isFormValid = true;
var zip_start = $('.zip-first').val();
var zip_end = $('.zip-last').val();
console.log("start = " + zip_start + ",end = " + zip_end);
if (zip_start > zip_end) {
$('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)');
$(this).parents('div').before("<p>zip-to value must be greater than zip-from</p>");
} else {
$('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</br>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</br>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</br>
<button class="zip-save">Save</button>
And on save button click function, I want to check all of these first zip field value is less than the last zip field value,
I could do the same for only the first <tr>, but how to do that for all of them at a time?
You need to loop through those table rows, whereas you were only grabbing the values for the first row. I gave the table a classname and then looped through the tr tags. Also note this syntax: +$(this).find('.zip-first').val() - that little plus sign converts this string into a number so I can make the comparison. Also, I made a div at the bottom to hold the error.
$(".zip-save").on('click', function(e) {
e.preventDefault();
let isFormValid = true;
$('.zip-table tr').each(function() {
let zip_start = +$(this).find('.zip-first').val()
let zip_end = +$(this).find('.zip-last').val();
// console.log("start = " + zip_start + ",end = " + zip_end);
if (zip_start > zip_end) {
$(this).find('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)');
$('.error').html("zip-to value must be greater than zip-from");
} else {
$(this).find('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='zip-table'>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</table>
<div class='error'></div>
<button class='zip-save'>Save</button>
Consider the following example.
$(".zip-save").on('click', function(e) {
e.preventDefault();
var isFormValid = true;
var zip_start;
var zip_end;
$("table tr").each(function(index, elem) {
zip_start = parseInt($(".zip-first", elem).val());
zip_end = parseInt($(".zip-last", elem).val());
if (zip_start > zip_end) {
console.log(zip_start, zip_end, "invalid");
$('.zip-last', elem).removeClass("valid").addClass("invalid");
} else {
console.log(zip_start, zip_end, "valid");
$('.zip-last', elem).removeClass("invalid").addClass("valid");
}
});
});
input.valid {
border-color: rgba(33, 33, 33, 0.12;
}
input.invalid {
border-color: rgba(218, 71, 58, 0.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</table>
<button class="zip-save">Save</button>
I have cleaned up your HTML Table. You should not include elements like <br> inside table rows. I also wrapped it with the proper <table> element.
As was suggested, you must iterate over each row and examine the Inputs in that row. You can do this with $(elem).find(".zip-first") or the shorthand, $(".zip-first", elem). Input elements return a String Value, so for better comparison, it is best to cast it as an Integer.
It is sometimes better to add or remove classes as needed. You can also use .toggleClass("invalid") to easily add / remove a single class.
See More:
https://api.jquery.com/find/
https://api.jquery.com/each/
https://api.jquery.com/toggleclass/
I have a problem with a serialized form. I need to pass multiple rows for creating an invoice, but it passes just the first row.
This is a form:
<form action="" id="generate_invoice" method="POST">
<td><input type="number" class="form-control n_invoice" name="n_invoice[]"></td>
<td><input type="date" class="form-control data" name="data[]"></td>
<td><input type="text" class="form-control description" name="description[]"></td>
<td><input type="number" class="form-control price" name="price[]" step=any></td>
<td><input type="number" class="form-control vat" name="vat[]">
</form>
This is a function which adds new rows:
function addrow_invoice() {
var i = $('#invoiceTable tr').length;
var tr = '<tr>'+
'<td><input type="checkbox" class="case"/></td>'+
'<td></td>'+
'<td></td>'+
'<td><input type="text" class="form-control description" name="description[]"></td>'+
'<td><input type="number" class="form-control price" name="price[]"></td>'+
'<td><input type="number" class="form-control vat" name="vat[]"></td>'+
'</tr>';
$('table#invoiceTable').append(tr);
i++;
};
And this is a test:
for($i = 0; $i<count($_POST['description']); $i++)
{
echo "{$_POST['description'][$i]}";
echo "<br>";
}
The issue is because your HTML is invalid. The form needs to wrap the table element, not be inside it. Because the HTML is invalid, the location of the form is moved so that it's not wrapping your input elements, hence nothing gets serialised.
Your HTML needs to be changed to this:
<form action="" id="generate_invoice" method="POST">
<table id="invoiceTable">
<tr>
<td><input type="number" class="form-control n_invoice" name="n_invoice[]"></td>
<td><input type="date" class="form-control data" name="data[]"></td>
<td><input type="text" class="form-control description" name="description[]"></td>
<td><input type="number" class="form-control price" name="price[]" step=any></td>
<td><input type="number" class="form-control vat" name="vat[]">
</tr>
<!-- additional rows appended here... -->
</table>
</form>
I want to update new row data in my current Address Array but its not updating,
See below images, I am new in Angular, add other object of array see last image
<tbody class="gradeX">
<tr ng-repeat="x in Profile.addresses">
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.site_name ' name='site_name'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.street_address ' name='street_address'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.city ' name='city'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.state ' name='state'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.country ' name='country'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.zip_code ' name='zip_code'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.phone_number ' name='phone_number'></td>
<tr ng-repeat="lines in array">
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.site_name ' name='site_name'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.street_address ' name='street_address'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.city ' name='city'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.state ' name='state'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.country ' name='country'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.zip_code ' name='zip_code'></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='x.phone_number ' name='phone_number'></td>
</tr>
</tr>
</tbody>
<i class="fa fa-plus fa-2x cust_primary" aria-hidden="true"></i>
Code Snippet for Adding new row in Address Array:
$scope.i = 0;
$scope.array = [];
$scope.addRow = function() {
$scope.i++;
$scope.array = [];
for(var i = 0; i < $scope.i; i++) {
$scope.array.push(i);
}
}
Code Snippet for Updating Textbox values into database:
$scope.updateProfile = function () {
$scope.tempObject={full_name:$scope.Profile.full_name,
mobile_number:$scope.Profile.mobile_number,
company_name:$scope.Profile.company_name,
designation: $scope.Profile.designation,
addresses: $scope.Profile.addresses,
payment_info: $scope.Profile.payment_info
};
addresses: $scope.Profile.addresses,
In Below Picture I click button (+) to generate new row with empty textfields:
After row appears, I enter some data:
When i Click Update button yellow highlighted new row data does not save, it shows old records after i refresh my page
My question in Simple. How to update the Address array with new row ?
If I am understanding you correctly, you just need to push the new data into your existing array like below:
$scope.updateProfile = function(){
$scope.addresses.push($scope.form)
$scope.form = {};
$scope.i = 0;
}
add $scope.form = {} to your controller to collect the new row, and change your model on the new row to "form." + the column name like below:
<td><input type="text" class="form-control" id="inputDefault" ng-model='form.site_name ' ></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='form.street_address ' ></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='form.city '></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='form.state ' ></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='form.country ' ></td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='form.zip_code ' td>
<td><input type="text" class="form-control" id="inputDefault" ng-model='form.phone_number '></td>
Mind you, you will have to do much more to actually permanently add it to your database.
Here is a Plunker
I'm trying to grab the value of sibling input fields in a form. The goal is to compare two date fields; the field that just changed and the other date field in that form. Each of the date fields is class "adate". I can get the value of teh current field but when I try to grab the other field in the sibling set, I get 'undefined' instead of the value of the field. Here's the javascript code:
$(".adate").change(function(){
var name = $(this).attr("name");
if (name == 'start') {
var start = new Date($(this).val());
var end = new Date($(this).siblings('[name="end"]').val());
} else {
var end = new Date($(this).val());
var sibs = $(this).siblings('.adate');
var start = new Date(sibs.eq(0).val());
}
if(end < start) alert("The end date must be after the start date.");
});
Here's the html:
<div class='jumbotron'>
<table>
<tr><td>Type</td><td>Start Date</td><td>End Date</td><td>By</td><td></td><td></td></tr><form action="manage.php" method="post">
<tr>
<td ><select name="type" class="form-control" style="width:auto;"><option value="hunt" selected >hunt</option><option value="closed" >closed</option><option value="snow" >snow</option></select></td><td><input type="date" name="start" value="2015-12-07" class="form-control adate" /></td>
<td><input type="date" name="end" value="2015-12-09" class="form-control adate" /></td>
<td><input type="text" name="uid" value="phil" class="form-control" readonly style="width:80px;" /></td>
<td><input type="hidden" name="id" value="1" /><button class="btn btn-sm btn-primary btn-block" type="submit">Save</button></td></form>
<td><form action="manage.php" method="post"><input type="hidden" name="id" value="1" /><input type="hidden" name="delete" value="delete" /><button class="btn btn-sm btn-primary btn-block" type="submit" style="background-color:red; " >Del</button></form></td>
</tr><form action="manage.php" method="post">
<tr>
<td><select name="type" class="form-control" style="width:auto;"><option value="hunt" >hunt</option><option value="closed" >closed</option><option value="snow" >snow</option></select></td>
<td><input type="date" name="start" class="form-control adate" value="2015-11-17" /></td>
<td><input type="date" name="end" class="form-control adate" /></td>
<td><input type="text" name="uid" value="phil" class="form-control" style="width:80px;" readonly/></td>
<td><button class="btn btn-sm btn-primary btn-block" type="submit">Add</button></form>
</tr>
</table>
</div>
What am I doing wrong??
Here is one way of doing it, assuming that you have only two distinctly named input fields. The advantage here is that the elements are picked out whether or not they are siblings.
$(".adate").change(function() {
var theRow = $(this).parents("tr");
/* theTag is for demo only, shows that the right row is picked out */
var theTag = theRow.attr('class');
alert(theTag);
var theStartDate = new Date($(theRow).find(".adate[name='startDate']").val());
var theEndDate = new Date($(theRow).find(".adate[name='endDate']").val());
if (theEndDate < theStartDate) {
alert("The end date must be after the start date.");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr class="row1">
<td>
<input class="adate" type="text" name="startDate" value="2015-10-10">
</td>
<td>
<input class="adate" type="text" name="endDate" value="2015-10-10">
</td>
</tr>
<tr class="row2">
<td>
<input class="adate" type="text" name="startDate" value="2015-10-10">
</td>
<td>
<input class="adate" type="text" name="endDate" value="2015-10-10">
</td>
</tr>
</table>
I have a table with 3 table rows, each row contains 5 columns with input text boxes, the last column is for the total of the values inputted in the 4 columns. I want to calculate the total automatically using jquery or javascript after the 4 columns was filled with values. How could I do this? Here is my table code.
Table
<table name="tbl_a" id="tbl_a">
<tr>
<td><span style="margin-left:30px;">a. Provision of certified seeds</span></td>
<td>no. of bags</td>
<td>per AT</td>
<td><input type="text" class="form-control" name="at[a]" id="a" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[b]" id="b" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[c]" id="c" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[d]" id="d" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_1]" id="total_1" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
<td></td>
<td>no. of farmers</td>
<td></td>
<td><input type="text" class="form-control" name="at[e]" id="e" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[f]" id="f" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[g]" id="g" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[h]" id="h" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_2]" id="total_2" value="" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
<td style="text-align:center;">Rehab Seeds</td>
<td>no. of bags</td>
<td>per AT</td>
<td><input type="text" class="form-control" name="at[i]" id="i" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[j]" id="j" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[k]" id="k" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[l]" id="l" value="" style= "width:160px;"/></td>
<td><input type="text" class="form-control" name="at[total_3]" id="total_3" value="" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
</table>
First of all please google for what you wanted to achieve, learn yourself, try to find the solution. If you still not succeeded, ask question with the relevant code that you have tried and with some playgrounds such as jsfiddle.net or jsbin.com etc.
However, here is the script which I used. I added total to the last input field.
$(function () {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
$(this).find('input[type=text]').bind("keyup", function () {
calculateSum();
});
});
function calculateSum() {
var tbl = $('#tbl_a');
tbl.find('tr').each(function () {
var sum = 0;
$(this).find('input[type=text]').not('.total').each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$(this).find('.total').val(sum.toFixed(2));
});
}
});
Here is the result. In this script, you can have any number of rows, but the last row needed to have a different class name otherwise its value also added to the total.
On input change, calculate inputs's total. If one input is empty return, if not assign total to last input of tr.
$(".form-control").change(function(){
var tr = $(this).parents("tr");
var total = 0;
for (var i = 0; i < tr.find("input").length; i++) {
if ($(tr).find("input").eq(i).val() == 0 || $(tr).find("input").eq(i).val() == "")
return;
total += parseInt($(tr).find("input").eq(i).val());
}
$(tr).find("input").eq($(tr).find("input").length-1).val(total);
}