Issue submitting form data from boostrap 4 modal - laravel

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.

Related

Not able to load bootstrap modal with ajax data

I am using codeigniter to create my website. I have a dropdown menu in my first page that contains links like 'Profile', 'Edit' etc. When i click on the link (profile) it should display the bootstrap modal with corresponding user data. Used jquery to get the current id and ajax to retrieve data from database. But, when i tried to load the bootstrap modal with the response data, it displays nothing. What should i do to load the modal with ajax response data.? The response is an array containing user name, address, phone number etc.
Modal HTML
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<div id="UserName"></div>
<div id="Address"></div>
<div id="Phone"></div>
</div>
<div class="modal-footer" id="buttons-box">
<button type="button" class="btn default" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>
</div>
your jQuery script
$.get('your_server_script.php', {UserId: 'UserId'}, function (response) {
$('#UserName').text(response.UserName);
$('#Address').text(response.Address);
$('#Phone').text(response.Phone);
$('#MyModal').modal('show');
});

Bootstrap classes for laravel 5 form submit button

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

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/

Delete data using modal box in laravel

I have some problem to delete data with confirmation (in this case using modal box) in laravel.
This is my delete button
{{ Form::open(array(
'route' => array('delete_spk', $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-danger btn-line btn-rect" type="submit" data-toggle="modal" data-target="#delSpk" data-title="Delete SPK" data-message='Are you sure you want to delete this data ?'>
<i class="icon-trash icon-white"></i> Delete</button>
{{ Form::close() }}
This is the modal box
<!--MODAL DELETE SPK-->
<div class="col-lg-12">
<div class="modal fade" id="delSpk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H4"> Delete SPK</h4>
</div>
<div class="modal-body">
<p class="help-block">Are you sure you want to delete this data ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-line btn-rect" id="confirm">Yes</button>
<button type="button" class="btn btn-primary btn-line btn-rect" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
<!--END OF MODAL DELETE SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#delSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
// Pass form reference to modal for submission on yes/ok
var form = $(e.relatedTarget).closest('form');
$(this).find('.modal-footer #confirm').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#delSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
This is the route
Route::get('spk/destroy/{id}', array('as'=>'delete_spk','uses'=>'SpkController#destroy'));
And this is the Controller for delete the data
public function destroy()
{
$spk= Spk::find(Input::get('id'))->delete();
Session::flash('message', 'Successfully deleted the SPK !');
return Redirect::to('spk_view');
}
The modal box is working, but when I'm getting the ID to delete, this will be ended with results "method not allowed http exception". Can someone help me please?
This issue happens because you have defined the route as GET but submitting the form as PUT
If you define you route as below then it must work
Route::put('spk/destroy/{id}', array('as'=>'delete_spk','uses'=>'SpkController#destroy'));

Laravel blade templates

I'm having difficulty getting my head around laravels blade templates.
I have a master.blade and I have an index.blade, no problems there.
What I want to do is inside my index.blade I want to nest another view: modal.blade
// modal.blade.php
<!-- Modal -->
<div id="message" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">{{ $header }}</h3>
</div>
<div class="modal-body" style="min-height: 430px">
{{ $modal_content }}
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
{{ Form::submit('Save', array('class' => 'btn btn-primary')) }}
</div>
</div>
And I want to dynamically generate content for my modal.blade depending on the value of some variable inside my index.blade. Have I completely got the wrong idea or can this be done? Could someone please point me in the right direction?
Any help greatly appreciated.
Try this:
#include(view.name);
Basically you will need to #include('your.modal'), but there are some answers that may clarify layouting even better to you here: Templating in Laravel.

Resources