We Keep Coding

access a specific input in an input array

<td><input type="text" name="product_code[]" id="product_code1" class="form-control input-sm" /></td>
I have been creating an invoice system ... how can I access a specific input to get its text ( product code ) and load the description from the database???
I know how to access all the elements but cannot access the specific one the user is typing text :(
using the below code trying to get the value returns all the values of the product code text inputs and only works for the first one
$('[name="product_code[]"]').keyup(function() {
var values = $("input[name='product_code[]']")
.map(function(){return $(this).val();}).get();
alert(values);
});

#AlexisGarcia lets say user types product code I want to access the db and retrieve product description for that product code ... how do I get through javascript or jquery the value of the specific input the user is typing???
You have to use AJAX to get that from Database.
First you need to get what the user has typed (input value), and then send it to AJAX. Here is an example:
$('#product_code1').keyup(function(){
var user_text = $(this).val();
$.ajax({
method: 'post',
url: 'link_to_your_controller',
data: {text: user_text},
dataType: 'json',
complete: function(data) {
//..DO SOMETHING WITH RESULT FROM DB
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<input type="text" name="product_code[]" id="product_code1" class="form- control input-sm" />
</td>
You need to learn about AJAX to do what you need.
You can start by reading https://www.w3schools.com/xml/ajax_intro.asp

$('.input-sm').keyup(function() {
var values = $(this).val();
alert(values);
});
Try this code, you will get what you want

using javascript to build on php loop with classes only logging first result

I'm currently building a form and the data within it is build from a PHP Foreach loop
I'm using Javascript so that I can make the action of checking/unchecking a checkbox will make an ajax call.
The issue right now (using class names) is that when I click the checkbox and console log the data, each checkbox does trigger properly but it only console logs the first table row's data
So if my php loop builds 5 rows, each with their own values and their own checkboxes, each checkbox triggers the log but they each log only the first set of values.
What am I doing wrong here?
$(".addToLineup").click(function (e) {
var number = document.getElementsByClassName("number")[0].innerHTML;
var detail = document.getElementsByClassName("detail")[0].innerHTML;
var category = document.getElementsByClassName("category")[0].innerHTML;
updatedata.number = number;
updatedata.detail = detail;
updatedata.category = category;
console.log(updatedata);
)};
<form id="saveLineup">
#foreach($lists as $list)
<tr style="text-align:center;">
<td class="number">{{$list['GROUP']}}</td>
<td class="detail">{{$list['COVER']}}</td>
<td class="category">{{$list['CATEGORY']}}</td>
<td><input class="addToLineup" type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?></td>
</tr>
#endforeach
</form>

how to set checkbox checked based on value in one array and add value to another array if checked otherwise remove using angular js?

enter image description hereFollowing is just the overview of the code,as given in html code i just want to show the options from options array from set object and have to set checkbox checked to option which is an answer from answer array and have to add new answer to answer if i check more options with checkbox clicked, and have to remove answer if checkbox is unchecked.
<script>
var adminApp = angular.module('app',[]);
adminApp.controller('EditController', function ($scope) {
$scope.viewQuestions=function(){
set={}; //object in which answer array and option array is present //assume;
var answer= ["answer1", "answer2"]; //answer array assume
var options=["option1,option2,option3,option4"]; //option array assume
var answerType="Multiple";
}
$scope.updateAnswer =function(isSet,index,answer,set)
{
for(var i=0;i<set.answer.length;i++)
{
if(isSet===set.answer[i])
{
set.answer[index]=isSet;
}
else
{
set.answer.splice(index, 1);
}
}
}
}
</script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
</head>
<body ng-app="app" ng-controller="EditController" ng-init="viewQuestions()">
<table>
<tr>
<td ng-show="s.answerType === 'Multiple'">
<p ng-repeat="o in s.options">{{$index + 1}}. <input type="checkbox"
name="answer-{{index}}"
ng-model="isSet" value="{{o}}"
ng-change="updateAnswer(isSet,$index,answer,s)">{{o}}</p>
</td>
</tr>
</table>
</body>
</html>

This is not exactly what you want but it's something. I change the concept to do the same in a cleaner way and more angular style. (in my opinion)
I have an array of objects (name: The option title & active: Checked or not) And after each change I update the set. With filter & map; So, the set is always up to date
(If you receive a array of string as options, you can assume that all of them are Active: false)
Maybe it can works for you in general, or you can get an idea from the code.
http://plnkr.co/edit/GucWDwF66A56IkXHHpwG?p=preview

In angular, you can bind checkbox's checked property to a method that returns ids of your mini_array that is in main_array;
---your.html---
enter code here
enter code h
<div class="mb-2"><b>Permissions list</b></div>
<div formArrayName="permissions" *ngFor="let permission of main_array; let i=index">
<input class="mr-2" [checked]="isChecked(permission.id)" type="checkbox">
{{permission.name}}
</div>
---your.ts---
isChecked(id) {
return this.mini_array.includes(id);
}

Making a text box that duplicates upon input in AngularJS?

I'm trying to make a series of text boxes. It starts with one text box, but when the user puts information into it, another empty text box appears beneath it. This continues indefinitely.
Each text box needs to have an ng-model value associated with it, and each needs to be generated by ng-repeat.
For example, my HTML is this:
<table ng-controller="BoxesController">
<tr ng-repeat="box in boxes">
<td><input type="text" ng-model="box.input"></td> <!--boxes[0].input-->
</tr>
</table>
I'm using box.input rather than just box because it needs to have other variables assigned to it as well.
Then my controller would be:
.controller('BoxesController',['$scope',function($scope){
$scope.boxes = [
{input: ""}
];
if($scope.boxes[$scope.boxes.length - 1] !== ""){
$scope.boxes.push({input: ""});
$scope.$apply;
}
}])
This would create an empty box in the view in which box.input === "". The if is basically "If the last value in the array is not empty, append a new empty value to the array."
This whole thing should, initially, create a single empty box then generate more boxes as the user inputs data box by box.
However, what it actually does is generate two empty boxes that do not respond to input at all.
Would anyone know what to do here, how to make this work?
Thank you!

Wrap the condition within a method:
$scope.newBox = function() {
if($scope.boxes[$scope.boxes.length - 1].input !== ""){
$scope.boxes.push({input: ""});
console.log( $scope.boxes)
$scope.$apply;
}
};
Html:
<td><input type="text" ng-model="box.input" ng-blur="newBox()"></td>
Demo

As the answer above, try to use an method. Here another example using ng-change.
angular.module('app',[])
.controller('BoxesController',['$scope',function($scope){
$scope.boxes = [
{}
];
$scope.callChange = function() {
if($scope.boxes[$scope.boxes.length - 1].val !== ""){
$scope.boxes.push({val: ""});
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<table ng-controller='BoxesController'>
<tr ng-repeat="box in boxes">
<td><input type="text" ng-model="box.val" ng-change="callChange()"></td>
</tr>
</table>
</div>

pass var to function() js with jquery

Just looking for the best practise way of doing this.
I have a table listing information and in the last column is a button with "Edit/View". When the user clicks on the button a div area appears with more information which can be edited
Code below with some fragments of jstl
<script type="text/javascript">
//Click on Edit/View on table
$('.viewCustomer').click(function()
{
.......
});
</script>
<tr class="odd">
<td>${customerBean.comName}</td>
<td>${customerBean.comCode}</td>
<td class="noRightPad"> <input type="submit" name="createBut" value="View/Edit" class="viewCustomer" /> </td>
</tr>
So my question would be:
(1) how do i pass a variable to function $('.viewCustomer').click(function()
(2) is this the best way of going about to do this. Is there a more efficient/secure/cleaner of doing this?
Cheers
Alexis

The click function will not be called by you. It is called when the button is clicked, and as such has the event object passed to it:
$('.viewCustomer').click(function(evt){
.......
});
What exactly are you wanting to pass? You can access the DOM element that you are clicking using this and $(this), so maybe it possible to reference what you want from here.
EDIT For comment
if the user clicked on the button that
was in the 4th row of the table and in
that row the another colum had
customer id 1234 i want to pass the
variable 1234.
NOTE: None of the below has been tested, but ought to suffice
Let's assume your 'customer id' column has a classname of 'customerid'. So your HTML might be:
<tr class="odd">
<td>${customerBean.comName}</td>
<td class="customerid">${customerBean.comCode}</td>
<td class="noRightPad"> <input type="submit" name="createBut" value="View/Edit" class="viewCustomer" /> </td>
</tr>
The jQuery might look something like:
$('.viewCustomer').click(function(){
var $buttonCell = $(this).parent(); //the <td> containing the button
var $buttonRow = $buttonCell.parent(); //the <tr> containing the button and your customer id
var $customerIdCell = $buttonRow.find("td.customerid");
var customerId = $customerIdCell.text();
});
The above is proken down into lines to show you how stuff is being retrieved. Using 'chaining' we can express it more concisely:
$('.viewCustomer').click(function(){
var customerId = $(this).parent().parent().find("td.customerid").text();
}
You can also search for the customerid cell as a 'sibling' of the button cell for an even more concise approach (and one less function call).
$('.viewCustomer').click(function(){
var customerId = $(this).parent().siblings("td.customerid").text();
}