Develop Reference

Count inputs number onchange

i have a little problem with my code, i need to count inputs when change the value, my code is working but when i used the increase button the count dont change the value.
HTML CODE:
<div class="input-group input-number-group">
<div class="input-group-button">
<span class="input-number-decrement">-</span>
</div>
<input class="input-number" type="number" value="1" min="0" max="1000" onchange="count(this.value);">
<div class="input-group-button">
<span class="input-number-increment">+</span>
</div>
</div>
<div class="input-group input-number-group">
<input class="input-number" type="text" id="totalcount" placeholder="0" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
JS CODE:
$('.input-number-increment').click(function() {
var $input = $(this).parents('.input-number-group').find('.input-number');
var val = parseInt($input.val(), 10);
$input.val(val + 1);
});
$('.input-number-decrement').click(function() {
var $input = $(this).parents('.input-number-group').find('.input-number');
var val = parseInt($input.val(), 10);
$input.val(val - 1);
})
/* Count. */
function count(value) {
var Total = 0;
value = parseInt(value); // Convertir a numero entero (número).
Total = document.getElementById('totalcount').value;
// Valida y pone en cero "0".
Total = (Total == null || Total == undefined || Total == "") ? 0 : Total;
/* Variable genrando la suma. */
Total = (parseInt(Total) + parseInt(value));
// Escribir el resultado en una etiqueta "span".
document.getElementById('totalcount').value = Total;
}
Here is the fiddle
I need to count when i press the + or rest when i press - button, any idea?
Thank so much.

the onchange event listener is triggered when the user changes the input by typing. Therefore .val() wont cause it to fire up.
You can easily trigger the onchange event manually by adding
$(".input-number").change();
to the desired functions in your code.
In your specific case this should do the trick:
$('.input-number-increment').click(function() {
var $input = $(this).parents('.input-number-group').find('.input-number');
var val = parseInt($input.val(), 10);
$input.val(val + 1);
$(".input-number").change();
});
$('.input-number-decrement').click(function() {
var $input = $(this).parents('.input-number-group').find('.input-number');
var val = parseInt($input.val(), 10);
$(".input-number").change();
})
Now your count function will execute when the user clicks the increment and decrement buttons.

Html Form / jQuery: Changing input with tab reduces numeric value

It's happening a weird thing on my form built with Html and jQuery. Basically I've created a stupid function that detracts a percentage (my platform fees) from the amount inserted into the first input and place the recalculated one into the second. Of course it happens reversely.
It's something like:
Input 1: What you offer
Input 2: What you receive (detracted of my platform fees)
As you can see through the image (more or less), when I insert into the first input 1000, the second input will be filled with 930 if my percentage is 7%. Pretty straight.
The issue happens when I press tab from the first input to the second. The second stays with its value but the first gets further detracted of an undefined amount that I cannot identify or prevent. I don't know why, I'm probably missing something very stupid but I cannot see it.
Here is my html:
<div class="row top-15 form-group">
<div class="col-sm-6">
<h4>
<?php _e('Your bid','dev'); ?>
</h4>
<p>
<?php _e("Insert project's budget",'dev'); echo $budget;?>
</p>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span>
<input type="number" name="mybid" id="bid" class="form-control" value="<?php echo $bid; ?>" placeholder="<?php _e(" How much you offer ", "dev ") ?>" data-alert="<?php _e('Please type in a bid value.','dev'); ?>" />
</div>
</div>
<div class="col-sm-6">
<h4>
<?php _e("You will receive",'dev'); ?>
</h4>
<p>
<?php printf(__("%s of fees", 'dev'), '-' . $Dev_fee_after_paid . '%') ?>
<span id="fees" data-fees="<?php echo $Dev_fee_after_paid ?>"></span>
</p>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3"><?php echo $currency ?></span>
<input type="number" name="total" id="total" class="form-control" value="" size="10" placeholder="<?php _e(" What you get ", "Dev ") ?>" />
</div>
</div>
</div>
My jQuery
var currency = $('#make-application').attr('data-currency');
var setFees = $('#fees').attr('data-fees');
var bid = $('#bid').val();
var fees = (bid/100)*setFees;
// $("#total").val(total.toFixed(2));
$("#fees").text(' = ' + fees.toFixed(0) + currency);
$('#bid, #total').on('focusout', function(e) {
e.preventDefault();
e.stopPropagation();
});
$("#bid").on('keyup', function(e){
var newbid = $(this).val();
var newfees = (newbid/100)*setFees;
var total = newbid-newfees;
if($(this).hasClass('error')){
$(this).removeClass('error');
}
if($.isNumeric(newbid) === false){
$(this).addClass('error');
return;
}
if(newbid > 0){
$("#total").val(total.toFixed(0));
$("#fees").text(' = ' + newfees.toFixed(0) + currency);
} else {
$("#total").val('');
}
if(e.keyCode == 9) { //fixing the typed value in case of tab press
e.preventDefault();
e.stopPropagation();
$(this).val(newbid);
}
});
$("#total").on('keyup', function(e){
var totalTwo = $("#total").val();
var feesTwo = (totalTwo/100)*setFees;
var bidTwo = (+feesTwo)+(+totalTwo);
if($(this).hasClass('error')){
$(this).removeClass('error');
}
if($.isNumeric(bidTwo) === false){
$(this).addClass('error');
return;
}
if(totalTwo > 0){
$("#bid").val(bidTwo.toFixed(0));
$("#fees").text(' = ' + feesTwo.toFixed(0) + currency);
} else {
$("#bid").val('');
}
if(e.keyCode == 9) { //fixing the typed value in case of tab press
e.preventDefault();
e.stopPropagation();
$(this).val(totalTwo);
}
});
As you can see I've tried to preventDefault and stopPropagation on keycode == 9 without success. Could you give me some direction please?

