How can i have a number limit? im trying to make it so that you can only type the number 1-100 in "app-benutzer" and 1-15 in "backend-benutzer" also is there a way to display these numbers in the input field without typing them so it would show the user that you can only type the number from 1-15.
html:
<body>
App-Benutzer: <input type="number" min="1" max="100" class='appuser'></input><br>
Backendbenutzer: <input type="number" min="1" max="15" class='backenduser'></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>
<script src="./app.js"></script>
</body>
js:
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
btncalc.addEventListener('click', function(){
var backendanzahl= document.getElementsByClassName("backenduser")[0].value;
var appanzahl= document.getElementsByClassName("appuser")[0].value;
var mytext="Anzahl der Summe:" + (+backendanzahl * 35 + +appanzahl * 7.5) ;
summetext.textContent = mytext;
});
You can achieve this only by using HTML.
This way, you can't really write anything more than what you specify in your terms.
Clarification:
Placeholder is the attribute that you use to put some text inside of your input field, but that text will disappear as soon as you click on your element.
oninput is the Event that occurs every time that value of your input element has changed. So basically, each time you write 1 number/letter/whatever, oninput event will trigger.
That's where we put our condition.
this.value - represents what we write inside of our input element.
our value (this.value) = if (this.value > 100) (? represents something like return) return 100 ( (:) is like else) else return this.value
this.value = this.value > 100 ? 100 : Math.abs(this.value)
is equivalent to
if(this.value > 100) //this.value is what we write inside of the field
return 100;
else
return this.value;
<body>
App-Benutzer: <input type="number" min="1" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value)" class='appuser' placeholder='1-100'></input><br>
Backendbenutzer: <input type="number" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value)" class='backenduser' placeholder='1-15'></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>
<script src="./app.js"></script>
</body>
You can use placeholder attribute of input field to put any text you want. This text will disapear once the user starts to edit the field. In you case you may may sat a placeholder to visualise "1-15".
<body>
App-Benutzer: <input type="number" min="1" max="100" class='appuser' placeholder="Input a value from 1 to 100"></input><br>
Backendbenutzer: <input type="number" min="1" max="15" class='backenduser' placeholder="Input a value from 1 to 15"></input><br>
<button class='calcit'>Berechnen</button><br>
<span class='summe'>0.00</span><br>
<script src="./app.js"></script>
</body>
Related
I have two input fields in my contact form, in both fields it's only possible to fill in a number. My question is, is there a way that the number in field 1 can never be higher than the number in field 2?
I have looked everywhere but can't find a solution. Is this even possible (with Javascript)? Hopefully somebody has a solution or can send me in the right direction.
<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>
function forceLimit(e) {
var limit = e.target.getAttribute("max");
if(e.target.value > limit)
e.target.value = limit;
}
function handleLimitChange(e) {
var limit = e.target.value;
var fieldOne = document.querySelector('#field-one');
if(fieldOne.value > limit) {
fieldOne.value = limit;
}
fieldOne.setAttribute('max', limit);
}
<form>
<input type="number" id="field-one" class="fieldone" onchange="forceLimit(event)" min="0" max="16" step="0.1">
<input type="number" id="field-two" class="fieldtwo" onchange="handleLimitChange(event)" min="0" max="16" step="0.1">
</form>
You can use jQuery to check that always the value in field 2 is greater or equal to field 1:
$('.fieldone').change(function(){
checkValue();
});
$('.fieldtwo').change(function(){
checkValue();
});
function checkValue(){
var maxValue = $('.fieldtwo').val();
if(maxValue > 0 && $('.fieldone').val() > maxValue){
$('.fieldone').val(maxValue);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>
This is not working for me. Can anyone tell me what I'm doing wrong?
function showValues() {
var uIwD;
uIwD = document.getElementById(uInputs.fWD);
alert ("You entered: " + uIwD);
}
<form id="uInputs">
Enter a value in the first field, then press Submit:<br>
<input type="number" id="fWD" value="" min="0" max ="6">
Weekday (0 to 6 for Sun to Sat)<br>
<input type="number" name="fHr" value="" min="0" max ="23">
Hour (0 to 23)<br>
<input type="number" name="fMins" value="" min="0" max ="59">
Minutes (0 to 59)<br>
<input type="number" name="fSecs" value="" min="0" max ="59">
Seconds (0 to 59)<br>
<input type="number" name="fWOffset" value="-6" min="-12" max ="12">
wOffsetHours (-12 to 12)<br>
<input type="button" value="Submit" onclick="showValues()">
</form>
I enter a value of 3 in the first input field, then I click "Submit" and I get a js alert popup saying "You entered: null"
I have tried replacing name= with ID= in the first input field, and then using just that ID in GetElementbyID(), but the result is the same.
Here is a working page where you can see the result. (I tried making a fiddle for it, but when I run it in jsfiddle, I get no alert message at all. It would seem js alert pop-ups don't work in jsfiddle.)
You are accessing it wrong. id should be a string and then you can access the Childs with id's as properties.
For example to test the first input box
function showValues() {
var uIwD;
var uIwD = document.getElementById("uInputs");
alert ("You entered: " + uIwD.fWD.value);
}
</head>
<body>
<form id="uInputs">
Enter a value in the first field, then press Submit:<br>
<input type="number" id="fWD" value="" min="0" max ="6">
Weekday (0 to 6 for Sun to Sat)<br>
<input type="number" name="fHr" value="" min="0" max ="23">
Hour (0 to 23)<br>
<input type="number" name="fMins" value="" min="0" max ="59">
Minutes (0 to 59)<br>
<input type="number" name="fSecs" value="" min="0" max ="59">
Seconds (0 to 59)<br>
<input type="number" name="fWOffset" value="-6" min="-12" max ="12">
wOffsetHours (-12 to 12)<br>
<input type="button" value="Submit" onclick="showValues()">
</form>
I have 6 sliders, each with a respective value from 0-100. I'd love to be able to show each slider percentage (against the total slider sum) to the right of each slider, but I am not sure how to do that.
I am able to grab the slider value to display above, as well as the slider values and sum of the values as JavaScript variables, but I'm not able to...
1) update the percentage values as the sliders are moved (I think I might need to write a separate function that does this, and then call it right after the slider values are displayed?) or
2) display the percentage values (which I rounded to a whole number effectively) just to the right after where the slider value is.
Can anyone clue me in on how to do this? It shouldn't be difficult from a technical standpoint but I have little experience in this arena. I am not using jquery either (as you can tell)... Thanks!
Code:
http://jsbin.com/owIjEXA/7/edit
<!-- Put divs here... trying to set up the display of percentages -->
<div id="val_weight1"></div>
<div id="val_weight2"></div>
<div id="val_weight3"></div>
<div id="val_weight4"></div>
<div id="val_weight5"></div>
<div id="val_weight6"></div>
<!-- form start -->
<form name = "form_weight1" id = "form_weight1" >
<text><b> First Weight </b></text>
<input id="weight1" input type="range" name="weight1" min="0" max="100" value="40" step="1" onchange="showValue(this); " />
<span id="range">40</span>
<text>/ PERCENTAGE%</text>
<script type="text/javascript">
<!-- Original JS bin that modified code: http://jsbin.com/ISekuSiN/5/edit -->
function get_nextsibling(n) {
x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling; }
return x; }
function showValue(self) {
get_nextsibling(self).innerHTML=self.value; }
</script>
</form>
<form name = "form_weight2" id = "form_weight2" >
<text><b> Second Weight </b></text>
<input id="weight2" input type="range" name="weight2" min="0" max="100" value="10" step="1" onchange="showValue(this); " />
<span id="range">10</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight3" id = "form_weight3" >
<text><b> Third Weight</b></text>
<input id="weight3" input type="range" name="weight3" min="0" max="100" value="20" step="1" onchange="showValue(this); " />
<span id="range">20</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight4" id = "form_weight4" >
<text><b> Fourth Weight </b></text>
<input id="weight4" input type="range" name="weight4" min="0" max="100" value="5" step="1" onchange="showValue(this); " />
<span id="range">5</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight5" id = "form_weight5" >
<text><b> Fifth Weight </b></text>
<input id="weight5" input type="range" name="weight5" min="0" max="100" value="5" step="1" onchange="showValue(this); " />
<span id="range">5</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight6" id = "form_weight6" >
<text><b> Sixth Weight </b></text>
<input id="weight6" input type="range" name="weight6" min="0" max="100" value="20" step="1" onchange="showValue(this); " />
<span id="range">20</span>
<text>/ PERCENTAGE%</text>
</form>
<script type="text/javascript">
var weightfactor1 = parseInt(document.getElementById("weight1").value) ;
var weightfactor2 = parseInt(document.getElementById("weight2").value) ;
var weightfactor3 = parseInt(document.getElementById("weight3").value) ;
var weightfactor4 = parseInt(document.getElementById("weight4").value) ;
var weightfactor5 = parseInt(document.getElementById("weight5").value) ;
var weightfactor6 = parseInt(document.getElementById("weight6").value) ;
var weight_factor_sum = weightfactor1 + weightfactor2 + weightfactor3 + weightfactor4 + weightfactor5 + weightfactor6 ;
document.getElementById('val_weight1').innerHTML = (weightfactor1 / weight_factor_sum)*100;
document.getElementById('val_weight2').innerHTML = (weightfactor2 / weight_factor_sum)*100;
document.getElementById('val_weight3').innerHTML = (weightfactor3 / weight_factor_sum)*100;
document.getElementById('val_weight4').innerHTML = (weightfactor4 / weight_factor_sum)*100;
document.getElementById('val_weight5').innerHTML = (weightfactor5 / weight_factor_sum)*100;
document.getElementById('val_weight6').innerHTML = (weightfactor6 / weight_factor_sum)*100;
</script>
Try this as a starting point:
document.querySelector("#range").addEventListener("change", function(e){
document.querySelector(".range").textContent=e.currentTarget.value;
})
Here is the Fiddle to play with.
When dealing with several sliders, it doesn't make sense to add a change event for each of the sliders, instead use event-delegation (you attach the change-listener to the parent element containing all sliders and dispatch the event yourself).
Here is a Fiddle dealing with more sliders an a sum field.
I’m trying to figure out how to store JavaScript slider values as variables, to use later on for d3.js.
In the head of my html doc I have 6 sliders, each which displays 0-100 value.
I want to assign the slider values as variables – one variable for each slider. At each point in time, of course, each slider will only have one value.
But the idea is that I can change the slider position to change the slider value, and then hit an update button and then the newer slider values will become the new variable values.
I’ve tried a variety of different naming methods but none seems to be the right syntax.
What I am caught up on, is how to refer to the (slider) form by id or name or input id, which is html, when I create JavaScript variables for the values that are selected using the sliders.
Any ideas on how I can get this to work?
I searched online and could not readily find a solution on how to do this, or even a template to go off of. Any suggestions are welcome. Thanks!
Code is posted below (I took away my non-working attempts and replaced with hard coded values as an example for what slider positions could look like):
<p>
<form name = "weight1" id = "weight1" >
<text><b> weight1 </b></text> <input id="weight1" input type="range" name="weight1" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
<script type="text/javascript">
function get_nextsibling(n) {
x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling; }
return x; }
function showValue(self) {
get_nextsibling(self).innerHTML=self.value; }
</script>
</form>
<form name = "weight2" id = "weight2" >
<text><b> weight2 </b></text> <input id="weight2" input type="range" name="weight2" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight3" id = "weight3" >
<text><b> weight3 </b></text> <input id="weight3" input type="range" name="weight3" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight4" id = "weight4" >
<text><b> weight4 </b></text> <input id="weight4" input type="range" name="weight4" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight5" id = "weight5" >
<text><b> weight5 </b></text> <input id="weight5" input type="range" name="weight5" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight6" id = "weight6" >
<text><b> weight6 </b></text> <input id="weight6" input type="range" name="weight6" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
</p>
<script type="text/javascript">
//put JavaScript function that makes each slider a variable, or just assign slider values directly to variables if easier...then use in body
var weightfactor1 = 0 ; //want this variable to be the form output value instead of hard coded values between 0-100 ...so weight1 slider
var weightfactor2 = 100 ; //want this variable to be weight2 slider value
var weightfactor3 = 10 ; //want this variable to be weight3 slider value
var weightfactor4 = 100 ; // " "" weight4
var weightfactor5 = 12 ; // " "" weight5
var weightfactor6 = 100 ; // " "" weight6
</script>
See: http://jsbin.com/ISekuSiN/5 for an example of the working sliders (solution that was provided to a prior question I had about this, Displaying values from multiple JavaScript slider values )
Couple of suggestions:
Make sure your html has been rendered before running your JavaScript
For the case above case you can use the document object as follows:
var weightFactor1 = document.getElementById("weight1").value;
hi i have a textbox in html and i want a user to enter the numeric values only which will be for eg. 0,1,2,3,4,5,6,7,8,9,10 and if a user enters 11 it should show an alert box showing "only 0-10 is allowed" since i am a newbie
so far i have this script
SCRIPT language=Javascript>
function validateForm()
{
var x=document.form["tst"]["num"].value;
var y = parseInt( x , 10 )
var i=15;
if (y>i)
{
alert("Range is Between 0-10");
return false;
}
}
</script>
here is my textbox code,
<INPUT id="num" name="num" onkeypress="return validateForm()" size="2" maxlength="2" type="text" >
You could use an HTML5 input type for ease:
<input type="number" min="0" max="10">
This could potentially remove the need for ghastly modal popups.
Try to change var i=15; to var i=11;
<input type="number" name="quantity" min="0" max="10">