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.
Related
I have 2 text inputs on a Form:
<div class="form-group">
<input type="text" class="form" id="descriptionInput" placeholder="Customer Name" onkeyup="manage(this)">
</div>
<div class="form">
<input type="text" class="form" id="contactName" placeholder="Contact Name">
</div>
The idea is to enable the submit button only if these 2 fields have any value:
My button:
<button type="submit" id="btSubmit" disabled>Add new Customer Entry</button>
My enable/disable function:
function manage(descriptionInput, contactName) {
var bt = document.getElementById('btSubmit');
var custName = document.getElementById('descriptionInput').value.length;
var contact = document.getElementById('contactName').value.length;
if (custName > 0 && contact > 0) {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
Issue is:
if customer name field has 1 character only + contact has 1 or more characters = doesn't work
if customer name field has 2 characters + contact has 1 or more characters = it works
Not sure what's happening, any ideas?
Thanks
The problem is that the manage function is only called when a key up event is triggered on the #descriptionInput <input>.
To fix that, monitor both inputs for changes, here is an example:
const btSubmit = document.querySelector('#btSubmit');
const descriptionInput = document.querySelector('#descriptionInput');
const contactName = document.querySelector('#contactName');
function manage() {
btSubmit.disabled = descriptionInput.value.length === 0 || contactName.value.length === 0;
}
descriptionInput.addEventListener('input', manage);
contactName.addEventListener('input', manage);
<div class="form-group">
<input type="text" class="form" id="descriptionInput" placeholder="Customer Name">
</div>
<div class="form">
<input type="text" class="form" id="contactName" placeholder="Contact Name">
</div>
<button type="submit" id="btSubmit" disabled>Add new Customer Entry</button>
Here, instead of listening for key up events, I'm listening for input events, this is more appropriate because this event is also triggered when you paste something in an input for example.
Also, instead of adding the event listeners inline, I'm adding them in JavaScript.
You forgot to add the keyup event on the second input.
This is my question:
I got an jsp page, this jsp has many text fields like this:
<html:text property="cicPF" maxlength="9" style="text-transform: uppercase;" onfocus="disableIfeFields()"/>
So I want to disable some of this text fields when the focus it's in a specific field
But no one of this fields has "id" label, and I can't modify it to include it.
May I disable the fields usig their given names, no one of this repeats the same name.
for example with a function like this:
function disableIfeFields(){
document.getElementsByName("numIdentificacionPF").disabled = true;
}
thanks
You need to loop through the list and disable all the fields you want that way, used input to show example:
function disableIfeFields() {
document.getElementsByName("numIdentificacionPF").forEach((e) => {
e.disabled = true;
});
}
<html:text property="cicPF" maxlength="9" style="text-transform: uppercase;" />
<input onfocus="disableIfeFields()" type="text" name="fname">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
<input type="text" name="numIdentificacionPF">
Maybe like this:
function disableIfeFields(){
document.querySelectorAll('[property="cicPF"]')[0].disabled = true;
}
disableIfeFields();
<input type="text" property="cicPF" maxlength="9" style="text-transform: uppercase;" onfocus="disableIfeFields()"/>
Hopefully the following should help. Because the selection result is a list of elements you will have to loop through the results.
Please note that since you said no input repeats the same name, I'm using querySelectorAll, which might be a more suitable method after all…
var inputs = document.querySelectorAll('input[type="text"]');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].id === 'label') {
continue;
}
inputs[i].disabled = true;
}
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);
});
This is my js
$(function() {
var tryme = 5;
var options = {
source: "<?=base_url()?>/autocomplete/",
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
this.value = ui.item.valuedesc;
//$(this).siblings('.item_sku').val(ui.item.valuedesc); // not working
//$(this).siblings('.description').val(ui.item.description); // not working
//$(this).siblings('.rate').val(ui.item.rate); // not working
}
};
$( ".item_sku" ).autocomplete(options);
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#invoice_table tr:last').clone();
cloned.appendTo('#invoice_table').find('input').val('');
cloned.find('.item_sku').autocomplete(options);
});
});
I am using jquery to clone a line of fields in order to build my invoice items.
What is NOT working now is the specific line of fields are not updating.
These are my fields:
<input type="text" maxlength="255" name="item_sku[]" data-required="1" class="form-control item_sku" autocomplete="off" required/>
<input type="text" maxlength="255" name="item_description[]" id="description" data-required="1" class="form-control calculate description" required/>
<input type="text" maxlength="255" name="item_amount[]" data-required="1" class="form-control calculate rate" autocomplete="off" required/>
So when I start typing int he ITEM_SKU field, I get my autocomplete options - which is working fine. And when I click on it, it must update the description and item_amount textfields.
Now if I change the field class to an ID, and the javascript to example
<input type="text" maxlength="255" name="item_amount[]" id="rate" data-required="1" class="form-control calculate" autocomplete="off" required/>
It works.
But because I have an "add more fields" button - I have to have multiple fields with the same ID.
How can I get the current line's fields updated with ui.item.description and ui.item.rate?
http://i.share.pho.to/7945c43f_o.jpeg
I would use a hidden div as a library for your cloned elements...
Also, remove the ID after the obj is cloned.
something like (untested)
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#hidden').find('#tr').clone().removeAttr('id');
cloned.appendTo('#invoice_table');
cloned.find('.item_sku').autocomplete(options);
});
Edit: Simplify jsfiddle example (tested) http://jsfiddle.net/c5ajonav/3/
Disable the other textbox if the textbox(4) is filled. I have a multiple text boxes in my div
For instance:
If I put a text in textbox(4), then the textbox(1) will becomes disable. Then if I remove the text in the textbox(4), then the text box for the textbox(1) will becomes enable.
Here is the sample html:
<div class="main-wrapper">
<div class="form-text-wrapper">
<div><input type="text" class="form-text" value="" name="text1" id="text1"></div>
<div><input type="text" class="form-text" value="" name="text2" id="text2"></div>
<div><input type="text" class="form-text" value="" name="text3" id="text3"></div>
<div><input type="text" class="form-text" value="" name="text4" id="text4"></div>
</div>
</div>
My code doesn't seems to work, I'm not sure what's wrong with my code.
Here is my js code:
$('.main-wrapper').each(function(){
var name = $('#text4', this).val();
var disForm = $('#text1');
if ($(name.length >= 1)) {
$(disForm, this).attr('disabled', 'disabled');
} else {
$(disForm, this).removeAttr('disabled');
}
});
Please help... Thank you!!!
jQuery(function($) {
//change event handler which gets executd whenever the value of #test4 is chaned
$('#text4').on('change', function() {
//find all the input elements under the current .form-text-wrapper and except #test4 and set its disabled status based on #text4's value
$(this).closest('.form-text-wrapper').find('input').not(this).prop('disabled', this.value.length)
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-wrapper">
<div class="form-text-wrapper">
<div><input type="text" class="form-text" value="" name="text1" id="text1"></div>
<div><input type="text" class="form-text" value="" name="text2" id="text2"></div>
<div><input type="text" class="form-text" value="" name="text3" id="text3"></div>
<div><input type="text" class="form-text" value="" name="text4" id="text4"></div>
</div>
</div>
Ok, so a few issues with what you are doing.
Firstly you are needing to execute your code every time one of those text boxes changes. You can wrap that functionality into a function and add it to the change event on each of the textboxes. I have added an example below. NB the example could be alot better than explicitly adding the change to each of the textboxes but I'll leave that for you to do.
Secondly you were executing your comparison for if the length was greater than 0 inside a jquery wrapper ($(name.length >= 1)) -> Don't. I've removed that as well in the code sample.
Thirdly I'm a little confused by the requirement. Are you wanting it to toggle disabled/not disabled for just the first text box? REading your code that's what it looked like you were trying to achieve. If you are wanting to disable all of the rest of the text boxes then Arun P Johny's function will do what you want.
function onTextChange(){
console.log('running');
$('.main-wrapper').each(function(){
var name = $('#text4', this).val();
var disForm = $('#text1');
if (name.length >= 1) {
$(disForm, this).attr('disabled', 'disabled');
} else {
$(disForm, this).removeAttr('disabled');
}
});
}
$('#text1').on('change', onTextChange);
$('#text2').on('change', onTextChange);
$('#text3').on('change', onTextChange);
$('#text4').on('change', onTextChange);
http://jsfiddle.net/jtgs5kcj/1/