Your math is wrong. If your math was right it wouldn't matter if you update one box from the other, and then immediately do the opposite.
rightbox = leftbox * (1 - setfees / 100)
so
leftbox = rightbox / (1 - setfees / 100)

When you put input into the first box, you update the second box:
var newbid = $(this).val();
var newfees = (newbid/100)*setFees;
var total = newbid-newfees;
newbid: 1000
newfees: (1000/100)*7 = 70
total: 1000-70 = 930
Then, when tab is pressed, the keyup event is fired on the second box, which in turn updates the first box:
var totalTwo = $("#total").val();
var feesTwo = (totalTwo/100)*setFees;
var bidTwo = (+feesTwo)+(+totalTwo);
totalTwo: 930
feesTwo: (930/100)*7 = 65
bidTwo: 65+930 = 995
You should change how the events fire, as well as your logic calculating the values.

You are checking if it is a tab press at the end of the function. Try putting it to the top.
var currency = $('#make-application').attr('data-currency');
var setFees = $('#fees').attr('data-fees');
var bid = $('#bid').val();
var fees = (bid/100)*setFees;
// $("#total").val(total.toFixed(2));
$("#fees").text(' = ' + fees.toFixed(0) + currency);
$('#bid, #total').on('focusout', function(e) {
e.preventDefault();
e.stopPropagation();
});
$("#bid").on('keyup', function(e){
if(e.keyCode == 9) { //fixing the typed value in case of tab press
e.preventDefault();
e.stopPropagation();
$(this).val(newbid);
}
var newbid = $(this).val();
var newfees = (newbid/100)*setFees;
var total = newbid-newfees;
if($(this).hasClass('error')){
$(this).removeClass('error');
}
if($.isNumeric(newbid) === false){
$(this).addClass('error');
return;
}
if(newbid > 0){
$("#total").val(total.toFixed(0));
$("#fees").text(' = ' + newfees.toFixed(0) + currency);
} else {
$("#total").val('');
}
});
$("#total").on('keyup', function(e){
var totalTwo = $("#total").val();
var feesTwo = (totalTwo/100)*setFees;
var bidTwo = (+feesTwo)+(+totalTwo);
if(e.keyCode == 9) { //fixing the typed value in case of tab press
e.preventDefault();
e.stopPropagation();
$(this).val(totalTwo);
}
if($(this).hasClass('error')){
$(this).removeClass('error');
}
if($.isNumeric(bidTwo) === false){
$(this).addClass('error');
return;
}
if(totalTwo > 0){
$("#bid").val(bidTwo.toFixed(0));
$("#fees").text(' = ' + feesTwo.toFixed(0) + currency);
} else {
$("#bid").val('');
}
});

dynamically count textarea symbols in a simple input

