We Keep Coding

How can I add some dynamic fields and use them to get some math results?

I'm using spring MVC and I have a form with dynamic field.
I can create several rows inside my form and each row has 4 input, like you can see below.
When I insert a number inside the second and third input field I want to multiply them and write the result into the fourth field.
How can I do it? Maybe using jQuery?
This is my code:
var riga = 0;
function aggiungiRiga() {
riga++;
var objTo = document.getElementById('rigaOfferta')
var divtest = document.createElement("div");
divtest.setAttribute("class", "removeclass" + riga);
var rdiv = 'removeclass' + riga;
divtest.innerHTML = '<div class="col-xs-5 col-sm-5 col-md-5"><div class="form-group"> <input type="text" class="form-control" id="descrizione_"' + riga + '" name="descrizione[]" value="" placeholder="Descrizione"></div></div><div class="col-xs-2 col-sm-2 col-md-2 col-md-offset-1"><div class="form-group"><input type="number" min="0" step="0.01" class="form-control" id="prezzo_"' + riga + '" name="prezzo[]" value="" placeholder="Prezzo €"/></div></div><div class="col-xs-2 col-sm-2 col-md-2 "><div class="form-group"><input type="number" min="0" step="0.5" class="form-control" id="ore_"' + riga + '" name="ore[]" value="" placeholder="Numero Ore"/></div></div><div class="col-xs-2 col-sm-2 col-md-2 "><div class="form-group"><div class="input-group"> <input type="text" class="form-control" id="totale_"' + riga + '" name="Totale[]" value="" placeholder="0" readonly="readonly"/><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="rimuoviRiga(' + riga + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div>';
objTo.appendChild(divtest)
}
function rimuoviRiga(rid) {
$('.removeclass' + rid).remove();
}
<div id="rigaOfferta">
<jsp:text/>
</div>
<div class="col-xs-5 col-sm-5 col-md-5">
<div class="form-group">
<input type="text" class="form-control" id="descrizione_0" name="descrizione[]" value="" placeholder="Descrizione" required="required" />
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-md-offset-1">
<div class="form-group">
<input type="number" min="0" step="0.01" class="form-control" id="prezzo_0" name="prezzo[]" value="" placeholder="Prezzo €" required="required" />
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 ">
<div class="form-group">
<input type="number" min="0" step="0.5" class="form-control" id="ore_0" name="ore[]" value="" placeholder="Numero Ore" required="required" />
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 ">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="totale_0" name="Totale[]" value="0" placeholder="0" readonly="readonly" />
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="aggiungiRiga();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>

Since you are going to have multiple input fields I suggest you add a class to them, something like input-listener and then a data attribute like data-row="n" where n stands for the row number. Then you add an event listener using jQuery (since it's easier) like so:
$('.input-listener').on('change', function(){
var row = $(this).data('row'); //this way you know which row you are working with
//now that you have the row you can get all the inputs you want
var prezzo = $('#prezzo_' + row).val() || 0;
var ore = $('#ore_' + row).val() || 0;
$('#totale_' + row).val(prezzo * ore);
});
As I didn't test the code I am not sure if it works 100% but it can be a place to start. If you find any errors in the code let me know and I'll try and correct them.
The only thing is that if you add a new row you will have to rebind this event handler, so you'll have to find a way around that. Maybe add it in your aggiungiRiga() function.
Edit: I removed the e and changed it to this then I added the # to the ID of the jQuery selectors as I previously forgot to.

Bootstrap Datepicker dynamic form field add and remove

I have seen many examples about adding and removing normal text fields. BUt on date picker i got the problem.
I have these codes to choose the date.
I want to add more than one date so how i can new date fields dynamicly. And also remove. There are manye xamples only for adding.
<div class="form-group">
<label class="control-label col-md-3">Dates</label>
<div class="col-md-2">
<input class="form-control form-control-inline input-medium date-picker" size="16" type="text" value="" />
<span class="help-block">Choose a date </span>
</div>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-btn">
<button id="plus" class="btn btn-success" type="button" name="add">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
</div>
</div>
I got these code which is working for normal text field dynamic adding.
var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
minusButton = '<span class="btn input-group-addon delete-field">(-)</span>';
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.append(minusButton);
});
$('.fields').on('click', '.delete-field', function(){
$(this).parent().remove();
});
I am using bootstrap date picker and bootsrap version is 3.3.6.
Thanks in advance.

You can attach datepicker to the element after inserting it to the DOM.
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.find("input[type=text]").datetimepicker();
temp.append(minusButton);
});

jQuery getting previous input value

<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
</span>
</div>
</div>
I have HTML like above. My question is how to get the input value when I click on #btn-chat. I have been trying of jQuery functions like .prev() and .prevAll() but those didn't work for me.

Given that the input element has an id attribute it should be unique, so you can select it directly without the need to traverse the DOM:
$('#btn-chat').click(function() {
var inputVal = $('#btn-input').val();
// do something with the value here...
});
If, for whatever reason, you still want to use DOM traversal you can use closest() to get the nearest common parent to both elements, and then find():
$('#btn-chat').click(function() {
var inputVal = $(this).closest('.input-group').find('input').val();
// do something with the value here...
});
If you have multiple elements in your page with the same id attribute then your HTML is invalid and you would need to change it. In that case, use class attributes to identify and select the elements.

$("#btn-chat").click(function(){
var input_values = $(this).parent().parent().find("input").val();
alert(input_values);
});

