We Keep Coding

How to calculate the final amount on keyup

I am using Codeignator, I am calculating the final amount. If any user enters the total amount that will calculate it and display in the final amount field.
I am adding the input field dynamically as well. I tried some code but it's not working.
I need to calculate using AJAX.
What I am trying to achieve is, This is my first page.
Now if any user enters the total amount something like this then it will display in the final amount field.
If the user wants to add more field the should click on add button and add the price and it will calculate it and display in the field box, I added in the 50.
same as on this.
Would you help me out in this?
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".row_set"); //Fields wrapper
var add_button = $(".add_row_click"); //Add button ID
var baseUrl = "http://localhost/test/";
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="row_set custom_fields"><input type="text" name="single_price[]" id="single_p_price' + x + '" placeholder="single price"> <input type="text" name="total_p_price[]" id="total_p_price' + x + '" placeholder="total amount"><div class="btn_row remove_field"> <span> - </span> Remove </div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
//$(this).parent('custom_fields').remove();
$(this).closest('.custom_fields').remove();
x--;
})
/*comment start here $(".medication_info").on('keyup', 'input[id^=total_p_price]', function() {
var that = $(this); // CHANGE HERE
var total_p_price = that.val();
$.ajax({
type: "POST",
url: baseUrl + "/Access_control/calculate_amt",
data: {
total_p_price: total_p_price
},
cache: false,
success: function(html) {
console.log(html);
var single_price = $('#final_amt').val(html);
}
});
});comment end here*/
$('.medication_info').on('keyup', 'input[id^=total_p_price]', function() {
var totalSum = 0;
$('input[id^=total_p_price]').each(function() {
var inputVal = $(this).val();
if ($.isNumeric(inputVal)) {
totalSum += parseFloat(inputVal);
}
});
$('#final_amt').val(totalSum);
});
});
<form>
<div class="medication_info">
<div class="row_set">
<input type="text" name="single_price[]" id="single_p_price" placeholder="single price">
<input type="text" name="total_p_price[]" id="total_p_price" placeholder="total amount">
</div>
<div class="btn_row add_row_click"> <span> + </span> Add </div>
<input type="text" name="final_amt" id="final_amt" placeholder="Final total">
</div>
<input type="submit" name="send" value="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Controller
public function calculate_amt()
{
$total_p_price=$this->input->post('total_p_price');
foreach ($total_p_price as $key => $value) {
$final_amt +=$value;
}
echo $final_amt;
}

Both jQuery and using AJAX to involve a server seems overkill for this operation.
//Find elements in HTML
var singleProductPriceInput = document.getElementById("single_p_price");
var totalProductAmountInput = document.getElementById("total_p_price");
var finalTotalInput = document.getElementById("final_amt");
var button = document.getElementById("submitter");
//Update function
function updatePrice() {
var singleProductPrice = parseFloat(singleProductPriceInput.value);
var totalProductAmount = parseFloat(totalProductAmountInput.value);
var result = (singleProductPrice * totalProductAmount);
if (!isNaN(result)) {
finalTotalInput.value = result.toFixed(2);
}
}
//Submit function
function submit() {
alert("Do your server stuff\nAJAX here");
}
//Bind event listeners
singleProductPriceInput.addEventListener("change", updatePrice);
singleProductPriceInput.addEventListener("keyup", updatePrice);
singleProductPriceInput.addEventListener("mouseup", updatePrice);
totalProductAmountInput.addEventListener("change", updatePrice);
totalProductAmountInput.addEventListener("keyup", updatePrice);
totalProductAmountInput.addEventListener("mouseup", updatePrice);
button.addEventListener("click", submit);
<form>
<div class="medication_info">
<div class="row_set">
<input type="number" name="single_price[]" id="single_p_price" placeholder="single price">
<input type="number" name="total_p_price[]" id="total_p_price" placeholder="total amount">
</div>
<div class="btn_row add_row_click"> <span> + </span> Add </div>
<input type="text" name="final_amt" id="final_amt" placeholder="Final total" readonly>
</div>
<input id="submitter" type="button" name="send" value="submit">
</form>

