How to increment input box on add button - javascript

I want to increment my input box,
Its incrementing and also splicing but the problem is when i enter value in one box the same is replaced in the other.I think its due to ngModel.Can anyone please help me.Thnaks.
<div class="form-group row text-right" *ngFor='let row of vipInput'>
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" [(ngModel)]="data.vipInput" id="email" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeVipInputs(index)">Remove</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" (click)="vipInputIncrement('val')">
<i class=" fa fa-plus"></i>
</button>
My ts,(I am using angular2)
vipInputIncrement(val) {
this.vipInput.push({'val':''});
}
removeVipInputs(k) {
this.standardInput.splice(k,1);
}

Your ng-model should be something inside this row,
<div class="form-group row text-right" *ngFor='let row of vipInput'>
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" [(ngModel)]="row.val" id="email" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeVipInputs(index)">Remove</button>
</div>
</div>
</div>
</div>
I think it should be row.val, but you can decide what you want to show

Related

Add data to dynamic table from modal form

I have a page that contains a form to collect some info. As part of that is a table where I'm trying to add rows of data from a modal form. Eventually, everything would be submitted to a SQL database.
Effectively, the whole form looks like:
Field 1
Field 2
Field 3
Field 5
Field 6
Field 7
Field 8
Delete
First
row
button
Second
row
Field 9
Submit
So field 1-3 would be appended to the beginning of each row upon submission to the SQL DB and 9 to the end.
The issue I'm having is getting the data entered in fields 5-8 on the modal form to appear in the table. What would be the best way to achieve this? I'm new to this so any help would be great.
I've had a look around and I see lots of way to get data out of a table to a modal form or to enter through fields in the table and add a new row that way like this (Add/Delete table rows dynamically using JavaScript) but I'd prefer to use a modal as my form for the table will end up being quite big.
HTML Form
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span> <br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
Modal
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form name="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<textarea class="form-control" name="components" id="components" required></textarea>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="classification" id="classification" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="button" class="btn btn-primary add-modal-waste" data-dismiss="modal"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>
</div>
</div>
move modal outside the form into a separate form
add submit listener to it (also add id and disable modal dismiss)
on modal form submit, validate data and create and append a table row, in which also add hidden inputs with values in a form of an array (userEntry[0][reference] etc.)
close modal, reset modal form
$(document).ready(function() {
let counter = 0;
$('#userEntry').on('submit', function(e) {
e.preventDefault();
const rows = [];
$.each($(this).serializeArray(), function(i, field) {
if (i > 0 && field.name === rows[rows.length - 1].name) {
rows[rows.length - 1].value += ';' + field.value;
} else {
rows.push(field);
}
});
let list = '<tr>';
$.each(rows, function(i, field) {
list += '<td>' + field.value + '<input type="hidden" name="userEntry[' + String(counter) + '][' + field.name + ']" value="' + field.value + '"/>' + '</td>';
});
list += '<td><button class="btn btn-warning" onclick="return this.parentNode.parentNode.remove();">delete</button></tr>';
$('#userList tbody').append(list);
$('#AddModal').modal('hide');
counter++;
$(this)[0].reset();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal" data-target="#AddModal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span>
<br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
</div>
</form>
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="components" name="components" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="classification" name="classification" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="submit" class="btn btn-primary add-modal-waste"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>

How to show/hide a model in form?

In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model
Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

Javascript how to receive dates from a plain text into a formulary

I need help with this code..
I need to get date in those inputs from an external plain text to fill the fields..
I have read in many forums but I have no clue how to do that... if someone of you guys could help would be helpfull!
Thanks in advance..
Here's What I have:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post" name="ibisaserver">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaz:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">Direccion IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mascara Subred : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Direccion Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Direccion Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Guardar" class="btn btn-success btn-sm" onclick=" this.form.action ='/ibisaserver/' " title="Guardar"><i class="fa fa-save"></i> Guardar</button>
<button type="submit" name="Probar" class="btn btn-success btn-sm" onclick=" this.form.action ='/probarconexion' " title="Probar Conexión"><i class="fa fa-check"></i> Probar Conexión</button>
</div>
</form>
</div>
</div>
All I need to create an external plain text and the information there should appears on those fields.
Sorry for my bad english.
First: you have to load the text file using xmlHttp (if available on client system elsewhere you may use FileReader):
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', 'yourfile.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
second: if you have wrote data in different lines, split it to an array:
var myarray = mytext.split("\n");
and finally use the array to fill the form fields.

how to add the multiple input text value in jquery

//my jquery
//get the amount and calculate the total amount
$('#dynamicDiv').on('keyup', '.getAmount', function(event) {
var total = 0;
$(this).each(function() {
total += parseInt(this.value,10);
});
<div id="dynamicDiv">
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
</div> <!-- parent div end -->
<div class="form-group">
<div class="row ">
<div class="col-md-6 col-md-offset-4">
<div class="form-group">
<label class="col-md-5 control-label"><b>Allowance Total:</b> </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control totalAmount">
</div>
</div>
</div>
</div>
</div>
i feel this is complex, i want to add the multiple input text value and display in the total amount text value.so that the total sum of the input value. I have jQuery what's wrong with this. any help would be appreciated.
In $(this).each(function() {, this will return element on which event is invoked.
Use$('.getAmount') selector to get value of all the elements having class as getAmount
Note: Also use input event instead of keyup
$('#dynamicDiv').on('input', '.getAmount', function(event) {
var total = 0;
$('.getAmount').each(function() {
total += parseInt(this.value, 10) || 0;
//consider || condition as `parseInt('')` is `NaN` or use `Number(this.value)`
});
$('.totalAmount').val(total);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="dynamicDiv">
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
</div>
<!-- parent div end -->
<div class="form-group">
<div class="row ">
<div class="col-md-6 col-md-offset-4">
<div class="form-group">
<label class="col-md-5 control-label"><b>Allowance Total:</b>
</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control totalAmount">
</div>
</div>
</div>
</div>
</div>

Angular UI Bootstrap Input-Group-Button - darn floating button

I have a form that i have just added a bootstrap datepicker to and using an input-group-button.
The problem I have is that the button floats off to the right at the extent of the containing div.
The button in question is the button to the right of TargetDate.
I have been following instructs at TutorialsPoint
JSFiddle here JSFiddle
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select ng-model="formData.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select> <span class="error" ng-show="submitjobform.category.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="assignee" class="col-sm-2 control-label">Assignee</label>
<div class="col-sm-10">
<select ng-model="formData.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select> <span class="error" ng-show="submitjobform.assignee.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="col-sm-10">
<div class="input-group">
<input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /col-sm-10 -->
</div>
<!-- form group -->
<div class="form-group">
<div class="col-sm-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div>
</div>
</form>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</section>
Any assistance gratefully appreciated
Simon
There's a couple things that can help you here:
Columns are meant to be wrapped by rows. The default bootstrap grid is a grid of 12 columns.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
So with that in mind, you can see how you can control the placement PER row of your elements.
As it stands your last div is set to a col-sm-10. This column is holding your input for your target date as well as the button that's misbehaving.
Below is a modification of your troubled area with a fiddle. You had a span tag open too long as well as missing a "form-control" class.
http://jsfiddle.net/Levy0k2f/
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn"></span>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default" ng-click="vm.open($event)"> <i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
Update for fixing of button, the button was outside the span class.
http://jsfiddle.net/k0f598hr/
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>

Categories