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.
Related
The result should be like this, 2018-00130. The first 4 numbers are year, I wanted to limit the year to 2010 up to 2022.
I have tried to use the input type = number but I can't limit the numbers since I need the dash sign.
My pattern for now is just like this, pattern="[^a-zA-Z]*" maxlength = "10".
This is a very basic RegEx and quite simple to implement.
Here's the code:
<form>
<label for="code">Code:</label><br>
<input type="text" id="code" name="code" pattern="20(1[0-9]|2[0-2])-[0-9]{5}" maxlength="10" required>
<input type="submit" value="Submit">
</form>
Try this:
<input type="text" maxlength="4" style="width:50px;"> - <input type="text" maxlength="6">
If I set up min = 0.5 than it will only can input 0.5 , 1.5, 2.5 etc.
It cant input a integer like 1, 2, 3 etc.
I am confused. Anyone can tell me why? And how to keep minimum is 0.5 but also accept integer?
<form>
<input type="number" min=0.5 required>
<input type="submit">
</form>
Because you don't provide step, so the default is 1. Just set step attribute to resolve your task
<input type="number" min=0.5 step=0.5 required>
You should use step instead. i.e.
<form>
<input type="number" step="0.5" min="0.5" required>
<input type="submit">
</form>
I have this input field
<input type="datetime-local" required>
I would like the date part to be always required, but not the time part...
I tried with pattern, like
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}.*"
but it doesn't seem to work...
any idea...
Edit:
I explain better here
<form name="test" method="POST" action="/">
<input type="datetime-local" name="event_date_start" id="event_date_start"
min="2011-06-07T00:00"
max="2099-06-14T00:00" required><br>
<input type="submit"/>
What I want is to use datetime, but time must be optional.
With the above example, submit is not allowed until you insert 00 in the time field..
I want to leave that optional...
No need for pattern just use the attributes min, max and value:
<input type="datetime-local"
value="2018-06-12T19:30"
min="2018-06-07T00:00"
max="2018-06-14T00:00" required>
If you want an inputfield with date only use:
<input type="date" required>
For time is optional:
<input type="date" required> <input type="time">
I have this HTML code
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
<input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
<input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>
If I type 1000 on id="amount", the id="cash" min will be 1000.
But it doesn't work.
The most straightforward way is to add an onchange handler to the payment input, such as:
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..."
onchange="document.getElementById('cash').min=this.value;"/>
<input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
<input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>
This gets you the functionality you are looking for without needing to include a third party library like jQuery.
In this case you should use Jquery onchange or keypress
$("#cash").attr({
"min" : $("#amount").val()
});
If you are using jQuery, use the below,
$("#amount").change(function() {
$("#cash").attr('min',$("#amount").val());
});
Refer - https://api.jquery.com/change/
I don't think you can put javascript in min, and also you have a pair of double quote in another pair of double quote, which will break the the tag (You can inspect element and you will figure out.)
So the idea is when the value of amount element change, we change cash's min value. So we can add a event listener to amount element. Whenever it is changed, set the min for cash element. Here is a working sample code:
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
<input required id="cash" type="number" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
</form>
<script>
function setMin() {
var amount = document.getElementById("amount");
var cash = document.getElementById("cash");
cash.min = amount.value;
}
var trigger = document.getElementById("amount");
trigger.addEventListener("change", setMin, false);
</script>
As you can see, I removed your js in html and add a event listener. Hope this will help.
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">