CODEWITHSUNDEEP
htmllaravellaravel-5laravel-blade
user3506325
user3506325

Reputation: 141

How to add input type="number" in Laravel Blade template?

I want to make an input field where the user can only enter a number. In HTML5, we can use <input type="number">. How do I do this in blade?

I tried this:

{!! Form::number('amount', null, array('class' => 'form-control')) !!}

Upvotes: 3

Views: 24743

Answers (5)

smartrahat
smartrahat

Reputation: 5649

You can use either Form::input() method or Form::number() method to achieve your goal.

Form::input() method

This method takes 4 arguments.

  1. $type - (required) The first argument specifies the type of input. Values such as "text", "number", "password", "file", etc. are accepted.
  2. $name - (required) The second argument is name.
  3. $value - (optional) The third argument is the value for the input field.
  4. $options - (optional) The fourth argument is an array of additional field attributes. The array can be populated with items having keys such as "id", "size", or "class".

Example:

{{ Form::input('number', 'name') }}
{{ Form::input('number', 'name', 'value', ['class' => 'number', 'id' => 'numberField']) }}

//both example will create elements like this

<input name="name" type="number" value="value">
<input name="name" type="number" value="value" class="number" id="numberField">

Form::number() method

This method takes 3 arguments.

  1. $name - (required) The first argument is name.
  2. $value - (optional) The second argument is the value for the input field.
  3. $options - (optional) The third argument is an array of additional field attributes. The array can be populated with items having keys such as "id", "size", or "class".

Example:

Form::number('name')
Form::number('name', null, ['class' => 'number', 'id' => 'numberField'])

//both example will create elements like this

<input name="name" type="number">
<input name="name" type="number" class="number" id="numberField">

Tips: if you want to use $options and don't want to assign any default value, use null at the $value argument.

Upvotes: 5

markcanals
markcanals

Reputation: 71

{!!  Form::input('number', 'weight', null, ['id' => 'weight', 'class' => 'form-control', 'min' => 1, 'max' => 9999, 'required' => 'required']) !!}

Upvotes: 0

derrysan7
derrysan7

Reputation: 457

You can use javascript:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

and in your html:

<input name="input_name" onkeypress="return isNumberKey(event)">

Upvotes: -1

Jay Vignesh
Jay Vignesh

Reputation: 179

Input field with minimum value of 0. 

{!! Form::number('count', $value = '' , ['min' => '0' ,'class' => 'form-control', 'id' => 'number_count','required']) !!}

Upvotes: 1

user3506325
user3506325

Reputation: 141

I could search and code it. Since there was no direct answer, I thought to post the working code below:

{!! Form::input('number', 'amount', null, ['class' => 'form-control']) !!}

Upvotes: 9

Related Questions