Good day everyone
I have a simple textarea on a page,and I need to dynamically count number of symbols, show how much is left under the form,and limit number of characters should be 350.
Thanks in advance.
What i exactly need is to display how many symbols are left to type
function limit(element)
{
var max_chars = 350;
if(element.value.length > max_chars) {
element.value = element.value.substr(0, max_chars);
}
}
<textarea onkeydown="limit(this);" onkeyup="limit(this);"></textarea>

var max_chars = 5;
var charsLeftDisplay = document.getElementById("charsLeft");
function limit(element) {
if (element.value.length > max_chars) {
element.value = element.value.slice(0, -1);
return false;
}
charsLeftDisplay.innerHTML = (max_chars - element.value.length) + " characters left...";
}
<textarea onkeyup="limit(this)"></textarea>
<p id="charsLeft"></p>

I think the best way to do this would be to use JQuery
here's the html
<textarea id="textareaID" rows="4" cols="50" maxlength="50"></textarea>
<p id="numberOfChars"><strong>Character typed:</strong> 0</p>
<p><strong>Max Character:</strong> 50</p>
and here's the jquery code
$('#textareaID').bind('input propertychange', function() {
if(this.value.length){
$("#numberOfChars").html("<strong>Character typed:</strong> "+this.value.length);
}
});
and here's a working fiddle as well https://jsfiddle.net/Visrozar/zbw7j64j/

Here is a simple solution,
just display the leftCharacters in a placeholder;
<script>
$(function() {
var $textarea = $('textarea');
var $input = $('input[name="spaces"]');
var maxLength = $textarea.attr('maxlength');
$input.val(maxLength);
$textarea.on('input', function() {
var currentLength = $textarea.val().length;
var leftCharacters = (maxLength - currentLength);
$input.val(leftCharacters);
});
});
</script>
<textarea name=test" maxlength="350"></textarea>
<input name="spaces" disabled />

This solution really works very well:
1 - Insert a div with id="textarea_count" for example in the place you want to show remaining characters, in your HTML file, near your textarea element (above or under):
<div class="form-group">
<label asp-for="DescCompetencia" class="col-md-2 control-label"></label>
<div class="col-md-10">
<textarea asp-for="DescCompetencia" class="form-control" rows="5"></textarea>
<span asp-validation-for="DescCompetencia" class="text-danger"></span>
<div id="textarea_count"></div>
</div>
</div>
2 - Insert in your javascript file or after /html element in the page you are editing the textarea element:
$(document).ready(function () {
var text_max = 500; //change by your max desired characters
var text_min = 7; //change to your min desired characters (or to zero, if field can be blank))
if ($('#DescCompetencia').length) {
var texto_disponivel = text_max - $('#DescCompetencia').val().length;
}
$('#textarea_count').html(texto_disponivel + ' caracteres disponíveis para digitar');
$('#DescCompetencia').keyup(function () {
var text_length = $('#DescCompetencia').val().length;
var text_remaining = text_max - text_length;
if (text_length <= text_min) {
$('#textarea_count').html(text_remaining + ' caracteres remanescentes. Digite ' + text_min + ' ou mais caracteres.');
}
else {
$('#textarea_count').html(text_remaining + ' caracteres remanescentes');
}
}); });
Must have Jquery already loaded before calling the above function.

submitting form via email with dynamic fields

Thank you in advance.
The code now works exactly as I need it too but I'm not sure how to go about passing each new line to my .asp mail handler if all the input names are the same. Where exactly in my code would I index the input boxes so that I can call them uniquely during submission and email themwith .asp mail handler?
Thank you to the stackoverflow community for helping me troubleshoot the code I've written thus far!
HTML
<form role="form" action="/wohoo" method="POST">
<label>Item</label>
<div class="catalog-fieldset">
<div class="catalog-wrapper">
<div class="catalog-items">
<ul>
<li>Quantity:
<input type="text" size="5" name="Qty[]">
</li>
<li>Width:
<input type="text" size="5" name="Width[]">
</li>
<li>Height:
<input type="text" size="5" name="Height[]">
</li>
</ul>
<button type="button" class="remove-line">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add More...</button>
</div>
</form>
CSS
ul {
list-style: none;
display:inline-block;
margin:0 0 5px;
}
ul li {
display: inline-block;
}
.remove-line {
display:inline-block;
}
I have this code set up http://jsfiddle.net/KeithDickens/afqh4a5o/2/
$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count
$('.catalog-fieldset').each(function () {
var $wrapper = $('.catalog-wrapper', this);
$(".add-field", $(this)).click(function (e) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$('.catalog-items:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
}
});
$('.catalog-items .remove-line', $wrapper).click(function () {
x = x - 1; //initlal text box count
if ($('.catalog-items', $wrapper).length > 1) $(this).parent('.catalog-items').remove();
});
});
});

