How can I do this Input as a Dropdown button in bootstrap
<div class="form-group">
<label class="col-md-4 control-label" for="user_type">Tipi userit</label>
<div class="col-md-8">
<input id="user_type" name="user_type" type="text" placeholder="Tipi i Userit Admin/Editor/User" class="form-control input-md" value="{{ old('user_type') }}" required>
#if ($errors->has('user_type'))
<span class="help-block">
<strong>{{ $errors->first('user_type') }}</strong>
</span>
#endif
</div>
</div>
Related
Hi everyone!
I'm trying to allow same day booking for my calendar using the
t-datepicker. I'm trying to use different methods from the
documentation to allow same day booking. For example to allow users to
book from 6th of june till 6th of June. However it's not allowing that
and always adds an extra day when booking. The code is below.
<div class="modal fade" id="myModal">
<div class=row>
<div class="col-sm-10 offset-sm-1">
<div class="modal-dialog modal-lg">
<form action="" method="POST">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Quick Booking</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
{{ csrf_field() }}
#isset($error_msg)
#foreach ($error_msg as $error)
<li class="text-danger">{{ $error }}</li>
#endforeach
#endisset
<div class="form-group row">
<label for="placeid" class="col-md-4 col-form-label text-md-right">{{ __('Place ID') }}: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="place_id" required>
</div>
</div>
<div class="form-group row">
<label for="placeid" class="col-md-4 col-form-label text-md-right">{{ __('Arrival day') }}: </label>
<div class="col-md-6">
<div class="container11">
<div class="t-datepicker">
<span id="tdatepik" class="t-check-in"></span>
<span id="searchdate_numberofdays" class="t-check-out"></span>
#isset($maparray['err_msg'])
<span id="errormsg_txt" style="color:red;"> {{ __('You can book maximum') }} {{ $maparray["set_admin"]->max_no_days }} {{ __('days') }}.</span><br>
#endisset
<span id="errormsg_txt" style="color:red;display:none;"> {{ __('Arrival day is not selected') }}. </span><br>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="fullname" class="col-md-4 col-form-label text-md-right">{{ __('Full Name') }}: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="user_fullname" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('Email address') }}: </label>
<div class="col-md-6">
<input type="email" class="form-control" name="user_email" required>
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-md-4 col-form-label text-md-right">{{ __('Phone') }}: </label>
<div class="col-md-6">
<input type="tel" class="form-control" name="user_phone" required>
</div>
</div>
<div class="form-group row">
<label for="geust" class="col-md-4 col-form-label text-md-right">{{ __('Number of adults') }}[1-4]: </label>
<div class="col-md-6">
<select class="form-control booking_inp_textbox_style" id="numberofguest" name="numberofguest" onchange="addFieldsadmin(this.value);">
<option value="0" active>1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="babies" class="col-md-4 col-form-label text-md-right">{{ __('Number of babies') }}[1-4]: </label>
<div class="col-md-6">
<select class="form-control booking_inp_textbox_style" id="numberofbabies" name="numberofbabies" onchange="addFieldsadmin2(this.value);">
<option value="0" active>0</option>
<option id="hidden_op_style1" value="1">1</option>
<option id="hidden_op_style2" value="2">2</option>
<option id="hidden_op_style3" value="3">3</option>
<option id="hidden_op_style4" value="4">4</option>
</select>
</div>
</div>
<div class="containerinput">
{{-- dynamic input surname using javascript --}}
</div>
<div class="containerinput2">
{{-- dynamic input surname using javascript --}}
</div>
<div class="form-group row">
<label for="promo" class="col-md-4 col-form-label text-md-right">{{ __('Promo Code') }}: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="user_promo">
</div>
</div>
<div class="form-group row">
<label for="book" class="col-md-4 col-form-label text-md-right">{{ __('Booked By') }}: </label>
<div class="col-md-6">
<label>{{ Auth::user()->name }}</label>
</div>
</div>
#if (Auth::user()->role == 'admin')
<div class="form-group row">
<label for="Ammount" class="col-md-4 col-form-label text-md-right">{{ __('Payment Type') }}: </label>
<div class="col-md-6">
<input type="radio" name="user_payment_type" value="Entrance">
<label for="Entrance" class="booking_payment_type_style">{{ __('Entrance (Cash)') }}</label>
<input type="radio" name="user_payment_type" value="Admin" checked>
<label for="Entrance" class="booking_payment_type_style">{{ __('Admin (Free)') }}</label><br>
</div>
</div>
#else
<div class="form-group row">
<label for="promo" class="col-md-4 col-form-label text-md-right">{{ __('Payment Type') }}: </label>
<div class="col-md-6">
<input type="radio" name="user_payment_type" value="Entrance" checked>
<label for="Entrance" class="booking_payment_type_style">{{ __('Entrance (Cash)') }}</label>
</div>
</div>
#endif
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">{{ __('Save') }}</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var today = new Date();
tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 60);
var date = tomorrow.getFullYear()+'-'+(tomorrow.getMonth()+1)+'-'+tomorrow.getDate();
$(document).ready(function(){
// Call global the function
$('.t-datepicker').tDatePicker({
// options here
titleDateRange :'{{ __('day') }}',
titleDateRanges:'{{ __('days') }}',
titleToday :'{{ __('Today') }}',
limitDateRanges :'{{ $set_admin->max_no_days+300 }}',
titleCheckIn :'{{ __('Check In') }}',
titleCheckOut :'{{ __('Check Out') }}',
numCalendar : 1,
//endDate: date,
nextDayHighlighted :false,
toDayHighlighted :true,
toDayShowTitle :true,
autoClose: true,
dateRangesHover: false,
});
});
// $('.t-datepicker').tDatePicker('setEndDate','2020-07-28');
</script>
<script type="text/javascript">
#isset($error_msg)
#if (count($error_msg) > 0)
$('#myModal').modal('show');
#endif
#endisset
</script>
im trying to save a profile image on a register blade, the images are going to database with the name but couldn't be save on my public/imgs repository, so i can't even show on a view. Can someone help me to resolve this problem? the name of the image on my database is "foto".
public function store
public function store(StoreUpdatePost $request)
{
$data = $request->all();
if($request->foto('foto')->isValid()){
$file = $request->foto->storeAs('public/users',$nameFile);
$file = str_replace('public/','app/',$file);
$data['foto'] = $file;
}
User::create($data);
//foto upload
if($request->hasFile('foto') && $request->file('foto')->isValid()){
$requestFoto = $request->foto;
$extension = $requestFoto->extension();
$fotoName = md5($requestFoto->getClientOriginalName() . strtotime("now")) . "." . $extension;
$request->foto->move(public_path('imgs\users'), $fotoName);
$data->foto = $fotoName;
$data->save();
}
}
VIEW REGISTER BLADE
#extends('layouts.app')
#section('content')
<div class="container"><!---->
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card" >
<br>
<div class="textocs">
<h4>CADASTRE-SE</h4>
</div>
<br><br>
<div class="card-body">
<form method="POST" enctype=”multipart/form-data” action="{{ route('register') }}">
#csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Nome') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control #error('name') is-invalid #enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
#error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
<br>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-mail:') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control #error('email') is-invalid #enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
#error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
<br>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Senha:') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control #error('password') is-invalid #enderror" name="password" required autocomplete="new-password">
#error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
<br>
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Redigite a senha:') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
<br>
</div><br>
<div class="form-group row">
<label for="cidade" class="col-md-4 col-form-label text-md-right">{{ __('Cidade') }}</label>
<div class="col-md-6">
<input id="cidade" type="text" class="form-control #error('cidade') is-invalid #enderror" name="cidade" value="{{ old('cidade') }}" required autocomplete="cidade" autofocus>
#error('cidade')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
<br>
</div>
</div>
<div class="form-group row">
<label for="numero" class="col-md-4 col-form-label text-md-right">{{ __('Número') }}</label>
<div class="col-md-6">
<input id="numero" type="number" class="form-control #error('numero') is-invalid #enderror" name="numero" value="{{ old('numero') }}" required autocomplete="numero" autofocus>
#error('numero')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
<br>
</div>
</div>
<div class="form-group row">
<label for="foto" class="col-md-4 col-form-label text-md-right">{{ __('Foto') }}</label>
<div class="col-md-6">
<label for="foto">Foto:</label>
<input type="file" class="form-control-file" name="foto" >
<br>
</div>
</div>
<br><br>
<button type="submit" class="btn btn-primary">
{{ __('Cadastrar') }}
</button>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
MIGRATION TO ADD FIELDS ON USERS TABLE
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddCamposTableUsers extends Migration
{
/**
* Run the migrations.
*
* #return void
*/
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('cidade');
$table->string('numero');
$table->string('foto')->nullable();
});
}
/**
* Reverse the migrations.
*
* #return void
*/
public function down()
{
Schema::table('users', function (Blueprint $table) {
Schema::dropIfExists('users');
});
}
}
Well I am using this form to register a user in database but It is not successfully being storing data. While RegisterContoller.php is in Auth section. And I have given route: Auth::routes();. But still I why it is not storing data.
Register.blade.php
<form style="margin-left: 30%; margin-right: 30%; margin-top: 5%;" class="form-horizontal" method="POST" action="{{ route('register') }}">
{{ csrf_field() }}
<div class="form-group organic-form-2 {{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name">Your Name *</label>
<input id="name" class="form-control" type="text" name="name" value="{{ old('name') }}" required autofocus>
#if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
<div class="form-group organic-form-2 {{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email">Your Email *</label>
<input id="email" class="form-control" type="email" name="email" value="{{ old('email') }}" required>
</div>
<div class="form-group organic-form-2">
<label>Password *</label>
<input class="form-control" type="Password">
</div>
<div class="form-group organic-form-2">
<label>Repeat Password *</label>
<input class="form-control" type="Password">
</div>
<div class="form-group remember-me">
<div class="checkbox pull-left">
<label>
<input type="checkbox" name="value1"> Privacy Policy Agreement?
</label>
</div>
</div>
<div class="form-group footer-form">
<button class="btn btn-brand pill" type="submit">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
RegisterController.php
protected function validator(array $data)
{
return Validator::make($data, [
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:6|confirmed',
]);
}
protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => bcrypt($data['password']),
]);
}
}
It seems you miss input names in your form.
Instead of:
<div class="form-group organic-form-2">
<label>Password *</label>
<input class="form-control" type="Password">
</div>
<div class="form-group organic-form-2">
<label>Repeat Password *</label>
<input class="form-control" type="Password">
</div>
use:
<div class="form-group organic-form-2">
<label>Password *</label>
<input class="form-control" type="Password" name="password">
</div>
<div class="form-group organic-form-2">
<label>Repeat Password *</label>
<input class="form-control" type="Password" name="password_confirmation">
</div>
I have a form with the following setup:
<div class="row">
<div class="col-3">
#include('acp.sidebar')
</div>
<div class="col-9">
#if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form class="form-horizontal" role="form" method="POST" action="{{ url('acp/provider/add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="hidden" name="id">
<fieldset>
<legend>Grunddaten</legend>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="description">Beschreibung</label>
<textarea class="form-control" id="description" name="description" required></textarea>
</div>
<div class="form-group">
<label for="url">Domain</label>
<input type="text" class="form-control" id="url" name="url" required>
</div>
<div class="form-group">
<label for="ref">Ref-Code</label>
<input type="text" class="form-control" id="ref" name="ref" required>
</div>
<div class="form-group">
<label for="image">Logo</label>
<input type="file" name="image" id="image" class="form-control" accept="image/*">
</div>
<div class="form-group">
<label for="checkboxes">Payment-Anbieter</label>
<div>
#foreach($paymentProviders as $key => $provider)
<label class="checkbox-inline" for="checkboxes-{{$key}}">
<input name="paymentProviders[]" id="checkboxes-{{$key}}" value="{{$provider->id}}" type="checkbox">
<img src="{{url('/images/paymentProvider/small/'.$provider->image)}}">
{{$provider->name}}
</label>
#endforeach
</div>
</div>
</fieldset>
<fieldset>
<legend>Crawler</legend>
<div class="form-group">
<label for="attributes">Suchattribute</label>
<input type="text" class="form-control" id="attributes" name="attributes" required>
</div>
<div class="form-group">
<label for="crawlerType">Typ</label>
<select id="crawlerType" name="crawlerType" class="form-control">
#foreach($crawlerTypes as $crawlerType)
<option value="{{$crawlerType}}">{{$crawlerType}}</option>
#endforeach
</select>
</div>
</fieldset>
<div class="form-group">
<div class="pull-right">
<button type="submit" class="btn btn-primary">
Absenden
</button>
</div>
</div>
</form>
</div>
</div>
As you can see there is a input named "attributes" down below. When I add this, I can't submit my form. It's like clicking on a button with no "submit" attribute.
After removing or renaming this input, it works. It's not a big thing to rename my input - I'm just interested if this is a bug, or a for me unkown feature.
I'm using Bootstrap v4.0.0-alpha.6 and Laravel 5.4.22.
I have the following form but I am having some trouble to make all the fields of the same length. As a matter of fact, is the code too long? I am a begginer so I don't know if I am repeating a lot of code.
Here is the html piece:
<div class="panel panel-default">
<div class = "panel-heading">
Informações do Imóvei
</div>
<div class="panel-body">
<div class="form-inline">
<label class="control-label">{{anuncioForm.tipo_imovel.label}}</label>
<p>Selecione o tipo do seu imóvel</p>
<select class="form-control control-label"
id="id_{{ anuncioForm.tipo_imovel.name }}"
name="anuncioForm.tipo_imovel.name">
<option value="" selected="selected">---------</option>
<option value="Casa">Casa</option>
<option value="Apartamento">Apartamento</option>
<option value="Comercial">Comercial</option>
</select>
</div>
<br>
<div class="form-group">
<label for="exampleTextarea">Descrição do imóvel</label>
<p>Descreva com o máximo de detalhes o seu imóvel</p>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<br>
<p><b>Características do imóvel</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.quartos.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.quartos.name }}"
name="id_{{ anuncioForm.quartos.name }}"
type="text"/>
</div>
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.suites.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.suites.name }}"
name="id_{{ anuncioForm.suites.name }}"
type="text"/>
</div>
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.banheiros.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.banheiros.name }}"
name="id_{{ anuncioForm.banheiros.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_construida.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_construida.name }}"
name="id_{{ anuncioForm.area_construida.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_total.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_total.name }}"
name="id_{{ anuncioForm.area_total.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control"
id="id_{{ anuncioForm.data_construcao.name }}"
name="id_{{ anuncioForm.data_construcao.name }}"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
<br>
<p><b>Preço de Venda</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_venda.name }}"
name="id_{{ anuncioForm.preco_venda.name }}"
type="text"/>
</div>
</div>
<br>
<p><b>Preço do Aluguel</b></p>
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_aluguel.name }}"
name="id_{{ anuncioForm.preco_aluguel.name }}"
type="text"/>
</div>
</div>
<br>
</div>
So, what do you suggest me?
You can take advantage of bootstrap grids col-xx-xx or adjust your input width externally.
Better read this: https://v4-alpha.getbootstrap.com/components/input-group/ and https://stackoverflow.com/a/25017998/6107715
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/*.input-group{min-width: 200px; max-height: 500px;}*/
</style>
</head>
<div class="panel panel-default">
<div class="panel-body">
<br>
<p><b>Características do imóvel</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.quartos.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.quartos.name }}"
name="id_{{ anuncioForm.quartos.name }}"
type="text"/>
</div>
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.suites.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.suites.name }}"
name="id_{{ anuncioForm.suites.name }}"
type="text"/>
</div>
<div class="col-xs-3 col-sm-3 input-group ">
<span class="input-group-addon"><label>{{ anuncioForm.banheiros.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.banheiros.name }}"
name="id_{{ anuncioForm.banheiros.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_construida.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_construida.name }}"
name="id_{{ anuncioForm.area_construida.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>{{ anuncioForm.area_total.label }}</label></span>
<input class="form-control"
id="id_{{ anuncioForm.area_total.name }}"
name="id_{{ anuncioForm.area_total.name }}"
type="text"/>
</div>
</div>
<br>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>Data de Construção</label></span>
<input class="form-control"
id="id_{{ anuncioForm.data_construcao.name }}"
name="id_{{ anuncioForm.data_construcao.name }}"
type="text"/>
</div>
<p>Insira o ano em que o imóvel foi construído</p>
</div>
<form class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<label class="input-group-addon" for="exampleInput">Name</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
</div>
</form>
<br>
<p><b>Preço de Venda</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_venda.name }}"
name="id_{{ anuncioForm.preco_venda.name }}"
type="text"/>
</div>
</div>
<br>
<p><b>Preço do Aluguel</b></p>
<div class="form-inline">
<div class="col-xs-3 col-sm-3 input-group">
<span class="input-group-addon"><label>R$</label></span>
<input class="form-control"
id="id_{{ anuncioForm.preco_aluguel.name }}"
name="id_{{ anuncioForm.preco_aluguel.name }}"
type="text"/>
</div>
</div>
<br>
</div>
I think your issue is that you are putting on every input. it should be :
<form class="form-inline">
<div class="form-group">
<label for="exampleInput">Name</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Jane Doe">
</div>
</form>
Then, apply your width settings to the class
.form-group
this will adjust the width of the label and input to match as they will auto adjust.
Hope this helps.