Bootstrap classes for laravel 5 form submit button - laravel-5

Below is the part of input field and submit button.
I want to increase the width of submit button as the input field using bootstrap.
Here is my code.
<div class="form-group col-md-6">
{!! Form::label('Event Photo') !!}
</div>
<div class="form-group col-md-6">
<input type='file' name='photo' id ='photo' class ='form-control'/>
</div>
<div class="form-group col-md-12">
{!! Form::submit('Add', array('class'=>'btn btn-primary')) !!}
</div>
But the button size can't get increased like that. Where am I wrong? How should I solve that?

The array() part of your form allows you to pass in any other parameters that you want.
Just as you are using it to define the class, you can use it to define the style:
<div class="form-group col-md-12">
{!! Form::submit('Add', array('class'=>'btn btn-primary', 'style' => 'width:50px;)) !!}
</div>
Just change 50px to whatever width you want to use.

Adding the class btn-lg will work.
You can find that in the documentation

Related

Issue submitting form data from boostrap 4 modal

I cannot get data to submit from a modal in laravel. When I use the below code and hit the 'add user' button, the modal just closes and doesn't seem to call the #store method in my controller. Data doesn't get submitted to the db
<div class="modal fade" id="addNew" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{!! Form::open(['method' =>'POST', 'action'=> 'UsersController#store', 'files'=>true, 'enctype'=>'multipart/form-data']) !!}
<div class="form-group {{$errors->has('firstName') ? 'has-error' : ''}}">
{!! Form::label('firstName', 'First Name:') !!}
{!! Form::text('firstName', null, ['class'=>'form-control', 'rows' => 3])!!}
#if($errors->has('firstName'))
{{$errors->first('firstName')}}
#endif
</div>
{{--most form data removed for simplicity--}}
<div class="form-group">
{!! Form::submit('Add user', ['class'=>'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
csrf token is missing in your form, which will not allow to submit data in controller.
Add " #csrf " in form and try again.
It happens when your submit button scope is out of the form/div scope or if there is any other button used before submit button.
As you haven't pasted other code for simplicity there must be a button before or issue with HTML tags. Please check all Div tags formatting(opening & closing) or add HTML code here from source code for more help.
Thank you,
Happy Coding.

How to set errorPlacement after form-group in Yii2

How can I set errorPlacement in Yii2 activeform or using kartik active form just after form-group?
Below are code for view file.
<div class="col-sm-6">
<div class="form-group field-signupform-value1 required">
<label class="control-label" for="signupform-value1">value1 Name</label>
<input type="text" id="signupform-value1" class="form-control" name="SignupForm[value1]" placeholder="value1 Name" aria-required="true">
<p class="help-block help-block-error"></p>
</div>
</div>
I want html code as below. should auto add after .
<div class="col-sm-6">
<div class="form-group field-signupform-value1 required">
<label class="control-label" for="signupform-value1">value1 Name</label>
<input type="text" id="signupform-value1" class="form-control" name="SignupForm[value1]" placeholder="value1 Name" aria-required="true">
</div>
<p class="help-block help-block-error"></p>
</div>
Looking at your inputs, it is not needed to change the replacement of the error message, though if you want to play with the input template properties, you can refer the following
<?php $form = ActiveForm::begin([
'fieldConfig'=>['template'=>'<div style="border:solid 1px black;padding-bottom:15px">{label}{input}{hint}</div>{error}']
]); ?>
in the above template properties, you can change the placement of error template or event add some HTML inside it, hope it will help you.
Edit:
I have added inline css to div, you can put your css class which is applying outer border.
I achieved by below code. Thank for kind suggestion.
<?php
$form = ActiveForm::begin([
'fieldConfig'=>['template'=>' <div class="custom">
{label}{input}
</div>
{error}',
'inputOptions' => [
'placeholder' => 'Username ...',
'class'=>'form-control',
]]
]); ?>
and given css to "custom" class for border-box
You can use another hidden input like this:
$form->field($model, "your_field")->hiddenInput([
'class' => 'hidden_input_val'
])->label(false) // (for validation messages)
To display error in HTML:
<?=Html::error($model, 'your_field', ['class' => 'help-block']) ?>
Then you just have to hide this hidden input's .help-block with css

Creating a Form Label Element

How to create form label element in laravel.
I want to convert below html
<label class="control-label">Status <span class="required">*</span></label>
I used
{!! Form::label('status', 'Status <span class="required">*</span>', array('class' => 'control-label')) !!}
But the output is
Status <span class="required">*</span>
The question is how to render HTML in it, Or is there a way?
You can't - Laravel Collective's Form::label function runs it through htmlspecialchars.
That said, Form::label is just generating HTML. You're fine using raw HTML for this - just add a for="status" to link it up to its form field.
<label class="control-label" for="status">Status <span class="required">*</span></label>
You could, I suppose, run the generated label through htmlspecialchars_decode, but I think that's uglier and confusing for someone else reading your code.
{!! htmlspecialchars_decode(Form::label('status', 'Status <span class="required">*</span>', array('class' => 'control-label'))) !!}

Laravel 5 TokenMismatchException on login

I developed an application with laravel locally with homestead and now I try to get it running on a shared host. As soon as I hit the login button I get the exception: TokenMismatchException in VerifyCsrfToken.php line 53
I read that many people have problems with the TokenMismatchException but all of the proposed solutions didn't work for me. I deleted all files in the storage/framework/sessions folder (and the folder has 777 permissions). I deleted all cookies and since I use {!! Form:open !!} the hidden _token field exists (I also posted the source code).
My whole app expects the user to be logged in, so immediately after visiting the page I get redirected to the login form.
auth/login.blade.php
#extends('app')
#section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Login</div>
<div class="panel-body">
{!! Form::open(array('url' => '/auth/login', 'class' => 'form-horizontal')) !!}
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
{!! Form::email('email', null, ['class' => 'form-control']) !!}
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
{!! Form::password('password', ['class' => 'form-control']) !!}
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
{!! Form::checkbox('remember', '1', false, ['id' => 'remember']) !!}
{!! Form::label('remember', 'Remember Me') !!}
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
{!! Form::submit("Login", ['class' => 'btn btn-block btn-primary']) !!}
</div>
</div>
{!! Form::close() !!}
#if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
</div>
</div>
</div>
</div>
</div>
#endsection
This is how the source code looks like:
<input name="_token" type="hidden" value="HoSZ4shS8b1avwrkJZzGiUQCWRZL0VPtj3mfvJmI">
<div class="form-group">
<label class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input class="form-control" name="email" type="email">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input class="form-control" name="password" type="password" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<input id="remember" name="remember" type="checkbox" value="1">
<label for="remember">Remember Me</label>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<input class="btn btn-block btn-primary" type="submit" value="Login">
</div>
</div>
</form>
Part of my routes.php
Route::get('auth/login', 'Auth\AuthController#getLogin');
Route::post('auth/login', 'Auth\AuthController#postLogin');
Route::get('auth/logout', 'Auth\AuthController#getLogout');
I'm not sure which code is necessary to see to be able to help me with this, please let me know if I need to post some more.
Thanks to everyone who cares about my question.
Is the URL in the <form> tag correct? Is the host name the same as the one where you're visiting the page?
I'll explain:
Imagine you're developing a site at http://www.mypage.com and while you're developing, you're visiting http://localhost.
If you visit http://localhost/auth/login and the form tag looks like this:
<form action="http://www.mypage.com/something">
You're going to get the TokenMismatchException when you submit a form.
Why? It's all about cookies.
When you visit a page at http://localhost, Laravel creates a session and saves the session ID to your browser in a cookie. Cookies are (generally) only accessible to pages from the same host, so if you visit http://localhost/page1 and http://localhost/page2, the server knows that those two visits are part of the same session because the cookie is accessible on both page visits.
If, on the other hand, you visit http://localhost/page1, then you visit http://www.mypage.com/page2, the server has no way of knowing that those two visits are part of the same session, because the cookie that was set when you visited page1 is not available when you visit page2 (because the host name is different).
So, that's what I think is happening:
you visit http://localhost/auth/login while you're developing.
Laravel sets up a CSRF token and adds it to the form on the page
Laravel also inserts the action for the form tag as http://www.mypage.com/auth/login (or whatever the default value is).
You click submit and the request is sent to http://www.mypage.com/auth/login (because that's what's in the form tag)
Laravel gets a token which does not match what it saved for your session at http://www.mypage.com (if a session even exists) because it doesn't have the session ID that it assigned to the session visiting http://localhost
The solution is to check your config & ensure that you're doing all the development via visits to a single hostname.
I somehow solved this now. I installed Laravel from scratch on the server and tried to copy as little as possible and make most changes manually. Don't know what lead to this Exception though.
Here is the thread that led me to the solution: https://laracasts.com/discuss/channels/code-review/request-session-token-not-equal-token/

Laravel 5.0 paginate jump to page section

I'm using Laravel 5.0 and paginate along with the render() function in my view. Rather than go back to the top of the screen after I select the next page I want it to jump to #msgs.
Here is some of my code:
<h1 class="centered" id="msgs">Announcements</h1>
#foreach($messages->getCollection()->all() as $message)
<div class="row">
<div class="row">
<div class="col-sm-9">
<h3>{{$message->title}}</h3>
</div>
<div class="col-sm-3">
<h4>From: {{$message->author_name}}</h4>
</div>
</div>
<div class="row">
<p>{{$message->text}}</p>
</div>
</div>
<hr class="featurette-divider">
#endforeach
<div class="centered">
{!! $messages->render() !!}
</div>
I'm still getting a grasp on the flow of things in laravel so I'm not really sure what to do. I tried to use append->('#msgs') but realized that its appending an array in the parameters, not appending a path to the url. I there a simple way to achieve this without overriding anything?
You might want to use fragment() method:
{!! $messages->fragment('msgs')->render() !!}
Here is the link to the documentation: Pagination - Laravel

Resources