Reading values given your current setup would simply be based on position. This is terribly brittle since if you change the position you break the code but if you were to add a
<button type="button" class="summarise">Summarise</button>
beneath your existing Add More button and swap out your javascript for what's below it should give you more than a start. Validation etc will need to be applied.
$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count
function LineItemViewModel() {
var self = this;
self.Qty = 0;
self.Width = 0;
self.Height = 0;
}
function CollectionViewModel() {
var self = this;
self.Items = [];
}
var collection = new CollectionViewModel();
$('.catalog-fieldset').each(function () {
var $wrapper = $('.catalog-wrapper', this);
$(".add-field", $(this)).click(function (e) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$('.catalog-items:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
}
});
$(".summarise", $(this)).click(function (e) {
var txts = $('.catalog-fieldset input[type=text]');
var item = new LineItemViewModel();
txts.each(function () {
switch($(this).attr("name")){
case "Qty[]":
item.Qty = $(this).val();
break;
case "Width[]":
item.Width = $(this).val();
break;
case "Height[]":
item.Height = $(this).val();
collection.Items.push(item);
item = new LineItemViewModel();
break;
}
});
alert(collection.Items.length);
});
$('.catalog-items .remove-line', $wrapper).click(function () {
x = x - 1; //initlal text box count
if ($('.catalog-items', $wrapper).length > 1) $(this).parent('.catalog-items').remove();
});
});
});
There are cleaner / shorter / more concise ways to do the above but this way should be very self explanatory.

Add and Remove Input Field

I find two bugs at here:
The number will not continue counting, like will be 4 in next input value. Currently when add new input, the value is 1.
The remove button not working if have 3 input field there. But the remove button working if add one more input field. Anyway, only one can be delete.
HTML
<div id="add_form">
<table>
<tr>
<td><input type="text" value="1"/></td>
<td><div class="remove">Remove</div></td>
</tr>
<tr>
<td><input type="text" value="2"/></td>
<td><div class="remove">Remove</div></td>
</tr>
<tr>
<td><input type="text" value="3"/></td>
<td><div class="remove">Remove</div></td>
</tr>
</table>
</div>
Add
JQuery
$(document).ready(function() {
var MaxInputs = 99;
var InputsWrapper = $("#add_form table");
var AddButton = $("#add_field");
var x = InputsWrapper.length;
var FieldCount=1;
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
FieldCount++;
$(InputsWrapper).append('<tr><td><input type="text" value="' + x + '"/></td><td><div class="remove">Remove</div></td></tr>');
x++;
}
return false;
});
$("body").on("click",".removeclass", function(e) {
if( x > 1 ) {
$(this).closest('tr').remove();
x--;
}
return false;
})
});
http://jsfiddle.net/hxbc7/

I have updated the fiddle that you created. http://jsfiddle.net/hxbc7/12/
There was a mistake in your code that I rectified.
Instead of this line
var InputsWrapper = $("#add_form table");
it should be
var InputsWrapper = $("#add_form table tr");

Try this: Count the FieldCount value and append to the textbox.
$(document).ready(function() {
var MaxInputs = 99;
var InputsWrapper = $("#add_form table");
var AddButton = $("#add_field");
var x = InputsWrapper.length;
var FieldCount=3;
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
FieldCount++;
$(InputsWrapper).append('<tr><td><input type="text" value="' + FieldCount + '"/></td><td><div class="remove">Remove</div></td></tr>');
x++;
}
return false;
});
$("body").on("click",".removeclass", function(e) {
if( x > 1 ) {
FieldCount--;
$(this).closest('tr').remove();
x--;
}
return false;
})
});

change the code like this
$(document).ready(function() {
var MaxInputs = 99;
var InputsWrapper = $("#add_form table");
var AddButton = $("#add_field");
var x = $("input[type=text]").length;
var FieldCount=1;
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
x++;
$(InputsWrapper).append('<tr><td><input type="text" value="' + x + '"/></td><td><div class="remove">Remove</div></td></tr>');
}
return false;
});
$("body").on("click",".removeclass", function(e) {
if( x >= 1 ) {
$(this).closest('tr').remove();
x--;
}
return false;
})
});