How to change Uptick Increments in HTML Number Input - javascript

I have a number input form:
<input type='number' id='select-number'>Pick A number
I have the following questions:
1: The default uptick increment is 1 (when you click the up arrow on the number input, it goes up by a value of one per click.) How can I change that? I want it to go up in values of 0.1 (tenths). How do I do that?
2: Secondly, I have two variables:
feet=true;
meters=false;
One will always be true, and the other false. How do I change the "max" attribute (using Javascript) based on which of these two variables is true? The two variables come from code something like this:
<input type='radio' id='feet' name='unit_of_measurement'>Feet
<input type='radio' id='meters' name='unit_of_measurement'>Meters
<script>
feet=document.getElementById('feet').checked;
meters=document.getElementById('meters').checked;
</script>
If the variable "feet" is true, then the maximum value of the input (Id='select-number') needs to be 3. If it is meters, it needs to be 8.
How can I do that(^), and how can I change the uptick increment? Thanks for any help.
NOTE: Vanilla Javascript only, Please

1) To change the step of an input simply use step=".1" inside the input tag.
2) To change the max on radio change add a onchange="change()" which sets the max and/or step based on which is checked
html
<input type='radio' id='feet' name='unit_of_measurement' onchange="change()" checked>Feet
<input type='radio' id='meters' name='unit_of_measurement' onchange="change()">Meters
js
function change() {
feet = document.getElementById('feet').checked;
meters = document.getElementById('meters').checked;
selectNumber = document.getElementById('select-number');
if (feet) {
selectNumber.max = 300;
selectNumber.step = 1;
} else {
selectNumber.max = 100;
selectNumber.step = .3;
}
};
fiddle or fiddle 2

The default uptick increment can be modified by using step attribute
<input type="number" name="quantity" step="0.1">
and any property can be accessed (set and get) by getting handle of DOM element.
oldValue = document.getElementById('#<id>').propertyName; //get
document.getElementById('#<id>').propertyName = newValue; //set

Related

It seems onChange="myFunction()" is only calling my function once?

I have the following HTML that is within a form, to accept 2 numbers from two separate inputs
<input type="number" id="amount" name="amount" value="0" onchange="ltv()">
<input type="number" id="property_value" name="property_value" value="0" onchange="ltv()">
<p id="ltv"></p>
Then some JavaScript
function ltv() {
var amount = document.getElementById("amount").textContent;
var property_value = document.getElementById("property_value").textContent;
document.getElementById("ltv").innerHTML = Math.round(amount/property_value*100);
};
However after entering a number into the "amount" input the ltv element is updated with NaN which is to be expected at this stage as only the first variable in the math operation is set, however upon entering the second number and tabbing away from the input field the ltv is not updated again.
Seems like textContent isn't returning anything. Try to use .value
function ltv() {
var amount = document.getElementById("amount").value;
var property_value = document.getElementById("property_value").value;
document.getElementById("ltv").innerHTML = Math.round(amount/property_value*100);
};

How to add sum in my input value and chage

I have this code:
<input id=​"InvoiceItemPrice:​:​:​:​" name=​"InvoiceItemPrice:​:​:​:​" value size=​"6">​
<input id=​"InvoiceItemPrice:​:​1:​:​" name=​"InvoiceItemPrice:​:​1:​:​" value=​"46.00" size=​"6">​
<input id=​"InvoiceItemPrice:​:​2:​:​" name=​"InvoiceItemPrice:​:​2:​:​" value=​"79.00" size=​"6">​,
<input id=​"InvoiceItemPrice:​:​3:​:​" name=​"InvoiceItemPrice:​:​3:​:​" value=​"14.00" size=​"6">​
I like add sum in every value ot input type i have this code:
var sum = 100/123;
$('input[name="InvoiceItemPrice::2::"]').each(function()
{
sum *= parseFloat($(this).val());
});
$('input[name="InvoiceItemPrice::2::"]').val(sum);
How to change all value on all input.
I tried with this $("input [name = ' * InvoiceItemPrice ']") but I caught the first that does not have a value and NaN gives me an error.
What is happening is your sum variable is getting re-used in your each statement, if you change that line inside of your each you should be A-ok.
I have created a jsFiddle here https://jsfiddle.net/r79d3121/3/ which may help
HTML
<input id="InvoiceItemPrice::::" name="InvoiceItemPrice::::" value size="6">
<input id="InvoiceItemPrice::1::" name="InvoiceItemPrice::1::" value="46.00" size="6">
<input id="InvoiceItemPrice::2::" name="InvoiceItemPrice::2::" value="79.00" size="6">,
<input id="InvoiceItemPrice::3::" name="InvoiceItemPrice::3::" value="14.00" size="6">
jQuery
var sum = parseFloat(100 / 123);
$(function () {
var result = 0;
$('[id*="InvoiceItemPrice"]').each(function () {
$(this).val(parseFloat((parseFloat($(this).val()) * parseFloat(sum))));
});
});
Updated to change only the value from the input selected
2nd Update, values are calculated when the document is ready, if you want the values to be updated you could always check for .focusout() on each input and then run the code to calculate the value
3rd Update, the html is back to the original and also, you can just user a partial selector in your jQuery which I have provided and updated the jsFiddle link
Try something like this:
$('input[name^=InvoiceItemPrice]').each(function() {
$(this).val("example");
});

Javascript function adding checkboxes to a total number?

