Well, I'm trying to make a type of invoice.
Here's my problem : The invoice has various input boxes where the amount is typed by the user and there's "Total Charge"(input box) at the end of the list of those boxes. So what I want is that if some values(numeric) are filled in the the input boxes and a user click on the "Total Charge"(input box) the values are summed. How can I do it? I have used jQuery before. So, if possible can anyone explain how can I do it in jQuery?
Script so far
$('.charge').blur(function () {
var totalocharges = 0;
$('.charge').each(function() {
totalocharges += Number($(this).val());
});
$('#total_charges').val(totalocharges);
});
my view(just a part of it):
<div class="form-group col-md-offset-1 col-md-5">
<input type="number" class="charge form-control" id="amount1" name="amount1" value="<?php echo set_value('amount1'); ?>" placeholder="amount" required>
</div>
<div class="form-group col-md-offset-1 col-md-5">
<input type="number" class="charge form-control" id="amount2" name="amount2" value="<?php echo set_value('amount2'); ?>" placeholder="amount" required>
</div>
<div class="form-group col-md-offset-1 col-md-5">
<input type="text" class="form-control" id="total_charges" name="total_charges" value="<?php echo set_value('total_charges'); ?>" placeholder="net amount">
</div>
You could do something like this with jQuery.
In this example, your input boxes would have 'charge' class. And your total charge input the ID total-charges)
$('.charge').blur(function () {
var total_charges = 0;
$('.charge').each(function() {
total_charges += Number($(this).val());
});
$('#total-charges').val(total_charges);
});
Here you have a working code sample:
https://jsfiddle.net/0e8emcbu/
If you want to activate it with a button, then it would be like this:
https://jsfiddle.net/8cmL29xt/
Attach an event listener to the "Total charge" input box. For example, you can use "focus" event.
$("#total_charge").on('focus', function(){
//here you have to make calculations
//get values on all required input boxes
var value1 = $("#input_box1").val();
//another value
//sum (multiply, divide etc) values
val result = value1 + value2 + ...l
//change total_charge value
$("#total_charge").val(result);
});
Related
I'm trying to add 3 fields dynamically (2 text fields and 1 remove button). The add button is working fine. The problem is the remove function. It's only removing the remove button, but not the other 2 fields it should.
This is my html code:
<div class="col-lg-12">
<div class="field_wrapper form-group col-sm-12">
<div class="form-group col-sm-4">
<input type="text" name="id[]" value="" class="form-control"/>
</div>
<div class="form-group col-sm-4">
<input type="text" name="name[]" value="" class="form-control"/>
</div>
<div class="form-group col-sm-4">
Adicionar Valor
</div>
</div>
</div>
This is the javascript:
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
//var fieldHTML = '<div><input type="text" name="field_name[]" value=""/>Remover</div>'; //New input field html
var fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name[]" value="" class="form-control"/></div><div class="form-group col-sm-4">Remover</div></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
How can I fix this?
The problem is that you're removing the $(this).parent('div'), that is giving you the form-group of the button and not the intended .field_wrapper, what you can do instead is use the .closest('.field_wrapper') which will find the element you've added.
Check this fiddle, for more information.
Just changed:
$(this).parent('div').remove();
for:
$(this).closest('.field_wrapper').remove();
Use
$(this).parent('div').parent('div').remove()
Working fiddle
Firstly I wanna check the given value in textfield is Number or not.
But I have number of textfields ,the number is depending upon dynamic value from php&yii like as follows
<?php foreach($model->getData() as $donation){ ?>
Donation For <?php echo $donation['DonationName'];?>
<label><b>$</b> <input class="textfld3" style="width:75%" title="First Name" placeholder="Amount" type="text">
</label>
<?php } ?>
so I wanna get the value of the textfield or textfields in js..
I had also used the jsfunction as
var texts= $(".textfld3").map(function() {
return $(this).val();
}).get();
alert(texts);
but all the values are showing in alert box along with commas
how should i get the value of textfiled or textfields to check whether it is number or not in js.
Loop through all the textfield using $(".textfld3").each(function() { and find value of textfield one after another. If a textfield having a non numeric value then show alert message and will focus on that textfield.
$(".textfld3").each(function() {
var currentVal = $(this).val();
if(isNaN(currentVal)){
alert("Please enter numeric value");
$(this).focus();
return false;
}
});
From a quick view into your code, it looks to me, texts is an array, so you could run through this array
var texts= $(".textfld3").map(function() {
return $(this).val();
}).get();
for ( var i = 0; i < texts.length; i++ ) {
alert(texts[i]);
}
You have to pass key and value parameter in map function so you can return value of all text fields by value, here ele variable is value which is reference one element of that class selector
$("#btn").click(function(){
var texts= $(".textfld3").map(function(key,ele) {
return $(ele).val();
//return ele.value
}).get();
console.log(texts);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><b>$</b> <input class="textfld3" style="width:75%" title="First Name" placeholder="Amount" type="text">
</label>
<hr>
<label><b>$</b> <input class="textfld3" style="width:75%" title="First Name" placeholder="Amount" type="text">
</label>
<hr>
<label><b>$</b> <input class="textfld3" style="width:75%" title="First Name" placeholder="Amount" type="text">
</label>
<hr>
<label><b>$</b> <input class="textfld3" style="width:75%" title="First Name" placeholder="Amount" type="text">
</label>
<hr>
<button id="btn"> Get Values</button>
I am using javascript to adding two textbox values and store that value in same textbox. For that process am using onmouseenter event. When i enter mouse in that textbox that textbox values increasing each time but i need to avoid it. Here i posted my code can you please solve it,
function removeFormField() {
var count_id = document.getElementById("balance").value;
document.getElementById('balance').value = parseInt(count_id)+10;
}
HTML Code:
<div class="form-group">
<label for="firstname" class="col-sm-4 control-label">Balance amount</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="balance" name="balance" placeholder="Balance amount" onmouseenter="removeFormField();">
</div>
</div>
Use a flag to keep track of change
var allowChange = true;
function removeFormField() {
if(allowChange){
var count_id = document.getElementById("balance").value;
document.getElementById('balance').value = parseInt(count_id)+10;
allowChange = false;
}
}
<input type="text" class="form-control" id="balance" name="balance" placeholder="Balance amount" onkeypress="removeFormField()">
Only one change made on the input event. Changed to keypress and it is only called when you enter and input to field. and not when you click your mouse on to the field.
i Have created calculation Project .My code have input fields Name Estimate Property Tax . this input fields get two types of value .That Two types of value % and $ values. Now My inputs fields get % values Only .Not getting $ value.MY Old UI code:
<td>Estimate Property Tax </td>
<td>
<input name="propertytaxpc" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax; ?>" onChange="javascript:propertyTaxPcChanged(true)" />
%</td>
<td>Or $
<input name="propertytaxamt" type="text" size="8" maxlength="8" onChange="javascript:propertyTaxAmountChanged(true)" />
</td>
<td>
Now i have created this code single input value % value is default New Code:
<div class="row">
<div class="col-md-4 padding-rht bdy">
<label id="lblEstimatePropertyTax"class="pull-left"style="font-weight: 600">
Estimate Property Tax</label>
</div>
<div class="col-md-3 padding-rht">
<input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />
</div>
<div class="col-md-1 padding-lft">
<img src="Content/Images/percent.png" onclick="changeColor(event,this.src)" style="cursor:pointer"/>
</div>
MY script for ICON change:
function changeColor(event, _src) {
var fname = _src;
var ImageName = fname.substring(fname.lastIndexOf('/') + 1);
//alert(ImageName);
if (ImageName == "percent.png") {
$(event.target).attr("src", "Content/Images/RedDoller.png");
}
else {
$(event.target).attr("src", "Content/Images/percent.png");
}
}
Now MY UI i have used single input fields % and $ both value's load single input fields .Now i get % value. if i user change % to $ value also need to change. please help me i am getting % value only ? how to value change onclick function?
I'm not sure I fully understand but it appears that the value is being set server side by your php code.
value="<?php echo $dproperty_tax;?>"
using javascript to change the image doesn't go back to the server to replace the % value with the $ value. I would output two separate input fields to the DOM as you were before. But use javascript to show and hide the appropriate input box.
alternatively, you could use data attributes to hold both the percent and dollar values in the input and set the value using javascript.
<input name="propertytaxpc" class="txt" type="text" size="8" maxlength="8" data-percent="<?php echo $dproperty_tax;?>" data-dollar="<?php echo $TaxDollars;?>" value="<?php echo $dproperty_tax;?>" onChange="javascript:propertyTaxPcChanged(true)" />
then in your javascript code
var taxInput = $('input[name="propertytaxpc"]');
if (ImageName == "percent.png") {
$(event.target).attr("src", "Content/Images/RedDoller.png");
taxInput.val(taxInput.attr('data-dollar'));
}
else {
$(event.target).attr("src", "Content/Images/percent.png");
taxInput.val(taxInput.attr('data-percent'));
}
In my test case the user is given two options i.e ielts or toefl. If the user selects ielts then an input box opens and he enters his ielts score. What I'm looking for is to capture that value that is entered in the input box. Below is my code:
<div id='show-me' style='display:none' class="ds">
<label for="number" id="uel">IELTS:</label>
<input type="text" class="form-control" placeholder="Example:6.5" id="ranju" name="toefl" reuqired/>
</div>
<div id='touch-me' style='display:none'>
<label for="number" id="uel">TOFEL:</label>
<input type="text" class="form-control" name="fle" placeholder="Example:90" id="ranju" required/>
</div>
<script>
$('input[type=submit]').click(function () {
if (($('input[name=cgpa]').val() != '') && $('input[name=gre]').val() != '')) {
jQuery.noConflict();
$("#myModel").modal('show');
console.log($("input[name=test]:checked").val());
} else {
alert("Enter details");
}
});
</script>
Here is how it should work:
step 1: User clicks on one of the radio buttons
step 2: A text box
related to the radio button opens
step 3: The user enters a value
step 4: console.log(-----) should print the captured value
Recreate your html code:
<input type="radio" name="type" value="ielts"/> IELTS <input type="radio" name="type" value="tofel"/> TOFEL
<div id='show-ielts' style='display:none'>
<label for ="number" id="uel">IELTS:</label>
<input type="text" class="form-control" placeholder="Example:6.5" name="ielts" reuqired/>
</div>
<div id ='show-tofel' style='display:none'>
<label for ="number" id="uel">TOFEL:</label>
<input type="text" class="form-control" name="tofel" placeholder="Example:90" required/>
</div>
<br/>
<input type="submit" value="submit"/>
And then the javascript code:
$(document).ready(function() {
// listen the radio button changed event and display the target field.
$('input[name="type"]').change(function() {
$('#show-ielts, #show-tofel').hide();
$('#show-' + $(this).val()).show();
});
// when submit
$('input[type="submit"]').click(function() {
var target_field = $('input[type="radio"]:checked').val();
// console your target field value
console.log(target_field + ' value is: ' + $('input[name="' + target_field + '"]').val());
});
});