As #RoryMcCrossan has pointed out, if you have multiple elements with the same id attribute, you would need to use a class attribute instead.
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
//OR $(this).parent().prev().val();
console.log( val );
});
});
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
console.log( val );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>

Angular.js values not being saved in the scope from textbox

I have this html markup:
<div data-ng-controller="VehicleProfileController">
<modal title="Add Vehicle Info" visible="showVehicleInfo">
<div class="container">
<div class="col-xs-4">
<div class="row">
Title <input type="text" ng-model="NewVMPTitle" class="form-control"/>
Miles <input type="text" ng-model="NewVMPMiles" class="form-control"/>
</div>
<div class="row">
<button ng-click="addVehicleData()" class="btn btn-success pull-right">Save</button>
</div>
</div>
</div>
</modal>
</div>
Then in the controller I have this:
$scope.addVehicleData = function () {
alert($scope.NewVMPTitle + ' ' + $scope.NewVMPMiles);
};
Both NEWVMPTitle and NewVPMMiles are empty, am I missing something?

I think it is better to parsing parameter with ng-model to controller instead of using scope to catch a value from ng-model
Title <input type="text" ng-model="item.title" class="form-control"/>
Miles <input type="text" ng-model="item.miles" class="form-control"/>
<button ng-click="addVehicleData(item)" class="btn btn-success pull-right">Save</button>
and this is for the js
$scope.addVehicleData = function (item) {
alert(item.title + ' ' + item.miles);
};

Need increment/decrement input fields name by clicking div- jQuery

I am novice in jQuery but trying to learn something very basic. I am just trying to build up auto increment/decrement input fields name inside a 'div' when CLICK add/remove button. Here is my HTML:
<div class="add_new_agent" style="display:none;">
<div class="col-xs-12" id="add_agent_div">
<span id="agent-remove" class="btn btn-danger glyphicon-remove "></span>
<label class="control-label "><small>AGENT INFORMATION <span id="count_agent">1</span></small></label>
<div class="row">
<div class="col-xs-6">
<input type="text" placeholder="Agent Name" name="agent_name_1" class="string required form-control">
</div>
<div class="col-xs-6">
<input type="text" placeholder="Agent Phone Number" name="agent_phone_1" class="string required form-control">
</div>
</div>
<input type="text" placeholder="Enter Agent Email Address" name="agent_email_1" class="string required form-control">
</div>
<button id="add_agent" type="button" class="btn">ADD MORE AGENT</button>
</div>
Here i am trying to build when click #add_agent then new #add_agent_div will appear and the fields name will increase and decrease fields names when click #agent-remove as well.
So far, i managed to add/remove new #add_agent_div but i cant increase/decrease the input fields name's last digit :(
Here is my jQuery code:
$('#add_agent').click(function(e){
var cloneDiv = $('.add_new_agent').find('#add_agent_div').clone(true);
$('.add_new_agent').find('#add_agent_div').after(cloneDiv);
});
$('#agent-remove').click(function() {
if (confirm('continue delete?')) {
$(this).parent('#add_agent_div').remove();
}
});

First of all, since you are cloning and appending the html elements, you should not use ids, since ids can not appear multiple times in a page. Instead you should use classes.
For your solution, you can do this:
$('#add_agent').click(function(e){
var $htmlTemplate = $('.add_new_agent').find('.add_agent_div:first').clone(true);
$htmlTemplate.find('.count_agent').text($('.add_new_agent').find('.add_agent_div').length+1);
$('.add_new_agent').append($htmlTemplate);
});
$('#agent-remove').click(function() {
if (confirm('continue delete?')) {
$(this).parent('.add_agent_div').remove();
$('.add_new_agent').find('.add_agent_div').each(function(e,i){
$(this).find('.count_agent').text($(this).index()+1);
});
}
});
Here is working demo:
http://jsfiddle.net/fk82uro5/3/

You could do something like this
$('#add_agent').click(function(e){
var currentNumber = /* parse this off the dom or keep track of the current number in your script */
var newDiv = '<div class="row">' +
'<div class="col-xs-6">' +
'<input type="text" placeholder="Agent Name" name="agent_name_' + currentNumber + '" class="string ..."' +
...;
$("#add_agent_div").append(newDiv);
})
$("#agent-remove").click(function() {
/* remove last div in add agent div */
})

You can go for something like this: http://jsfiddle.net/zo1r1s4f/1
HTML
<div class="add_new_agent">
<div class="col-xs-12" id="add_agent_div"> <span id="agent-remove" class="btn btn-danger glyphicon-remove "></span>
<label class="control-label "><small>AGENT INFORMATION <span id="count_agent">1</span></small>
</label>
<div class="row">
<div class="col-xs-6">
<input type="text" placeholder="Agent Name" name="agent_name_1" class="string required form-control">
</div>
<div class="col-xs-6">
<input type="text" placeholder="Agent Phone Number" name="agent_phone_1" class="string required form-control">
</div>
</div>
<input type="text" placeholder="Enter Agent Email Address" name="agent_email_1" class="string required form-control">
<button class="agent_remove" type="button" class="btn">Remove</button>
</div>
<button id="add_agent" type="button" class="btn">ADD MORE AGENT</button>
jQuery
$('#add_agent').click(function (e) {
var cloneDiv = $('.add_new_agent').find('#add_agent_div').clone(true);
$('.add_new_agent').find('#add_agent_div').after(cloneDiv);
});
$('.agent_remove').click(function () {
$(this).parent().remove();
});