I have a function where I'm trying to add the total number of checkboxes ticked to a value that is already displayed in the textbox. The solution I have works but it doesn't update properly if I uncheck the boxes and click total again.
Is there a way I can fix this so that the textbox updates accordingly?
HTML
<td><input type="text" name="Yeses" id="NumberofRisks" class = "form-control" value ="<?php echo $row['Total-Score'];?> " style = "width:50px"></td>
Javascript
function sum()
{
sumField = document.getElementById("NumberofRisks");
var sum = sumField.value;
$("input[name^='yanswer']:checked").each(function(){
sum++;
});
sumField.value = sum;
}
You are updating the value of the input after every call to function sum().
Instead have the initial sum value.
Then every time use this value.
var initial = $("#NumberofRisks").val();
function sum()
{
$("#NumberofRisks").val(initial + $("input[name^='yanswer']:checked").length);
displayRating($("#NumberofRisks").val());
}
Keep the original value of the textbox in a variable. Add an event listener to the checkboxes that count the number of checked boxes and adds that number to the original value, then updates the textbox.
Something like this:
HTML:
<input type="checkbox" class="check" />
<input type="checkbox" class="check" />
<input type="checkbox" class="check" />
<input type="textbox" class="text" />
JS:
//Store the original value. The 5 here should be whatever was supposed to be in the textbox.
var originalValue = 5;
$('.text').val(originalValue);
$('.check').on('change', function() {
//Count the number of checked boxes and add it to the original value for display.
var checked = $('.check:checked').length;
$('.text').val(originalValue+checked);
});
Here's a fiddle.

Adding checkbox values with different input names

I have the following code which adds together checkboxes when they are selected and produces a total at the bottom of the page. This function uses the following code:
<script type="text/javascript">
function checkTotal() {
document.listForm.total.value = '';
var sum = 68.50;
for (i=0;i<document.listForm.choice.length;i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseFloat(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum.toFixed(2);
}
</script>
These checkboxes are within a form, and I need the form to send through to an email account. At the moment because all the checkboxes share the same input name 'choice' the PHP will only send the last checked box value.
I need to change the checkboxes input name code to name the different checkboxes 'choice1' 'choice2' 'choice3'. What would I have to change in the javascript to in order for the function to calculate all the checkboxes names 'choice1' 'choice2' 'choice3' etc rather than just adding together all checkboxes named'choice'? I have little Javascript and PHP knowledge so any help would be grateful. Thanks.
Rather than make the checkbox names unique, it would be better to append "[]" to their name. This will cause PHP to convert the values into an array, rather than just keep the last value.
So you would want a name of choice[] rather than choice.
You can also find some sample code in this answer.
The code below works ok (a self contained web page). The problem is how to get the array (group) of checkboxes when they're called different names. If you use jquery you could give them all the same class, then get hold of them by that class, but if you're using bare javascript then you can get the elements by Tag name ("input" in the case of the checkbox), and check each one has a name attribute that starts with "choice", inoring those that don't start with "choice", like buttons (also an input) or maybe other checkboxes with different names. It's a bit inefficient if the page is huge, unless you group the checkboxes some way.
To group them, you cold put them in a tag like
`<div id="checkboxes"> (checkboxes go here) </div>`
then use
`var cb = document.getElementById("checkboxes");`
`var arrInputs =cb.getElementsByTagName("input");`
for the line to get the arrInputs array. This would just get input type elements from within the Div. Hwever I dind't want to assume the page layout allows your checkboxes to be put in one div
Hope this helps
Doug
<script type="text/javascript">
function checkTotal() {
document.forms.listForm.total.value = '';
var sum = 68.50;
var frm=document.forms.listForm; // wasnt sure what your original listForm element was so I've put this form into a variable, frm
frm.total.value = '';
var arrInputs =document.getElementsByTagName("input"); // get all Input type elements on the form
for (i=0; i < arrInputs .length;i++) {
if (arrInputs[i].name.substr(0,6) == "choice") { // if the name starts with "choice"
if (arrInputs[i].checked) {
sum = sum + parseFloat(arrInputs[i].value);
}
}
}
frm.total.value = sum.toFixed(2);
}
</script>
</head>
<body>
<form name="listForm">
<a href='javascript:checkTotal()'>check</a><br>
<input type=checkbox name="choice1" value="1"><br>
<input type=checkbox name="choice2" value="2"><br>
<input type=checkbox name="choice3" value="3"><br>
<input type=checkbox name="choice4" value="4"><br>
<input type=checkbox name="choice5" value="5"><br>
<input type=checkbox name="choice6" value="6"><br>
<br>
<input type=text name=total value=""><br>
</form>
</body>
</html>

Calculate one variable based on changing input

I have the following function:
function updateInput(ish){
document.getElementById("BetAmount").value = ish;
}
I have the following HTML inputs:
<input class="defaultText" type="number" name="BetAmount" id="BetAmount" onchange="updateInput(this.value)">
<input type="number" name="PotentialGain" id="PotentialGain" />
When users enter in a bet amount number(BetAmount), I would like to instantly show a calculated PotentialGain, which, for example, can be found by multiplying a constant by the specified bet amount entered in by the user.
I'm not very familiar with JavaScript, so any help is greatly appreciated!
Your code is almost correct - you are showing the result in the BetAmount field so no change is visible.
Change your code to:
document.getElementById("PotentialGain").value = ish;
Here's a working demo. I changed the event to onkeyup as onchange only happens on blur - i.e. when a field loses focus.
Here is the final JQuery function that I used.
function changeBet(bet) {
var moneyline = <?php echo json_encode($win) ?>;
var gain = moneyline * bet;
document.getElementById("PotentialGain").value = gain;
}
Along with these inputs:
<input type="text" name="BetAmount[]" id="BetAmount" onkeyup="changeBet(this.value);" >
<input type="number" name="PotentialGain" id="PotentialGain" />

Categories