I have an input of type number in my form. Can I set the 'min' and 'max' attributes at once? I mean can I write something like this:
<!DOCTYPE html>
<html>
<body>
<form action="MyWeb.asp">
Quantity (between 1 and 10): <input type="number" name="quantity" min, max="10">
<input type="submit">
</form>
</body>
</html>
instead of:
<!DOCTYPE html>
<html>
<body>
<form action="MyWeb.asp">
Quantity (between 1 and 10): <input type="number" name="quantity" min="1" max="10">
<input type="submit">
</form>
</body>
</html>
No. HTML provides no shorthand means to set multiple attributes at once.
The closest you could come would be to use a loop in JavaScript.
It's not possible to do that, but you can use a hidden input field to force the user to input value of 10.
<input hidden type="number" name="quantity" value="10">
Related
I have an input field which be should bigger than 0, I'm using min="0.00000001" to validate input number is > 0.
<input type="number" step="0.00000001" min="0.00000001" name="price" value="[%price%]" />
Since I don't want to specify the step and min, I just want to validate if the input number is bigger than 0.
Is there any better way to compare input? For example something like input > 0 or min > 0
I search for a solution but could not find one without using step+min.
Using only html5, can we do this? Thanks for any help
<form method="post">
<b>Number Input:</b>
<input type="number" step="0.00000001" min="0.00000001" name="number" value="" />
<input type="submit" class="submit" value="Save" />
</form>
There is no way doing this in pure HTML5 without JavaScript. As mentioned in comments, the pattern attribute cannot be used.
But this can be handled using trivial JavaScript code, invoked via the oninput attribute, and using setCustomValidity:
<form method="post">
<b>Number Input:</b>
<input type="number" step="any" min="0" name="number" value=""
oninput="check(this)" />
<input type="submit" class="submit" value="Save" />
</form>
<script>
function check(input) {
if (input.value == 0) {
input.setCustomValidity('The number must not be zero.');
} else {
// input is fine -- reset the error message
input.setCustomValidity('');
}
}
</script>
I have this type of input in my view:
Form::number('name', 'value');
But I would like to set a max and min values to it, I can't seem to find the way using blade.
In html:
<form action="/action_page.php">
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
You can do that as follows:
{{Form::number('name', 'value',['min'=>1,'max'=>5])}}
Hope this helps you.
I wrote a little test form to see how the output tag works in html. Here is my form.
<form onsubmit="return false" oninput="d.value = (a.valueAsNumber + b.valueAsNumber + c.valueAsNumber)">
<legend>Test</legend>
<p><label for="a">Enter A:</label>
<input type="number" min="0" id="a" value=0 name="a"></p>
<p><label for="b">Enter B:</label>
<input type="number" min="0" id="b" value=0 name="b"></p>
<p><label for="c">Enter C:</label>
<input type="number" min="0" id="c" value=0 name="c"></p>
<p>Sum: <strong><output name="d" for="a b c">0</output></strong></p>
</form>
But I am not getting the output in the form that I am expecting. This is what I see when I run the code through my test website. (Granted, formatting won't copy over.)
Test
Enter A: 3
Enter B: 4
Enter C: 5
Sum:
12
I would think the sum should show up on the same line as it's label, correct? Any ideas as to why it would print on a new line?
Bootstrap's CSS sets the style of output to display:block. You'll need to override it in your own CSS.
For example:
output {
display: inline-block;
}
How would i add the "value" that are selected from radio boxes in html forms? So when someone selects an option it would add the other "values" onto it and total that it at the bottom of the page. And does anyone know if it could add "names" total "values" onto it as well? thanks
My code looks like this:
<h3><u>Title</u></h3><br>
<form action="">
<input type="radio" name="num" value="0">Text<br>
<input type="radio" name="num" value="2">Text<br>
<input type="radio" name="num" value="80">Text<br>
<input type="radio" name="num" value="110">Text<br>
<input type="radio" name="num" value="85">Text<br>
<input type="radio" name="num" value="120">Text<br>
</form>
You cannot. By definition, a set of radio buttons with the same name attribute contributes at most one value to the data set, the one corresponding to the selected button.
If you want something else, you should handle that server side, or use other types of controls, or redesign the entire approach.
Working example :
(using a Javascript library, jQuery, but could be done in plain JavaScript)
You mainly have to change your inputs to type="checkbox" in the HTML
What code does : when a checkbox's state is modified, all checked checkboxes' value are summed up in the last input field I've added
The checkboxes are targetted by looking for "num" in their name, if you remove that the checkbox won't be taken into account by the script.
$(function() {
$("input[name*='num']").on("change", function() {
var total = 0;
$("input[type='checkbox']:checked").each(function() {
total += Number($(this).val());
});
$("#total").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
<u>Title</u>
</h3>
<br>
<form action="">
<input type="checkbox" name="num0" value="0">Add 0<br>
<input type="checkbox" name="num2" value="2">Add 2<br>
<input type="checkbox" name="num80" value="80">Add 80<br>
<input type="checkbox" name="num110" value="110">Add 110<br>
<input type="checkbox" name="num85" value="85">Add 85<br>
<input type="checkbox" name="numwhateveryoulike" value="120">Add 120<br>
Total <input type="text" value="0" id="total">
</form>
I am designing a simple calculator, which has 3 inputs and one output.
I wonder if it's possible to change the formula the output element "uses", based on which input-fields are used (*).
For example, we have tree inputs: Input A, Input B and Input C
If A and B are used (and C is empty), then the formula for Output should be "A+B"
If A and C are used (and B is empty), then the formula for Output should be "A*C"
If B and C are used (and A is empty), then the formula for Output should be "B/C"
So, how can I change the formula used for the output element, based on the used inputs?
This is a simplified example, I hope you get the point :-)
As requested, here's some example code
[code]
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<script>
function Test(){
<!--alert('Formula change!');-->
if (input_a.valueAsNumber && input_b.valueAsNumber){
alert('Formula One');
o.value=input_a.valueAsNumber+input_b.valueAsNumber;
}
if (input_b.value && input_c.value){
alert('Formula Two');
o.value=input_a.valueAsNumber*input_c.valueAsNumber;
}
if (input_a.value && input_c.value){
alert('Formula Three');
o.value=input_b.valueAsNumber/input_c.valueAsNumber;
}
}
</script>
<style>
</style>
<title>Example</title>
</head>
<body onload="">
<form onsubmit="return false" oninput="
Test();
<!--o.value=input_a.valueAsNumber+input_b.valueAsNumber;-->
">
<input name="input_a" id="input_a" type="number" step="any" value="" placeholder="Input A"></br>
<input name="input_b" id="input_b" type="number" step="any" value="" placeholder="Input B"></br>
<input name="input_c" id="input_c" type="number" step="any" value="" placeholder="Input C"></br>
</br>
<output name="o" for="a b c"></output>
</form>
</body>
[/code]
(*) Another possibility might be to have multiple outputs, but hide the ones which are not relevant (based on the inputs)...but how would I do that?
I got it to work, by using the Eval-function
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<script>
function SelectFormula(){
if (input_a.valueAsNumber && input_b.valueAsNumber){
return "input_a.valueAsNumber+input_b.valueAsNumber";
} else if (input_b.value && input_c.value){
return "input_b.valueAsNumber*input_c.valueAsNumber";
} else if (input_a.value && input_c.value){
return "input_a.valueAsNumber/input_c.valueAsNumber";
}
}
</script>
<style>
</style>
<title>Example</title>
</head>
<body onload="">
<form onsubmit="return false" oninput="
o.value=eval(SelectFormula());
">
Input A: <input name="input_a" id="input_a" type="number" step="any" value="" placeholder="Input A"></br>
Input B: <input name="input_b" id="input_b" type="number" step="any" value="" placeholder="Input B"></br>
Input C: <input name="input_c" id="input_c" type="number" step="any" value="" placeholder="Input C"></br>
</br>
Output: <output name="o" for="a b c"></output>
</form>
</body>
I rather not use the Eval-function, but setting o.value=... directly in the function does not work :-(