I have created Dynamic Add / Remove fields. Everything is working perfectly. I want sum of values from Amount field to be displayed on real time basis using JavaScript. I have tried but am unable to do. I am not much familiar with JavaScript.
Following is code:
var i = 0;
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
return false;
});
});
var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>';
//add input
$('#add-allocation-fields').click(function() {
$(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
i++;
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-header text-center">
<b>Allocation of Funds</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control" name="allocate_items[]">
</div>
</div>
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control code" id="code" name="allocate_amount[]">
</div>
</div>
<div class="col-2">
<button type="button" class="btn btn-success" id="add-allocation-fields">Add</button>
</div>
</div>
<div id="fund-allocation-fields">
</div>
<small class="form-text text-muted"><i>Total amount must be equal to the goal amount.</i></small>
<div id="sum"></div>
</div>
</div>
You can use add keyup event listener and calculate sum as:
function calculateSum() { //Add a calculateSum function
var sum = 0;
$("input[name='allocate_amount[]']").each(function() {
sum += +this.value || 0;
});
$("#sum").text(sum);
}
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
calculateSum(); //Call calculateSum to update the sum valaue
return false;
});
});
$("body").on("keyup", "input[name='allocate_amount[]']", calculateSum); //update when keyup
Demo:
var i = 0;
jQuery(document).ready(function($) {
function calculateSum() {
var sum = 0;
$("input[name='allocate_amount[]']").each(function() {
sum += +this.value || 0;
});
$("#sum").text(sum);
}
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
calculateSum();
return false;
});
});
var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>';
//add input
$('#add-allocation-fields').click(function() {
$(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
i++;
return false;
});
$("body").on("keyup", "input[name='allocate_amount[]']", calculateSum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-header text-center">
<b>Allocation of Funds</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control" name="allocate_items[]">
</div>
</div>
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control code" id="code" name="allocate_amount[]">
</div>
</div>
<div class="col-2">
<button type="button" class="btn btn-success" id="add-allocation-fields">Add</button>
</div>
</div>
<div id="fund-allocation-fields">
</div>
<small class="form-text text-muted"><i>Total amount must be equal to the goal amount.</i></small>
<div id="sum"></div>
</div>
</div>
I think you can do it with this code:
function calcAmount(){
var amount = 0;
$('input[name="allocate_amount[]"]').each(function(){
amount = amount + $(this).val();
});
return amount;
}
jQuery(document).ready(function($) {
$("input[name="allocate_amount[]]").blur(function(){
$("#sum").html(calcAmount());
});
});
Okay, I try to update your code: and it works fine:
main changes:
- assign ids to input fields
- make changes in function
have a look to jsfiddle
https://jsfiddle.net/dupinderdhiman/ygvphmxq/31/
Main changes:
var sum = eval($('#value1').val()) + eval($('#value2').val());
$('#sum').text(sum);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div class="card">
<div class="card-header text-center">
<b>Allocation of Funds</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-5"><label><b>Allocation Items</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-5"><label><b>Amount</b> <b style="color:#FF0000;">*</b></label></div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control" id='value1' name="allocate_items[]">
</div>
</div>
<div class="col-5">
<div class="form-group">
<input type="text" class="form-control code" id='value2' name="allocate_amount[]">
</div>
</div>
<div class="col-2">
<button type="button" class="btn btn-success" id="add-allocation-fields">Add</button>
</div>
</div>
<div id="fund-allocation-fields">
</div>
<small class="form-text text-muted"><i>Total amount must be equal to the goal amount. <span id="sum"></span></i></small>
</div>
</div>
<script type="text/javascript">
var i = 0;
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on('click', '#remove-allocation-fields', function(event) {
event.preventDefault();
$(this).parent().fadeOut(300, function() {
$(this).parent().empty();
return false;
});
});
var rows = '<div class="all-allocation-fields"><div class="row"><div class="col-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]"></div></div><div class="col-5"><div class="form-group"><input type="text" class="form-control code" id="code" name="allocate_amount[]"></div></div><div class="col-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields">Remove</button></div></div></div>';
//add input
$('#add-allocation-fields').click(function() {
debugger;
$(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
i++;
var sum = eval($('#value1').val()) + eval($('#value2').val());
$('#sum').text(sum);
return false;
});
});
</script>
</body>
</html>
Related
$(document).ready(function() {
function getData1() {
var innerhtml1 = $('.load1').html();
$('.main_div').append(innerhtml1);
}
getData1();
$(document).on('click', '.add_question', function() {
let lengthQstn = $('.main_div').children().length;
let questionHtml = $('.load1').html();
let appendQstn = questionHtml.replace(/0/g, lengthQstn).replace(/add_question/g, "remove_question").replace(/add question/g, "remove question");
$('.main_div').append(appendQstn);
})
$(document).on('click', '.add_option', function() {
var dataParent = $(this).attr('data-parent');
let lengthOpt = $("#option_" + dataParent).children().length;
lengthOpt++;
var dataParent = $(this).attr('data-parent');
let optionHtml = $('.load2').html();
let appendOpt = optionHtml.replace(/count/g, lengthOpt).replace(/0/g, dataParent);
$("#option_" + dataParent).append(appendOpt);
})
$(document).on('click', '.remove_question', function() {
var dataParent = $(this).attr('data-parent');
$("#question_" + dataParent).remove();
})
$(document).on('click', '.remove_option', function() {
var dataParent = $(this).attr('data-parent');
var dataIndex = $(this).attr('data-id');
$("#row_" + dataParent + '_' + dataIndex).remove();
})
})
.hide {
display: none;
}
.remove_option,
.remove_question {
background-color: rgb(204, 177, 177);
}
.add_question,
.add_option {
background-color: rgb(201, 233, 222);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<div class="container">
<center>
<h2>New Form</h2>
</center>
<div class="main_div">
</div>
</div>
<div class="load1 hide">
<div class="parent_div mb-5 mt-5" id="question_0">
<div class="div1">
<div class="row">
<div class="col-6">
<label id="question_0">Question_0</label>
<input type="text" name="question_0" id="question_0" class="form-control">
</div>
<div class="col-3">
<button id="add_question_0" class="form-control add_question mt-4" data-parent="0">add_question</button>
</div>
</div>
</div>
<div class="div2" id="option_0">
<div class="row" id="row_0_1">
<div class="col-6">
<label id="option_0_1">option_0_1</label>
<input type="text" name="option_0_1" id="option_0_1" class="form-control">
</div>
<div class="col-3">
<button id="add_option_0" class="form-control add_option mt-4" data-parent="0">add
option</button>
</div>
</div>
<div class="row" id="row_0_2">
<div class="col-6">
<label id="option_0_2">option_0_2</label>
<input type="text" name="option_0_2" id="option_0_2" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="load2 hide">
<div class="row" id="row_0_count">
<div class="col-6 option_0_count">
<label id="option_0_count">option_0_count</label>
<input type="text" name="option_0_count" id="option_0_count" class="form-control">
</div>
<div class="col-3">
<button id="remove_option_count" class="form-control remove_option mt-4" data-parent="0" data-id="count">remove option</button>
</div>
</div>
</div>
I have made a page for dynamically appending input fields for new questions, as well as new options.
All are input fields only, I have to generate an index for the fields.
But, when I click on "add option" the options input fields are appending but the index is not being generated correctly; also I have to generate an index similarly for the buttons too. Please help with this part.
Also, I have to dynamically remove the added option fields too when clicked on "remove option" button, I have commented it as of now.
I'm trying to submit a form. I have a binding dropdown list and an input field. The dropdown list has three input fields. 0 = pending, 1 = accepted, and 2 = denied. I want to store data if the dropdown value is not 0/pending. If the dropdown is changed/ not pending or the comment input field have not empty, then the Save button enables. Otherwise, the save button is disabled.
function success() {
if (document.getElementById("textsend").value === "") {
document.getElementById('button').disabled = true;
} else {
document.getElementById('button').disabled = false;
}
}
<div class="row border-top pt-2">
<div class="col-md-4">
<span>Decision</span><span asp-validation-for="Heating.Status"></span>
<select asp-for="Heating.Status" asp-items="Html.GetEnumSelectList<ApplicationDecision>()" class="form-control">
<option></option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Comments</span><span></span>
<textarea class="form-control " id="textsend" onkeyup="success()" style="height:100px" maxlength="2000"></textarea>
</div>
</div>
<div class="row border-top p-2">
<div class="col">
<input type="submit" id="button" value="Save" class="btn btn-blueTwo float-right" disabled />
</div>
</div>
But I can't use the dropdown list to add these conditions. Couldn't you please help me?
Finally, I solved this problem.
<script>
$(document).ready(function () {
$('.save-btn').attr('disabled', true);
$('#CommentResponse').change(function () {
let cmtData = $("#CommentResponse").val();
if (cmtData !=null ) {
$('.save-btn').attr('disabled', false);
}
if(cmtData == "")
{
$('.save-btn').attr('disabled', true);
}
})
$('#StatusResponse').change(function () {
let statusData= $(this).val();
if (statusData != 0) {
$('.save-btn').attr('disabled', false);
}
else
{
$('.save-btn').attr('disabled', true);
}
})
});
</script>
<div class="row border-top pt-2">
<div class="col-md-4">
<span>Decision</span><span asp-validation-for="BurnOut.Status"></span>
<select asp-for="BurnOut.Status" id="StatusResponse" asp-items="Html.GetEnumSelectList<ApplicationDecision>()" class="form-control ">
<option></option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Comments</span><span asp-validation-for="BurnOut.Remarks"></span>
<textarea class="form-control " id="CommentResponse" asp-for="BurnOut.Remarks" style="height:100px" maxlength="2000"></textarea>
</div>
</div>
<div class="row border-top p-2">
<div class="col">
<input type="submit" value="Save" class="btn btn-blueTwo float-right save-btn" />
</div>
</div>
I have a page that displays list of boxes, when i search once it gives me the result perfectly, when i search again, nothing is shown at all
SEARCH BOX:
<form class="search-form">
<input type="text" id="searchfield" class="input-medium search-query" placeholder="Search">
<button type="submit" class="btn">Search</button>
</form>
HTML:
<div class="col-md-4 col-sm-6">
<div class="mybox">
<div data-title="Titleshoudbehere" class="myitem">
<a target="_blank">
<div class="mytitle">
<p>Title is here</p>
</div>
<div class="footer">
<p>#hashtag </p>
</div>
</a>
</div>
</div>
</div>
JS:
$('.search-form').on('submit', function() {
return false;
});
$('.search-form .btn').on('click', function(e) {
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.mybox .mytitle').each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.col-md-4.col-sm-6').fadeOut();
else $this.closest('div.col-md-4.col-sm-6').fadeIn();
});
});
I've just copy-pasted your code into a snippet and it seems to work fine.
Try typing "Title" and then typing "Foo", and then "Title" again for instance:
$('.search-form').on('submit', function() {
return false;
});
$('.search-form .btn').on('click', function(e) {
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.mybox .mytitle').each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.mybox').fadeOut();
else $this.closest('div.mybox').fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="search-form">
<input type="text" id="searchfield" class="input-medium search-query" placeholder="Search">
<button type="submit" class="btn">Search</button>
</form>
<div class="col-md-4 col-sm-6">
<div class="mybox">
<div data-title="Titleshoudbehere" class="myitem">
<a target="_blank">
<div class="mytitle">
<p>Title is here</p>
</div>
<div class="footer">
<p>#hashtag </p>
</div>
</a>
</div>
</div>
</div>
I have three sections in a form, the first one contains one input and the second contains three inputs and the third contains a checkbox. How to
disable the two sections if checkbox is checked
disable the checkbox and a section if I tapped a text in the other section
enable the three sections if all of them are empty
I must have only one active section everytime.
What I did is not the solution because there is a problem in the second section. if only one input is empty in this section all the other inputs are enabled. any one can help me please.
Thanks and sorry about my english
document.getElementById("client").onblur = function () {
if (this.value.length > 0) {
document.getElementById("FirstName").disabled=true;
document.getElementById("LastName").disabled=true;
document.getElementById("Email").disabled=true;
document.getElementById("standard").disabled=true;
}else {
document.getElementById("FirstName").disabled=false;
document.getElementById("LastName").disabled=false;
document.getElementById("Email").disabled=false;
document.getElementById("standard").disabled=false;
}
}
document.getElementById("FirstName").onblur = function () {
if (this.value.length > 0) {
document.getElementById("client").disabled=true;
document.getElementById("standard").disabled=true;
}else {
document.getElementById("client").disabled = false;
document.getElementById("standard").disabled = false;
}
}
document.getElementById("LastName").onblur = function () {
if (this.value.length > 0) {
document.getElementById("client").disabled=true;
document.getElementById("standard").disabled=true;
}else {
document.getElementById("client").disabled = false;
document.getElementById("standard").disabled = false;
}
}
document.getElementById("Email").onblur = function () {
if (this.value.length > 0) {
document.getElementById("client").disabled=true;
document.getElementById("standard").disabled=true;
}else {
document.getElementById("client").disabled = false;
document.getElementById("standard").disabled = false;
}
}
document.getElementById("standard").onblur = function () {
if (this.checked) {
document.getElementById("client").disabled=true;
document.getElementById("FirstName").disabled=true;
document.getElementById("LastName").disabled=true;
document.getElementById("Email").disabled=true;
}else {
document.getElementById("client").disabled=false;
document.getElementById("FirstName").disabled=false;
document.getElementById("LastName").disabled=false;
document.getElementById("Email").disabled=false;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="form-group col-md-12">
<label>Search Client</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<div class="input-group custom-search-form margin-bottom">
<input id="client" name="client" type="text" class="form-control input-sm" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="form-group col-md-12">
<label>New Client</label>
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<input type="text" class="form-control input-sm" id="FirstName" placeholder="First Name">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control input-sm" id="LastName" placeholder="Last Name">
</div>
<div class="form-group col-md-4">
<input type="email" class="form-control input-sm" id="Email" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="checkbox margin-bottom">
<label>
<input id="standard" type="checkbox" value="">Standard
</label>
</div>
It sounds like you may want try the focus listener instead of the on Blur listener.
https://developer.mozilla.org/en-US/docs/Web/Events/focus
The second element seems to work when I entered in values for all of the fields. It looks like it's checking the length of what was entered.
I can't seem to get this to work for a project I'm doing. Basically I'm trying to get the values in the "Revenue" fields to total at the bottom in the "Total Revenue" field.
I've made a JSFiddle which hopefully will make it easier to understand-
HTML markup:
<div class="form-group">
<label class="control-label col-md-2">April</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="AprilInput" placeholder="eg. 35,328" type="text" id="AprilInput"></input>
</div>
</div>
<label class="control-label col-md-1">Revenue</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="Output" id="AprilOutput" placeholder="0" type="text" readonly></input>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">May</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="MayInput" placeholder="eg. 35,328" type="text" id="MayInput"></input>
</div>
</div>
<label class="control-label col-md-1">Revenue</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control1" name="Output" id="MayOutput" placeholder="0" type="text" readonly></input>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">June</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="JuneInput" placeholder="eg. 35,328" type="text" id="JuneInput"></input>
</div>
</div>
<label class="control-label col-md-1">Revenue</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control1" name="Output" id="JuneOutput" placeholder="0" type="text" readonly></input>
</div>
</div>
</div>
<br/>
<span class="form-horizontal">
<div class="row">
<div class="col-lg-12">
<div class="widget-container fluid-height clearfix">
<div class="heading">
<i class="icon-reorder"></i>Annual Total
</div>
<div class="widget-content padded">
<div class="form-group">
<label class="control-label col-md-6">Total Revenue</label>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">$</span><input class="form-control" name="TotalOutput" id="TotalOutput" placeholder="0" type="text" readonly></input>
</div>
</div>
</div>
You could tidy the code up a little:
function SetupInput(obj,output,sumfunction){
$(obj).keyup(function(){
var n = parseInt($(this).val());
var n = this.value.replace(/,/g, "");
if(n <= 155000) {
$(output).val(numberWithCommas((n/100*70).toFixed(0)));
}
else if(n <= 175000) {
$(output).val(numberWithCommas((n/100*75).toFixed(0)));
}
else {
$(output).val(numberWithCommas((n/100*80).toFixed(0)));
}
sumfunction();
});
}
SetupInput($('#AprilInput')[0],$('#AprilOutput')[0],calculateSum);
SetupInput($('#MayInput')[0],$('#MayOutput')[0],calculateSum);
SetupInput($('#JuneInput')[0],$('#JuneOutput')[0],calculateSum);
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".form-control1").each(function() {
//add only if the value is number
var value=this.value.replace(',','');//remove ','
if(!isNaN(value) && value.length!=0) {
sum += parseFloat(value);
console.log(this.id,sum);
}
});
//.toFixed() method to roundoff the final sum
$("#TotalOutput").val(sum.toFixed(0));
}
Check out the jsfiddle: http://jsfiddle.net/2jY6P/43/
You are looping though Output tag. Change it to .form-contol:
$(".form-control").each(function() { /* ... */ }
And not .html, but .val():
`$("#TotalOutput").val(sum.toFixed(0));`
i edited you code: http://jsfiddle.net/2jY6P/38/
changed:
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$("input[name='Output']").keyup(function(){
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$("input[name='Output']").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method to roundoff the final sum
$("#TotalOutput").val(sum.toFixed(0));
}
$('Output') should be input $("[name='Output']")
$("#TotalOutput").html(sum.toFixed(0));
should be $("#TotalOutput").val(sum.toFixed(0));
I put some changes in
http://jsfiddle.net/2jY6P/39/
$(document).keyup(function() {
var sumRevenue = 0;
$.each($(".revenue"), function() {
var val = $.trim($(this).val());
if(val != "")
sumRevenue += parseFloat(val);
});
$("#sumrevenue").val(sumRevenue);
});
function calculateTotalREv(){
var totalRev = 0;
$("input[name='Output']").each(function() {
totalRev = eval(total+parseFloat($(this).val()));
});
alert(totalRev);
}
calculateTotalREv();