I've got this script which I'm using with succes, but I've tried, and failed, to get it to stop making negative numbers when substracting pass 0..
<script language="javascript" type="text/javascript">
currentvalue = 1;
function setUp() {
document.getElementById("qty").value = currentvalue;
}
function addOne() {
currentvalue++;
document.getElementById("qty").value = currentvalue;
}
function subtractOne() {
currentvalue--;
document.getElementById("qty").value = currentvalue;
}
</script>
<input type="text" name="qty" id="qty" maxlength="12" value="1" title="qyu" class="input-text qty" />
<div onload="setUp()">
<input class="qtyplus" type="button" value="" onClick="addOne()">
<input class="qtyminus" type="button" value="" onClick="subtractOne()">
</div>
Anyone got the magic part which stop's the show at 0 ?
Thanks!
Just add an if statement here is the fiddle
and here is your subtractOne function
function subtractOne() {
if(document.getElementById("qty").value !== '0') {
currentvalue--;
document.getElementById("qty").value = currentvalue;
}
Related
Given this HTML code:
<body onload="assessSum()">
<input type="number" id="num0" min="0" max="10">
<input type="number" id="num1" min="0" max="10">
<button type="submit" id="sub">Submit</button>
</body>
What would be a function that would disable the submit button, if the sum of the 2 input fields is greater than a certain value?
My JavaScript/Jquery code doesn't seem to work:
function assessSum(){
var total = 0;
var maximum = 5;
var bt = document.getElementById('sub');
$.each($("input"),function(){
total += parseInt($(this).val()) || 0;
});
if(total > maximum){
bt.disabled = true;
}
else{
bt.disabled = false;
}
}
You need to run the function on change event of the inputs.
$(':input').on('change', assessSum);
function assessSum() {
var total = 0;
var maximum = 5;
var bt = document.getElementById('sub');
$("input").each((i, el) => {
total += (parseInt(el.value) || 0);
});
if (total > maximum) {
bt.disabled = true;
} else {
bt.disabled = false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="num0" min="0" max="10">
<input type="number" id="num1" min="0" max="10">
<button type="submit" id="sub">Submit</button>
The disabling can also be done like this:
$('#sub').attr('disabled', (total > maximum));
Please help me figure out why only the last input id gets its value added to the input id= #attr3 with keyup.
I need both inputs in the div to have their values put into the input outside the div separated with a comma(,). i made a fiddle https://jsfiddle.net/dc6v6gjd/1/. Thanks
<div id ="candy">
<input type="text" id="attr1" name="emailAddress" value="">
<input type="text" id="attr2" name="emailAddress" value="">
</div>
<input type="text" id="attr3" name="username" value="">
$(document).ready(function () {
var text = $("#candy :input").map(function () {
return this.id;
}).get();
var attr = [];
for (i=0; i<text.length; i++) {
attr.push('#'+ text[i]);
}
var mat = attr.join(", ");
$(mat).keyup(function(){
update();
function update() {
attr.forEach(function(index, i){
// alert(i);
$("#attr3").val( $(attr[i]).val() + "," );
});
}
});
});
The reason is you're overriding the value of attr3 on each iteration of forEach. You could instead use join to get the value.
e.g.
function update() {
var val = attr
.map(function(a) {
return $(a).val();
})
.join(",");
$("#attr3").val(val);
}
That being said I'd probably go with a simpler solution like this.
// set the keyup event handler and add all inputs to an array.
var inputs = $("#candy :input").keyup(function() {
update();
}).get();
// read all input values into comma separated string and update attr3
function update() {
var val = inputs.map(function(i) {
return $(i).val();
}).join(",");
$("#attr3").val(val);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="candy">
<input type="text" id="attr1" name="emailAddress" value="">
<input type="text" id="attr2" name="emailAddress" value="">
</div>
<input type="text" id="attr3" name="username" value="">
Update: Support dynamically added inputs.
$(document).on("keyup", "#candy :input", function() {
update();
});
function update() {
var val = $("#candy :input").get().map(function(i) {
return $(i).val();
}).join(",");
$("#attrFinal").val(val);
}
var count = 3;
$("#add").click(function() {
$("#candy").append("<input type='text' id='attr" + count++ + "' name='emailAddress' />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="candy">
<input type="text" id="attr1" name="emailAddress" value="">
<input type="text" id="attr2" name="emailAddress" value="">
</div>
<input type="text" id="attrFinal" name="username" value="">
<button id="add">Add New</button>
i am trying increment and decrement a number if user is giving in text box is 15 it should be incremented when click a button and also decrement when button clicking...
this is my javascript code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function incNumber() {
for(i=1;i>0;i++){
document.getElementById("display").value=i;
}
}
function decNumber() {
for(i=1;i>0;i--){
document.getElementById("display").value=i;
}
}
</script>
</head>
<body>
<form>
<input type="text" value="0"/>
<input type="button" value="Increase" id="inc" onclick="incNumber()"/>
<input type="button" value="Decrease" id="dec" onclick="decNumber()"/>
<label id="display"></label>
</form>
</body>
</html>
Use parseInt() function to convert the value from string to integer.
function incNumber(){
var c = parseInt(document.getElementsByTagName("input")[0].value);
c++;
document.getElementsByTagName("input")[0].value = c;
document.getElementById("display").innerHTML = c;
}
The logic stands for decNumber()
function decNumber(){
var c = parseInt(document.getElementsByTagName("input")[0].value);
c--;
document.getElementsByTagName("input")[0].value = c;
document.getElementById("display").innerHTML = c;
}
Few suggestions
1.Never mix up your markup with javascript. Consider attaching events click/change at javascript end
DOM search is costly.use it cautiously
3.Use parseInt(variablename,10) ->to convert it into integer
check the following snippet
window.onload=function(){
var incButton=document.getElementById("inc");
incButton.addEventListener("click",incNumber);
var decButton=document.getElementById("dec");
decButton.addEventListener("click",decNumber);
}
function incNumber() {
var displayValue= document.getElementById("display");
var text=document.getElementById("input");
var value=parseInt(text.value,10);
if(value==15){
displayValue.innerHTML=value+1;
}
}
function decNumber() {
var displayValue= document.getElementById("display");
var text=document.getElementById("input");
var value=parseInt(text.value,10);
displayValue.innerHTML=value-1;
}
<form>
<input type="text" value="0" id="input"/>
<input type="button" value="Increase" id="inc" />
<input type="button" value="Decrease" id="dec" />
<label id="display"></label>
</form>
Hope this helps
If you want to increment the label value by the input value try this
function incNumber(){
var num=0;
if(isNaN(document.getElementById('diplay').innerHTML)){
num=$("#inputVal").val();
}
else{
num=parseInt(document.getElementById('diplay').innerHTML)+$("#inputVal").val();
}
document.getElementById('diplay').innerHTML=num;
}
function decNumber(){
var num=0;
if(isNaN(document.getElementById('diplay').innerHTML)){
num=$("#inputVal").val();
}
else{
num=parseInt(document.getElementById('diplay').innerHTML)-$("#inputVal").val();
}
document.getElementById('diplay').innerHTML=num;
}
In HTML
<form>
<input type="number" id="inputVal" value="0"/>
<input type="button" value="Increase" id="inc" onclick="incNumber()"/>
<input type="button" value="Decrease" id="dec" onclick="decNumber()"/>
<label id="display"></label>
or you can define input type as number
<input type="number" id="numbrfield"/>
you will automatically get buttons to increment or decrement when you hover on the field.
I have form that adds 6 user inputs. I want to have an alert if the total is not 100 or the user enters something other than a number. The alert works for a total greater than 100, but how do you check if it's less than 100 and all the inputs have been filled in? Right now I get the alert when the first input is being filled in.
<form name="myForm" id="form1">
<input oninput="findTotal()" type="text" name="qty" id="qty1" /> <br>
<input oninput="findTotal()" type="text" name="qty" id="qty2" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty3" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty4" /> <br>
<input oninput="findTotal()" type="text" name="qty" id="qty5" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty6" /><br>
<textarea type="text" name="total" id="total" min="100" max="100" readonly></textarea>
</form>
<script>
function findTotal(){
"use strict";
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value)) {
tot += parseInt(arr[i].value);
}
}
document.getElementById('total').value = tot;
if (tot > 100) {
alert("Please make sure numbers total 100");
document.getElementById("qty1").value = null;
document.getElementById("qty2").value = null;
document.getElementById("qty3").value = null;
document.getElementById("qty4").value = null;
document.getElementById("qty5").value = null;
document.getElementById("qty6").value = null;
document.getElementById("total").value = null;
return false;
}
if (tot < 100) {
alert("Please make sure numbers total 100");
document.getElementById("qty1").value = null;
document.getElementById("qty2").value = null;
document.getElementById("qty3").value = null;
document.getElementById("qty4").value = null;
document.getElementById("qty5").value = null;
document.getElementById("qty6").value = null;
document.getElementById("total").value = null;
return false;
}
}
</script>
To achieve expected result, use below option
1. Use onkeyup function to check whether input is number or not
2. Use if(tot >100) condition to check value greater than 100
3. if(tot <100) condition to check value less than 100 and alert placed on last field to avoid alert on every field
4.Clear values if conditions are met
HTML:
<form name="myForm" id="form1">
<input oninput="findTotal()" type="text" name="qty" id="qty1" onkeyup="checkinput(this)" /> <br>
<input oninput="findTotal()" type="text" name="qty" id="qty2" onkeyup="checkinput(this)" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty3" onkeyup="checkinput(this)" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty4" onkeyup="checkinput(this)" /> <br>
<input oninput="findTotal()" type="text" name="qty" id="qty5" onkeyup="checkinput(this)" /><br>
<input oninput="findTotal()" type="text" name="qty" id="qty6" onkeyup="checkinput(this)" /><br>
<textarea type="text" name="total" id="total" min="100" max="100" readonly></textarea>
</form>
JS:
function findTotal() {
"use strict";
var arr = document.getElementsByName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value)) {
tot += parseInt(arr[i].value);
}
}
document.getElementById('total').value = tot;
if (tot > 100) {
alert("Please make sure numbers total 100");
for (i = 0; i < arr.length; i++) {
arr[i].value = null;
}
}
if (tot < 100 && arr[5].value) {
alert("Please make sure numbers total 100");
for (i = 0; i < arr.length; i++) {
arr[i].value = null;
}
}
}
function checkinput(x) {
var y = x.value
var regex = /^[0-9]+$/;
if (y.match(regex)) {} else {
alert("Enter number");
x.value = '';
}
}
Codepen- http://codepen.io/nagasai/pen/rLKkBb
Your code has been cliffed off, but just so you know this:
if (tot > 100) {
alert("Please make sure numbers total 100");
return false;
}
if (tot < 100) {
alert("Please make sure numbers total 100");
return false;
}
Is the same as writing this:
if(tot !== 100) {
alert("Please make sure numbers total 100");
return false;
}
Edit:
It's because your event is firing on the oninput event, which fires every time a user types. Use the on submit event which fires when the form is submitted. Make sure to prevent default actions. Comment if this doesn't help you.
One way you may be able to solve this is to exit out of the program if you can't parse all the inputs to ints. If the default value can be parsed to an int, then you may need to add a special case. Edit : Just replace the "return false" with whatever you want to happen when the user enters a non-integer value.
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value)) {
tot += parseInt(arr[i].value);
}
else{
return false;
}
}
Why isn't dec() decreasing the value?
<div id="variableTest">8</div>
<label id="incButton" onclick="inc()">+</div> </br>
<label id="decButton" onclick="dec()">-</div> </br>
function dec() {
var testDec = document.getElementById("variableTest").innerHTML;
testDec--;
}
function inc() {
var testInc = document.getElementById("variableTest").innerHTML;
testInc++;
}
http://jsfiddle.net/fv6VA/8/
element.innerHTML returns a string, not a number. You should use something like this:
var element = document.getElementById("variableTest");
element_number = parseFloat(element.innerHTML);
element_number++;
element.innerHTML = element_number;
Essentially you have made a copy of innerHTML, and are just decrementing it in javascript memory. You haven't actually set the innerHTML of the variableTest node.
function dec() {
var testDec = document.getElementById("variableTest").innerHTML;
testDec--;
document.getElementById("variableTest").innerHTML = testDec;
}
UPDATE
Also, your HTML is messed up. You need to close your label properly
<div id="variableTest">8</div>
<label id="incButton" onclick="inc()">+</label> </br>
<label id="decButton" onclick="dec()">-</label> </br>
<div class="container">
<input type="button" onclick="decrementValue()" value="-" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="1" id="number" />
<input type="button" onclick="incrementValue()" value="+" />
</div>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if(value<10){
value++;
document.getElementById('number').value = value;
}
}
function decrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if(value>1){
value--;
document.getElementById('number').value = value;
}
}
</script>