simple Javascript KeyUp Event calculation
$("input").keyup(function () {
var pr = $(this).data("price");
var name = $(this).data("name");
var qut = $(this).val();
var total = pr * qut;
$("#"+name).text(total);
});
$("#placeorder").click(function () {
var total = 0;
$('.t').each(function () {
total += Number($(this).text());
});
$('#total').text(total);
});
.t{
border:0px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Bone Burger:</td>
<td><input type="text" data-name="gold" data-price="28" size="1" /></td>
<td> * 28r.s<td>
<td>= <label id="gold" class="t" readonly ></label>r.s</td>
</tr>
<tr>
<td>Smoke Burger:</td>
<td><input type="text" data-name="sakti" data-price="29" size="1" /></td>
<td> * 29r.s<td>
<td>= <label id="sakti" class="t" readonly ></label>r.s</td>
</tr>
<tr>
<td>Voodoo Burger:</td>
<td><input type="text" data-name="taja" data-price="30" size="1" /></td>
<td> * 30r.s<td>
<td>= <label id="taja" class="t" readonly ></label>r.s</td>
</tr>
<tr>
<td>Ayhuaska Sour:</td>
<td><input type="text" data-name="gay" data-price="18" size="1" /></td>
<td> * 18r.s<td>
<td>= <label id="gay" class="t" readonly ></label>r.s</td>
</tr>
<tr>
<td>Beyond the Pale:</td>
<td><input type="text" data-name="chhash" data-price="10" size="1" /></td>
<td> * 10r.s<td>
<td>= <label id="chhash" class="t" readonly ></label>r.s</td>
</tr>
<tr>
<td>
<button id="placeorder">Place order</button>
</td>
</tr>
<tr>
<td><p>Total:<span id="total"></span></p></td>
</tr>
</table>

This might be what you want
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".row_set"); //Fields wrapper
var add_button = $(".add_row_click"); //Add button ID
var baseUrl = "http://localhost/test/";
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="row_set custom_fields"><input type="text" name="single_price[]" id="single_p_price' + x + '" placeholder="single price"> <input type="text" name="total_p_price[]" class="total_p_price" id="total_p_price' + x + '" placeholder="total amount"><div class="btn_row remove_field"> <span> - </span> Remove </div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
//$(this).parent('custom_fields').remove();
$(this).closest('.custom_fields').remove();
x--;
})
$(".medication_info").on('keyup', 'input[id^=total_p_price]', function() {
// Sum all the values in the total_p_price fields
var that = $(this);
$.ajax({
type: "POST",
url: baseUrl + "/Access_control/calculate_amt",
data: {
total_p_price: $(".medication_info .total_p_price").serialize()
},
cache: false,
success: function(html) {
console.log(html);
var single_price = $('#final_amt').val(html);
}
});
});
});
<form>
<div class="medication_info">
<div class="row_set">
<input type="text" name="single_price[]" id="single_p_price" placeholder="single price">
<input type="text" name="total_p_price[]" class="total_p_price" id="total_p_price" placeholder="total amount">
</div>
<div class="btn_row add_row_click"> <span> + </span> Add </div>
<input type="text" name="final_amt" id="final_amt" placeholder="Final total">
</div>
<input type="submit" name="send" value="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to delete last object of an input array?

I created a dynamic form which adds 3 new input fields if the user clicks a button. However, my delete button deletes the first added fields, which I don't want. How can I delete the last added input fields?
Below is my code for adding and deleting the fields.
$(document).ready(function () {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //initial count
$(add_button).click(function (e) {
e.preventDefault();
x++;
$(wrapper).append('<div id="names">Name: <input type="text" name="names[]"/></div>');
$(wrapper).append('<div id="ages">Age: <input type="text" name="ages[]"/></div>');
$(wrapper).append('<div id="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>');
});
$(wrapper).on("click", ".remove_person", function (e) {
e.preventDefault();
if(x > 0) {
$("#names").remove();
$("#ages").remove();
$("#numbers").remove();
x--;
}
})
});
Below is my code for the fields in the HTML.
<b>People:</b><br>
<div class="input_fields_wrap" id="input_fields_wrap">
<button class="add_field_button">ADD</button>
<button id="remove_person" class="remove_person">REMOVE</button>
<br>
</div>

