Let me start by saying this is not a repeated question, I read every related question! My edit functions work fine, and my push function to update the array was working, and I'm certain I never touched it, it just stopped working!
I'm going to say my HTML form has ng-model's that have no spelling errors, that are used to help with the push. The Angular code:
$scope.add = function(id){
$scope.people.push({
name: $scope.name,
phone1: $scope.phone1,
phone2: $scope.phone2,
phone3: $scope.phone3,
email: $scope.email,
city: $scope.city,
state: $scope.state
});
//More code here that resets the forms input//
}
My edit functions work, my delete ones do, it's just this one, when I hit the button that sets off the add() function, it resets the form input, but pushes a blank array into my ng-repeat list!
I have a form that has multiple inputs with ng-model set to whatever; name, phone1 ... etc, and the angular code is correct, so why the hell will this not work?
<div class="centered" ng-show="addcont">
<form id="adder" name="commentForm" method="post">
<h2 class="formtitle">Add Contact</h2>
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td>
<input class="edit" type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="edit" type="text" ng-model="email">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone1">
<input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone2" /> -
<input type="text" id="number" class="edit" maxlength="4" size="5" ng-model="phone3" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input class="edit" type="text" ng-model="city">
</td>
</tr>
<tr>
<td>State</td>
<td>
<input class="edit" type="text" ng-model="state">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Save" ng-click="add(); `showAdd()">
</td>
</tr>
</table>
</form>
</div>
MAJOR UPDATE!
I use a JQuery autotab function, and as soon as I commented it out, the arrays passed in normally again.
The function is used on the form provided above, and auto tabs to the next input.
Here's the function:
<script>
$(document).ready(function(){
$('.edit').autotab();
});
</script>
Using Jquery and angular doestnot fit every time
So, we should use the angular version of the Auto tabs.
So, Here is the solved example using Auto tabs with Angular.
The important line to be added is
$.autotab.selectFilterByClass = true;
$.autotab.selectFilterByClass = true;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$('.edit').autotab();
$.autotab.refresh();
$scope.people = [];
$scope.add = function(id){
$scope.people.push({
name: $scope.name,
phone1: $scope.phone1,
phone2: $scope.phone2,
phone3: $scope.phone3,
email: $scope.email,
city: $scope.city,
state: $scope.state
});
setTimeout(function () {
$.autotab.refresh();
}, 1);
//More code here that resets the forms input//
}
});
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autotab/1.9.2/js/jquery.autotab.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="centered">
<form id="adder" name="commentForm" method="post">
<h2 class="formtitle">Add Contact</h2>
{{people}}
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td>
<input class="edit" type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="edit" type="text" ng-model="email">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone1">
<input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone2" /> -
<input type="text" id="number" class="edit number" maxlength="4" size="5" ng-model="phone3" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input class="edit" type="text" ng-model="city">
</td>
</tr>
<tr>
<td>State</td>
<td>
<input class="edit" type="text" ng-model="state">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Save" ng-click="add()">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Please run the Above SNIPPET
Now, your pushing the code into the Array works fine with AUTO-TAB.
HERE IS A WORKING DEMO
Try to push the variables by value and not by reference. The quickest solution that I came through is using the JSON object. This might be a problem when you reset the $scope.name for example, it updates the value in your array.
$scope.add = function(id){
$scope.$apply(function() {
$scope.people.push({
name: JSON.parse(JSON.stringify($scope.name)),
phone1: JSON.parse(JSON.stringify($scope.phone1)),
...
});
});
//other code
}
Related
Well I'm generating a ng-repat but I need change data and send all this for edit in back end my problem is when I want to do this, can't obtain values of the form inside ng-repeat
The picture is the form that have, in html looks:
<form name="FormTablesPackageCreation">
<table class="table table-striped ta ble-bordered">
<thead>
<tr>
<th>Estado</th>
<th>Especie</th>
<th>Tipo</th>
<th>Dimension</th>
<th>ubicacion</th>
<th>largo</th>
<th>Ancho</th>
<th>Espesor</th>
<th>Cantidad</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="packageList in dataListTables">
<input class="form-control" type="hidden" ng-value="packageList.id_table" name="id_table[{{$index}}]" id="id_table[{{$index}}]">
<input class="form-control" type="hidden" ng-value="packageList.id_package" name="id_package[{{$index}}]" id="id_package[{{$index}}]">
<td>
<input class="form-control" type="text" ng-value="packageList.estado" ng-model="vm.estado" name="estado[{{$index}}]" id="estado[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.especie" name="especie[{{$index}}]" id="especie[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.ubicacion" name="ubicacion[{{$index}}]" id="ubicacion[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.dimension" name="dimension[{{$index}}]" id="dimension[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.tipo" value="{{packageList.tipo}}" name="tipo[{{$index}}]" id="tipo[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.humedad" value="{{packageList.humedad}}" name="humedad[{{$index}}]" id="humedad[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.disponible" value="{{packageList.disponible}}" name="disponible[{{$index}}]" id="disponible[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.largo" name="largo[{{$index}}]" id="largo[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.ancho" name="ancho[{{$index}}]" id="ancho[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.espesor" name="espesor[{{$index}}]" id="espesor[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-model="packageList.cantidad" ng-value="packageList.cantidad" ng-change="" name="cantidad[{{$index}}]" id="cantidad[{{$index}}]" required>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Cantidad de tablas</td>
<td>
<input class="form-control" type="text" ng-model="vm.total" ng-value="dataListTables | sumByColumn: 'cantidad'" name="total" id="total" readonly>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Cantidad de tablas nuevo paquete</td>
<td>
<input class="form-control" type="text" ng-model="vm.Referencial" ng-value="sumNewCan(dataListTables | sumByColumn: 'cantidad')" readonly>
</td>
</tr>
</tbody>
</table>
<div>
<br>
<button class="btn btn-primary btn-lg" ng-click="crearPaquete()">Crear nuevo Paquetes</button>
</div>
</form>
how I'm trying to obtain of values:
$scope.crearPaquete = function ()
{
var vm = this;
$scope.seleccionadorEspecies = false;
$scope.creadorPaquetes = false;
$scope.verificacionPaquetes = true;
for (var i = 0; i < FormTablesPackageCreation.cantidad.length; i++)
{
console.log(FormTablesPackageCreation.id_table[i].value);
console.log(FormTablesPackageCreation.id_package[i].value);
console.log(FormTablesPackageCreation.cantidad[i].value);
}
};
I need obtain data of the ng-repeat, Try another way but do not work yet.
You shouldn't be trying to get the Data by way of your Form - it should all be model-bound in your HTML to your dataListTables collection with the ng-model directives (instead of ng-value). Since you haven't posted your controller code it's hard to go much further, but assuming your dataListTables is a $scope variable (which it shouldn't - always assign to a controller variable!!), you could access the data in your controller at any time in the page lifecycle like so:
HTML
<input ... ng-model="packageList.attribute" /> (remove ng-value)
Controller
angular.forEach($scope.dataListTables, function(obj)
{
console.log(obj.estado);
console.log(obj.largo);
console.log(obj.ancho);
// and so on
});
I'd highly recommend using ng-controller with the as syntax (ng-controller="myController as myCtrl") and then in your controller code assigning your dataListTables to this like so:
ngApp.controller("myController", function($scope)
{
this.dataListTables = { ... your data ... };
});
Then modify your HTML to access the myCtrl variable instead of the implied $scope:
ng-repeat = "packageList in myCtrl.dataListTables"
For reference, do a quick google on "Angular Dot Rule" to see why using $scope variables is a bad idea.
Its very simple.
Add ng-model in input tag like this
<input class="form-control" type="text" ng-value="packageList.humedad" value="{{packageList.humedad}}" ng-model ="packageList.humedad" name="humedad[{{$index}}]" id="humedad[{{$index}}]" readonly>
You can get the updated value in the controller like $scope.dataListTables. hope it will help you.
I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone
//checkScore();
function checkScore(){
document.getElementById('score_row1').readonly = true;
var scores = document.getElementsByClassName("score_holder");
var i;
for(i=0; i<scores.length; i++){
if(scores[i].value!=null){
scores[i].readonly="readonly";
}
}
}
<!doctype html>
<html>
<head>
</head>
<body onload="checkScore()">
<table align="center" cellpadding="3">
<tr valign="baseline">
<td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
</tr>
<tr>
<td align="right">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="30" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="10" size="5" class="score_holder" />
</td>
</tr>
</table>
</body>
</html>
First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.
Also the property is readOnly and not readonly
So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";
Created a working demo here
The value of a text input will always be a string.
If nothing has been typed in it, then the value will be "". It will never be null.
I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});
What I am trying to do is to dynamically replace the corresponding text with the string from input field.(field1>field11, field2>field22)
http://jsfiddle.net/c2CUE/3/
Can you give me any clue on how to do it in jquery?
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
this should do the trick
$(document).ready(function () {
$("input.field1").on("keyup",function () {
$("span.field11").html($(this).val());
});
});
or in live
http://jsfiddle.net/u8EB9/
you could also hook the function to the "change" event but than youll get your text only updated, after you left the input!
this depends on your needs!
Try this:
<form id="form" method="post">
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
</form>
and jquery:
$(document).ready(function(){
$('#form').submit(function(e){
e.preventDefault();
$('.field11').html($('.field1').val());
$('.field22').html($('.field2').val());
});
}
if your intention is to use this code multiple times it might be better to use classs rather than id's to stop you needing to create a bunch of bind events.
html:
<table>
<tr>
<td>
<h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="replacer" />
<input type="button" class="replace" value="replace" />
</td>
<td>
<span class="replacee field11">asdasd</span>
</td>
</tr>
<tr>
<td>
<h2>Field 1</h2>
<input type="text" class="replacer" name="field2" value="qwerty" />
<input type="button" class="replace" value="replace" />
</td>
<td>
<span class="replacee field22">asdasd</span>
</td>
</tr>
</table>
JS:
$('.replace').on('click', function(){
var parentRow = $(this).closest('tr');
parentRow.find('.replacee').text(parentRow.find('.replacer').val());
});
http://jsfiddle.net/c2CUE/4/
HTML:
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
JQuery:
$("input[type='text']").on("keyup",function () {
$(this).parent().next().find('span').html($(this).val());
});
Demo:
http://jsfiddle.net/F74ec/
I have a form that contain ten text boxes for entering some data. That form has a submit button and a next button. When I click on the next button, it has to open again ten text boxes, and has to store previous information into a temporary table in a MySQL database or in any other way. And finally, if I click on the submit button, it has to store that complete information into another permanent MySQL database table.
How can I do this?
This is what I tried so far:
<form name="form2" action="addingstuden_data.jsp" method="POST">
<table align="center">
<th colspan="3" class="style30"><font size="5">Adding Students for<%=stream%>-<%=year3%></th>
</table>
<table align="center" border="1">
<tr>
<td class="heading" align="center" >SNo</td>
<td class="heading" align="center" >Student Id</td>
<td class="heading" align="center">Student Name</td>
</tr>
<%
int i;
for(i=0;i<62;i++)
{
%>
<tr>
<td><input type="text" name="SNo" value="<%=i%>" id="r2" size="1"> </td>
<td><input type="text" name="stdid" id="sid" size="4" value=""> </td>
<td><input type="text" name="stdname" id="sname" value=""> </td>
</tr>
<% } %>
</table>
<table width="100%" class="pos_fixed">
<tr>
<td align="center" class="border"><input type="submit" name="submit" value="submit"> </td>
</tr>
</table>
</form>
Try this, Style it according to your need
<form name="myform" method="POST" action="youraction">
<div id="forms">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
</div>
<input type="button" name="next" value="next" onclick="next()">
<input type="submit" name="submit" value="Submit">
</form>
Javascript code
function next()
{
var ele = document.getElementById('forms');
for(var i=0;i<10;i++)
{
var name = document.createElement("input");
name.setAttribute('type',"text");
name.setAttribute('name',"feilds[]");
ele.appendChild(name);
}
}
On server side loop through feilds[] array and get all the values