I have a form which adds a row of text inputs dynamically if a user wants to add a new row, it automatically populates a new row with an input field with the same id and class as the previous ones. My question is how can i get the value of each text input field?
<div class="col-xs-12 col-md-12" id="items">
<div class="row add-items">
<div class="col-md-6 col-sm-12 mx-auto">
<div class="form-group">
<label for="item">Item:</label>
<input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
</div>
</div>
<div class="col-md-3 col-sm-12 mx-auto">
<div class="form-group">
<label for="charge">Item cost:</label>
<input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
</div>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="add-item" class="addBtn" type="button">+ item</button>
</div>
</div>
</div>
Here's what I did: I started by changing your architecture a bit by putting the input fields that contain the product name and price into a global item div. now, every product (item) will have its own name and price field!
Then with Jquery, if we click on add-item I take the first item I make an outerHTML and I add it to the div containing all the items
Then to get all items I created a button named get-items where when it pressed, I create an array, I browse all the items and for each item , I take its field name and the price field that I push in the array!
$("document").ready(function () {
$("#add-item").on('click', function () {
$('.add-items').append($('.add-items .item')[0].outerHTML)
})
$("#get-items").on('click', function () {
var arr = []
$.each($(".item"), function () {
arr.push({name: $(this).find('input').first().val(), cost:$(this).find('input').last().val()})
})
console.log(arr)
})
})
<!-- I presume you've included Jquery like this -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-12" id="items">
<div class="row add-items">
<div class="item">
<div class="col-md-6 col-sm-12 mx-auto">
<div class="form-group">
<label for="item">Item:</label>
<input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
</div>
</div>
<div class="col-md-3 col-sm-12 mx-auto">
<div class="form-group">
<label for="charge">Item cost:</label>
<input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="add-item" class="addBtn" type="button">+ item</button>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="get-items" class="addBtn" type="button">Get Items Array</button>
</div>
</div>
That's how you get the value of your text input values
document.getElementById("item").value
document.getElementById("charge").value
First of it would be good if you can post your JS code as well so I can assist you a little bit better.
Second I would not give the same elements the same ID everytime, the class is fine however.
Now you can get your inputs text using:
$(".your-input-class").map(function(){
return this.val();
});
To get the text of the last (e.g. newest) input element use:
$(".your-input-class").last().val();
Since I'm not sure what exactly you are trying to achieve at the moment I'll also leave this code:
// Access new item input text (if single input):
$("#item").val();
// Access new item input text (if multiple):
$("[name='item[]']").map(function(){ return this.val(); })
// Access charge input (if single input):
$("#charge").val();
// Access charge input (if multiple):
$("[name='charge[]']").map(function(){ return this.val(); })
$("#items").delegate("#charge", "blur", function(){
var value = $(this).val();
});
I have finally gotten a way to do it.
Related
I have this part of form field
When user click on the Add button will copy the above form field and user can add more in this field .
but when I add <div id="ownership"> above the code form it start to look like this
I need to put id=ownership because I want to use it in my jQuery function
<div id="ownership">
<div class="col-lg-12 mb-30 ">
<label for="add_owner"><b><span style="color:#e60000;">*</span> Name</b></label><br>
<input class="from-control" type="text" id="name" >
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Phone number</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="phone" >
</div>
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Emailn</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="email" id="email">
</div>
</div>
</div>
<div id="owner"></div>
<br>
<div class="col-md-12">
<button type="button" class="btn btn-success w-30 add_info f-r">Add</button>
</div>
<script>
$(document).ready(function(){
$(".add_info").click(function(){
var newForm = $("#ownership").clone();
$('input', newForm).val('');
$('owner').append(newForm);
});
});
</script>
How do I fix the code in order to achieve the image in number 1 ?
try this
<div class="row">
<div class="col-sm-6"> Text</div>
<div class="col-sm-6"> Text</div>
</div>
you need to apply this format then design will be properly according your desirable.
Try this way. Always use bootstrap col class inside row class then it will not cause unexpected result.
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
I want to add the values of apple,orange and mango , then want to get the value in total.
below is the code which I tried.
<div class="row col-12 " ngModelGroup="cntMap">
<div class="form-group col-6">
<label for="total">Total</label>
<div class="clearfix">
<input type="text" value="{{totalCount}}" class="form-control"
name="totalCnt" [maxlength]="30" placeholder="Total" #totalCnt="ngModel" ngModel
[(ngModel)]="form.totalCnt">
</div>
</div>
<div class="form-group col-6 ml-auto">
<label for="APPLE">Apple</label>
<div class="clearfix">
<input type="text" class="form-control" name="APPLE" [maxlength]="30" placeholder="Enter"
#APPLE="ngModel" ngModel [(ngModel)]="form.APPLE" (change)="getCount($event)">
</div>
</div>
<div class="form-group col-6 ml-auto">
<label for="ORANGE">Orange</label>
<div class="clearfix">
<input type="text" class="form-control" name="ORANGE" [maxlength]="30" placeholder="Enter"
#ORANGE="ngModel" ngModel [(ngModel)]="form.ORANGE" (change)="getCount($event)">
</div>
</div>
<div class="form-group col-6 ml-auto">
<label for="MANGO">Mango</label>
<div class="clearfix">
<input type="text" class="form-control" name="MANGO" [maxlength]="30" placeholder="Enter"
#MANGO="ngModel" ngModel [(ngModel)]="form.MANGO" (change)="getCount($event)">
</div>
</div>
</div>
In component.ts file
getCount(event: any) {
var c = event.target.value;
this.totalCount += parseInt(c);
console.log("totalCount ", this.totalCount );
}
Problem:
When I add the value in the input , its adding the count like:
10+10+10=30
After that when I change the Apple value fron 10 to 8, the total value is like:
10+10+10+8=38
Which means without clearing the data from input box, it is adding the value 8.
Can anybody help me to clear this issue.
The flow which is happening currently is correct as the getCount() is adding the new value to existing total count.
What you should do instead is on every change event, re-add the values from all three input fields.
getCount(event: any) {
this.totalCount = parseInt(this.form.APPLE) + parseInt(this.form.ORANGE) + parseInt(this.form.MANGO);
console.log("totalCount ", this.totalCount );
}
I have a HTML that looks like:
I am trying to get current parent closest object value.
In this case I'm trying to get values of owner_address, owner_name.
<div class = "form-group row">
<div class="col-xs-6 form-group">
<input id="owner_name" type="text></input>
</div>
<div class="col-xs-6 form-group">
<input id="owner_address" type="text></input>
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 form-group">
<input onclick="runFunction($(this))" id="update" type="text></input>
</div>
</div>
JS part where I try to get values.
<script>
function runFunction(thisObj){
var owner_name = thisObj.parent().closest('#owner_name').val()
#Gives me undefined.
}
</script>
I already tried selecting it using ID; it doesn't work in my case because the data are being rendered inside a modal; where each modals are unique. I want to get specific owner name inside my each unique modal; that is why I thought using $(this) would be convenient.
try this
var owner_name = thisObj.parent().parent().closest('.form-group').find('#owner_name).val()
try this demo: https://jsfiddle.net/xianshenglu/4nt42cso/4/
i change the js,if you use id selector you don't have to use other selectors.
function runFunction(thisObj){
var owner_name = $('#owner_name').val()
alert(owner_name);
}
also change your html,just correct the syntax error.for example,there should not be code like this:</input>,,,,
<div class="form-group row">
<div class="col-xs-6 form-group">
<input id="owner_name" type="text" />
</div>
<div class=" col-xs-6 form-group ">
<input id="owner_address " type="text" />
</div>
</div>
<div class="form-group row">
<div class="col-xs-6 form-group">
<input onclick="runFunction($(this))" id="update" type="text" />
</div>
</div>
Put this in your fucntion and check it return desired value or not.
thisObj.parent().parent().parent().find( "#owner_name" ).val();
I have a simple page with 2 fields. I enter the goal name and the use tab to navigate to the next field and then hit the down arrow key to select the Public Group value and when I click the save button, the value of the picklist is setting to Individual which is incorrect. I am not exactly sure how to make the $scope variable pick the updated value from the dropdown
Here's the fiddle
<div ng-app>
<div class="container" ng-controller="goalCtrl">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">New Record</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label for="goalName" class="control-label">Name</label>
<input type="text" class="form-control" id="goalName" placeholder="Goal Name" ng-model="goalie__goal__c.Name">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="fulfilment" class="control-label">Fulfilment</label>
<select class="form-control" id="fulfilment" ng-model="goalie__goal__c.goalie__Fulfilment__c">
<option selected>Individual</option>
<option>Public Group</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<center>
<button class="btn btn-success" ng-click="save()"> Save and add critera</button>
<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
</center>
</div>
</div>
</div>
</div>
</div>
</div></div>
Controller
function goalCtrl($scope) {
$scope.save = function() {
alert(JSON.stringify($scope.goalie__goal__c));
}
}
Update
I updated the controller where I am setting the value to Individual explicitly and then when I hit the save button all the values are updated correctly in the $scope. Not sure why its not working it the initial case.
function goalCtrl($scope) {
$scope.goalie__goal__c = {};
$scope.goalie__goal__c.goalie__Fulfilment__c = 'Individual';
$scope.save = function() {
alert(JSON.stringify($scope.goalie__goal__c));
}
}
I have an html structure similar to the one below
<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" value="" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
I would like to loop through each of the .fact classes and then get the value of each input type=text
$('.fact').each(function(i){
console.log(this.$('input[name=fact]').val());
});
Running the code above gave me an undefined error, how would I run a loop through all .facts and then get value of the input[type=text]; I need to be able to get it exactly in this manner as I would be adding more input fields inside each div.
input elements has class .fact. you can simple iterate over input elements with class .fact by modifying the selector:
$('input.fact').each(function(i){
console.log($(this).val());//or this.value
});
for iterating over div elements:
$('div.fact').each(function(i){
console.log($(this).find('input').val());
});
The class .fact is quite overused in your markup; it is not clear whether you're referring to div.fact or input.fact. And there's another class that might cause confusion: input.Fact. So I have provided one of the possible ways you can approach this:
$('div.fact').each(function() {
console.log( $(':text', this).val() );
});
Of course, this code snippet is useless without an event. For example you may have a button which after the user has provided input the user would then click the button to fire up this code snippet as follows:
$('button').on('click', function() {
//above code
});
$('div.fact').each(function() {
console.log( $(':text', this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" value="Test 1" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="Test 2" class="fact form-control fact-title">
</div>
</div>
</div>
</div>