How can I write numeric numbers into an input field by pressing a button?
Suppose I have a button:
<input type="button" value="1">
Then I want, that when numeric pad button 1 is pressed it adds numeric words just like Windows Calculator.
I'm not sure what you are asking, but this code will add numbers to an input box (using jQuery).
HTML
<input id="data" type="text" />
<br />
<br />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" /><br />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" /><br />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
Script
$(document).ready(function(){
$(':button').click(function(){
$('#data').val( $('#data').val() + $(this).val() );
})
})
Related
I have a simple HTML like below and corresponding java script code.
The issue is :
For .clear and .result buttons , two event listeners are getting attached and called
(storeInput as well as their actual listener). Actually , storeInput should not be get called in this case
To debug issue , I commented out below two lines :
//document.querySelector(".clear").addEventListener('click',clear);
//document.querySelector(".result").addEventListener('click',calculate);
So there are no event listeners for .clear and .result buttons
But still , storeInput listener gets called if they are clicked
Question is :
why document.querySelectorAll(".digit") and document.querySelectorAll(".operator") are adding event listeners to .clear and .result buttons as well ?
function storeInput() {
console.log('storeInput');
}
function clear() {
console.log('clear');
}
function calculate() {
console.log('calculate');
}
const digits = document.querySelectorAll(".digit");
digits.forEach(function() {
this.addEventListener('click', storeInput);
});
const operators = document.querySelectorAll(".operator");
operators.forEach(function() {
this.addEventListener('click', storeInput);
})
document.querySelector(".clear").addEventListener('click', clear);
document.querySelector(".result").addEventListener('click', calculate);
<input type="text" />
<br/>
<input type="button" class="digit" value="0" />
<input type="button" class="digit" value="1" />
<input type="button" class="digit" value="2" />
<input type="button" class="digit" value="3" />
<br/>
<input type="button" class="digit" value="4" />
<input type="button" class="digit" value="5" />
<input type="button" class="digit" value="6" />
<input type="button" class="digit" value="7" />
<br/>
<input type="button" class="digit" value="8" />
<input type="button" class="digit" value="9" />
<br/>
<input type="button" class="clear" value="C" />
<br/>
<input type="button" class="operator" value="+" />
<input type="button" class="operator" value="-" />
<input type="button" class="operator" value="/" />
<input type="button" class="operator" value="*" />
<br/>
<input type="button" class="result" value="=" />
In forEach, this has no special meaning, so what you're really doing is attaching those handlers to window, since this defaults to window in loose mode. (You may have seen jQuery code using each; jQuery sets this to each element in an each callback, but forEach doesn't work that way.)
To use the element within the forEach callback, accept the element as a parameter and use that parameter, see *** comments:
function storeInput() {
console.log('storeInput');
}
function clear() {
console.log('clear');
}
function calculate() {
console.log('calculate');
}
const digits = document.querySelectorAll(".digit");
digits.forEach(function(el) { // *** Note the parameter `el`
el.addEventListener('click', storeInput);
// ^ note using the parameter
});
const operators = document.querySelectorAll(".operator");
operators.forEach(function(el) { // *** Note the parameter `el`
el.addEventListener('click', storeInput);
// ^ note using the parameter
})
document.querySelector(".clear").addEventListener('click', clear);
document.querySelector(".result").addEventListener('click', calculate);
<input type="text" />
<br/>
<input type="button" class="digit" value="0" />
<input type="button" class="digit" value="1" />
<input type="button" class="digit" value="2" />
<input type="button" class="digit" value="3" />
<br/>
<input type="button" class="digit" value="4" />
<input type="button" class="digit" value="5" />
<input type="button" class="digit" value="6" />
<input type="button" class="digit" value="7" />
<br/>
<input type="button" class="digit" value="8" />
<input type="button" class="digit" value="9" />
<br/>
<input type="button" class="clear" value="C" />
<br/>
<input type="button" class="operator" value="+" />
<input type="button" class="operator" value="-" />
<input type="button" class="operator" value="/" />
<input type="button" class="operator" value="*" />
<br/>
<input type="button" class="result" value="=" />
Another option is to put a container around the digits, and another container around the operators, and just handle clicks on those containers, using the target property of the event object to see which digit or operator was clicked.
function storeInput(e) {
console.log('storeInput: ' + e.target.value);
}
function clear() {
console.log('clear');
}
function calculate() {
console.log('calculate');
}
document.querySelector(".digits").addEventListener('click', storeInput);
document.querySelector(".operators").addEventListener('click', storeInput);
document.querySelector(".clear").addEventListener('click', clear);
document.querySelector(".result").addEventListener('click', calculate);
<input type="text" />
<div class="digits">
<input type="button" class="digit" value="0" />
<input type="button" class="digit" value="1" />
<input type="button" class="digit" value="2" />
<input type="button" class="digit" value="3" />
<br/>
<input type="button" class="digit" value="4" />
<input type="button" class="digit" value="5" />
<input type="button" class="digit" value="6" />
<input type="button" class="digit" value="7" />
<br/>
<input type="button" class="digit" value="8" />
<input type="button" class="digit" value="9" />
</div>
<input type="button" class="clear" value="C" />
<div class="operators">
<input type="button" class="operator" value="+" />
<input type="button" class="operator" value="-" />
<input type="button" class="operator" value="/" />
<input type="button" class="operator" value="*" />
</div>
<input type="button" class="result" value="=" />
I am new at programming and I've tried a lot to find something that could help me with that problem.
<form name="calc">
<input name="rezultat"/>
<input type="button" name="1" value="2" onclick="run2()"/>
<input type="button" name="1" value="3" onclick="run3()"/>
<input type="button" name="1" value="4" onclick="run4()"/>
<input type="button" name="1" value="5" onclick="run5()"/>
<input type="button" name="1" value="6" onclick="run6()"/>
<input type="button" name="1" value="7" onclick="run7()"/>
<input type="button" name="1" value="8" onclick="run8()"/>
<input type="button" name="1" value="9" onclick="run9()"/>
<input type="button" name="1" value="10" onclick="run10()"/>
</form>
This is my HTML code
The idea is to make instant average of the numbers when I add a new one by clicking the specific button (every button has a value and an onclick proprety) and show that in the "rezultat" field.
I would be grateful if you'd help me with a script.
Here you go, most of the explanation is done inline in the comments.
<form id="calc" name="calc">
<input name="rezultat" id="rezultat" />
<input type="button" name="1" value="2" />
<input type="button" name="1" value="3" />
<input type="button" name="1" value="4" />
<input type="button" name="1" value="5" />
<input type="button" name="1" value="6" />
<input type="button" name="1" value="7" />
<input type="button" name="1" value="8" />
<input type="button" name="1" value="9" />
<input type="button" name="1" value="10" />
</form>
<script type="text/javascript">
var count = 0; // global scope variable
var total = 0; // global scope variable
// define your function to calculate a new value
var calc = function(e){
// add value of button clicked to total
total += Number(e.target.value);
// add 1 to the counter
count += 1;
// set rezultat to average (total / count)
document.getElementById('rezultat').value = total / count;
// stop bubbling and default handler
return false;
}
// get array of the buttons in the form
buttons = document.querySelectorAll('#calc input[type=button]');
// loop through the buttons
for(var i=0;i<buttons.length;i++){
// bind a handler for the click event of each button
buttons[i].addEventListener('click',calc,false);
}
</script>
I have a slight problem with inserting numbers in the input box.
To be more specific.I use the custom made keypad that shows on the screen,and the numbers can only be written in the input box by using that same keypad,with the max of 5 numbers that can be written.But the HTML maxlength atrribute in this case doesn't work.It works when I try to write the number using the actual keyboard,but when inserting with a custom keypad it won't work.
The question is how can I make it to work?
<script>
function addNumber(element) {
document.getElementById('child').value = document.getElementById('child').value + element.value;
}
function deleteNumber(){
document.getElementById('child').value='';
}
</script>
<div class='form-group'>
<div id="staticParent">
<div class='col-md-6'>
<input class='form-control' id='child' name="username" type='text' maxlength="5" readonly='readonly' />
<input type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); />
<input type="button" class="fbutton" name="2" value="2" id="2" onClick=addNumber(this); />
<input type="button" class="fbutton" name="3" value="3" id="3" onClick=addNumber(this); />
<input type="button" class="fbutton" name="4" value="4" id="4" onClick=addNumber(this); />
<input type="button" class="fbutton" name="5" value="5" id="5" onClick=addNumber(this); />
<input type="button" class="fbutton" name="6" value="6" id="6" onClick=addNumber(this); />
<input type="button" class="fbutton" name="7" value="7" id="7" onClick=addNumber(this); />
<input type="button" class="fbutton" name="8" value="8" id="8" onClick=addNumber(this); />
<input type="button" class="fbutton" name="9" value="9" id="9" onClick=addNumber(this); />
<input type="button" class="fbutton" name="0" value="0" id="0" onClick=addNumber(this); />
<input type='button' class='fbutton' name='delete' value='Delete' onClick=deleteNumber(this); />
</div>
</div>
you can replace your addNumber function with below one, That will solve your problem.
function addNumber(element) {
var value1 = document.getElementById('child').value + element.value;
if(value1.length > 5) return false;
document.getElementById('child').value = value1;
}
you can try this maxlength=5.you will remove ""
<input class='form-control' id='child' name="username" type='text' maxlength=5 readonly='readonly' />
Since maxlength only works if the user actually uses the real keyboard and not for programatically changing the value, you can't do it like that.
To get around it simply apply a check in your addNumber function:
function addNumber() {
var input = document.getElementById('child');
if (input.value.length > 5) {
return false;
}
else {
// Do stuff
}
}
This won't add a new number unless the input length is less or equal to 5.
Also you shouldn't call things with the onclick attribute. Instead add your event listeners with addEventListener:
var addBtns = document.getElementsByClassName('fbutton');
for (var i = 0; i < addBtns.length; i++) {
addBtns[i].addEventListener('click', addNumber);
}
Note that you have to use a loop to add the event listeners since addBtns is an array.
Is it possible to disable a single radio button in a group using jquery?
<div id="divAddNewPayrollItemWages" title="Add New Payroll Item">
<strong>Wages</strong><br />
Do you want to set up a payroll item to track wages, annual salary, commissions or bonuses?<br />
<input type="radio" name="rblWages" value="Hourly" />Hourly Wage<br />
<input type="radio" name="rblWages" value="Annual" />Annual Salary<br />
<input type="radio" name="rblWages" value="Commission" />Commission<br />
<input type="radio" name="rblWages" value="Bonus" />Bonus<br /><br />
<input type="button" value="Back" disabled="disabled" />
<input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />
<input type="button" value="Finish" disabled="disabled" />
<input type="button" value="Cancel" onclick="AddNewPayrollItemWages_Cancel();" />
</div>
<div id="divAddNewPayrollItemHourlyWages" title="Add New Payroll Item">
<strong>Wages</strong><br />
Is this item for regular, overtime, sick or vacation pay?<br />
<input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
<input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
<input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
<input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />
<input type="button" value="Back" onclick="" />
<input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" />
<input type="button" value="Finish" disabled="disabled" />
<input type="button" value="Cancel" onclick="AddNewPayrollItemHourlyWages_Cancel();" />
</div>
What I am trying to accomplish is that when a user selects Annual from the first dialogue, the script opens the second dialogue and disables the Overtime radio button from the list. The only problem I am having at this point is disabling the radio button, everything else is good.
This should do it. Essentially, use jQuery to find an input with name of "rblHourlyWages" and value of "Overtime" and disable it.
$('input[name=rblHourlyWages][value=Overtime]').prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
<input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
<input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
<input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />
What you want to do is establish a relationship between what radio button disables another. I would use an array, but that's a whole other pie.
What you can do is something on the lines of checking the radio group and using an if statement.
Array.prototype.forEach.call(document.querySelectorAll("[type='radio']"), function(x) {
x.addEventListener("click", function() {
if (x.value === "Annual") { //or any other field
document.querySelector("['OTHER_RELATED_FIELD']").disabled = true;
}
});
});
jQuery way:
$("[type='radio']").on("click", function() {
if (this.value === "Annual") $("[name='rblHourlyWages'][value='Overtime']").prop("disabled", true);
});
Note that you'll have to reset all radio buttons to enabled before each click function is run so that you can change the radio button and the option will be re-enabled.
Something like this should work. It allows for user to change radio again and reenable the other one
$('[name=rblWages]').change(function(){
var isAnnual = this.value == 'Annual';
$('[name=rblHourlyWages][value=Overtime]').prop('disabled', isAnnual);
});
DEMO
In my html form, I have a group of radio buttons
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="submit" value="submit" />
</form>
I have a scenario where no radio button is checked. In such case, my server-side php receives input value as false. What I want to do is change false to null or undefined. Is that possible? Any help is greatly appreciated.
You can do something like this:
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="hidden" name="rad" value="null" />
<input type="submit" value="submit" />
</form>
Now if you haven't checked any radio button, you will get "null" input value, but remember "null" is not same as NULL in PHP.
Radio buttons, by definition, do not have a null value.
You could however add a radio button such as this:
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="radio" name="rad" value="null" /> null <br />
<input type="submit" value="submit" />
</form>
And use it as the null that you need.
That might be done with an if/else statement within the .php:
$radioInput = false;
if (!isset($_POST['rad'])){
$radioInput = NULL;
}
else {
$radioInput = $_POST['rad'];
}
http://php.net/manual/en/function.isset.php
Use javascript to return null in case if no radio button is selected ,on "submit" click :
var radioChecked=0;
var radios=document.getElementsByName("rad");
for(var i=0;i<radios.length;i++)
{ if(radios[i].checked){
radioChecked=radioChecked+1;
} }
if(radioChecked==0)
return null;
Hope it solves your problem.