Firstly, You're using duplicate id's. please use class names instead.
use the jquery's last function like below
$(document).ready(function () {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //initial count
$(add_button).click(function (e) {
e.preventDefault();
x++;
$(wrapper).append('<div class="names">Name: <input type="text" name="names[]"/></div>');
$(wrapper).append('<div class="ages">Age: <input type="text" name="ages[]"/></div>');
$(wrapper).append('<div class="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>');
});
$(wrapper).on("click", ".remove_person", function (e) {
e.preventDefault();
if(x > 0) {
$(".names").last().remove();
$(".ages").last().remove();
$(".numbers").last().remove();
x--;
}
})
});

An alternative to using class and .last() is to put the button into the person wrapper
To delete, use closest to remove the wrapper the button is in (so have a wrapper for each person)
$(document).ready(function () {
var x = 0; //initial count
$(".add_field_button").on("click",function (e) {
var $pWrapper = $('<div/>').addClass("person"); //Fields wrapper
e.preventDefault();
x++;
$pWrapper.append('<button type="button" class="remove_person">REMOVE</button>')
.append('<div class="names">Name: <input type="text" name="names[]"/></div>')
.append('<div class="ages">Age: <input type="text" name="ages[]"/></div>')
.append('<div class="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>')
.appendTo("#input_fields_wrap");
});
$("#input_fields_wrap").on("click", ".remove_person", function (e) {
e.preventDefault();
$(this).closest(".person").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>People:</b><br>
<div class="input_fields_wrap" id="input_fields_wrap">
<button type="button" class="add_field_button">ADD</button>
<br>
</div>

Dynamicall add two form fileds to form

I want add fisrst name and last name fields dynamically to my form. Currenltly I managed to add one field. but how can I add two fields once.
Ex: fname lastname
fname lastname (X remove)
fname lastname (X remove)
(+ add)
my code
html
below is my html code ser
<div class="input_fields_wrap">
<div><input type="text" name="mytext[]"></div>
// I want to add another field with this
</div>
<button class="add_field_button">Add More Fields</button>
js
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>');
}
});
$(wrapper).on("click",".remove_field", function(e){ e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

Well this will work for you:-
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var fname_lname = '<div>First Name:- <input type="text" name="fname"/>Last Name:- <input type="text" name="fname"/>Remove</div>'
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++; //text box increment
$(wrapper).append(fname_lname);
}
});
$(wrapper).on("click",".remove_field", function(e){ e.preventDefault(); $(this).parent().remove(); x--;
})
});
checkout the fiddle
https://jsfiddle.net/dhruv1992/em1je2cu/

So first, I removed the hardcoded HTML from your javascript. Then, I moved that to a HIDDEN template element, and just loaded its inner HTML as my template element -- by doing this, I can create as many elements as I might want.
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e) {
// Here, I load the template's HTML
var myFullTemplate = $(".fields-template").html();
''
e.preventDefault();
if (x < max_fields) {
x++; //text box increment
$(wrapper).append(myFullTemplate);
} else {
$(".add_field_button").hide();
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
if ($(".add_field_button").is(":hidden")) {
$(".add_field_button").show();
}
})
});
.fields-template {
display: none;
}
label {
font-weight: bolder;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<div>
<input type="text" name="mytext[]">
</div>
// I want to add another field with this
</div>
<button class="add_field_button">Add More Fields</button>
<div class="fields-template">
<div>
<label for="fname">First name:</label>
<input type="text" name="fname[]" />
<label for="lname">Last name:</label>
<input type="text" name="lname[]" />Remove
</div>
</div>
So, to do what you mention in your comment (remove both fields rather than one), simply edit your HTML template to suit your needs. Also, another change: when you hit your max number of items, the add button is hidden (and when you delete one, it shows again).

I am not able to apply color picker js(jscolor.js) on input field

Below is my code html code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jscolor-2.0.4/jscolor.js"></script>
<body>
<script>
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div>Case :<input type="text" name="mytext"> Color Picker : <input class="jscolor" name="c_picker"><br>Remove</div>');
}
});
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
<form>
DB-URl :
<input type="text" name="firstname"><br/>
Username:
<input type="text" name="lastname"><br/>
Password:
<input type="password" name="Password"><br>
Table Name:
<input type="text" name="t_name"><br>
Color column:
<input type="text" name="c_column"><br>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div>Case :<input type="text" name="mytext"> Color Picker : <input class="jscolor" name="c_picker"><br></div>
</div>
<input type="submit" value="Update" id="updating">
</form>
First Time color picker js is apply on input field but when I add more color picker field dynamically color picker js is not apply on next input field. Can anybody explain me why this is happening?

You could init the jsColor on the added input using :
new jscolor($('.jscolor').last()[0]);
NOTE : No need to loop through all the inputs.
$(document).ready(function() {
$('.add_field_button').click(function(e){
e.preventDefault();
$('form').append('<div>Case :<input type="text" name="mytext"> Color Picker : <input class="jscolor" name="c_picker"><br>Remove</div>');
new jscolor($('.jscolor').last()[0]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<form>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<br><br>
<div>Case :<input type="text" name="mytext"> Color Picker : <input class="jscolor" name="c_picker"><br></div>
</div>
</form>

Use jscolor() to bind the newly appended element:
$(document).ready(function () {
var max_fields = 10;
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function (e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div>Case :<input type="text" name="mytext">Color Picker : <input class="jscolor" name="c_picker"><br>Remove</div>');
var color = new jscolor($(wrapper).find('input.jscolor:last')[0]);
//$(wrapper).find('input.jscolor:last').each(function () {
//var color = new jscolor($(this)[0]);
//});
}
});
$(wrapper).on("click", ".remove_field", function (e) {
e.preventDefault();
$(this).parent('div').remove(); x--;
});
});

This is solved at this stackoverflow question:
using jscolor.js on dynamic input
The solution was to add:
$(document).ready(function() {
jscolor.installByClassName("jscolor");
});

This happens because the date picker is created when the document is loaded.
If you insert a new HTML element after the doc is loaded, you will need to assign a unique ID to each new element and attach the color picker manually using this code:
$("#idOfNewElement").colorpicker();

Adding removing input fields using jQuery

I am adding input field on clicking the button and at the same time giving remove button to remove the input field.However my remove button is not removing the input field instead it takes me to top of page...
<div class="input_fields_wrap">
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
<button class="add_field_button">Add More Locations</button>
</div>
</div>
and below is the jQuery to add more textbox when I click the button
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="form-group"><label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label><div class="col-md-3"> <input type="text" id="loc" name="Work_Location[]" class="form-control" ></div>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>

I have an example for you, you can do it easier
function closeMe(element) {
$(element).parent().remove();
}
function addMore() {
var container = $('#list');
var item = container.find('.default').clone();
item.removeClass('default');
//add anything you like to item, ex: item.addClass('abc')....
item.appendTo(container).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
<li class="default" style="display: none;">
<input type="text" /><span style="cursor: pointer;" onclick="closeMe(this);">close</span>
</li>
</ul>
<button onclick="addMore();">Add</button>

Also you can use this:
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
Hope this is helpful for you
Thanks

$(document).ready(function() {
var max = 10;
var wrp= $(".input_fields_wrap");
var addBtn = $(".add_field_button");
var x = 1;
$(addBtn ).click(function(e){
e.preventDefault();
if(x < max){
x++;
$(wrp).append('<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input">Preferred Work Location</label>
<div class="col-md-3">
<input type="text" id="loc" name="Work_Location[]" class="form-control" >
</div>
Remove</div>');
}
});
$(wrp).on("click",".remove_field", function(e){ /
e.preventDefault();
$(this).parent('div').remove(); x--;
})
});