i have a bootstrap modal dialog which use laravel form to register a user.
Here's the code:
<div id="addPenggunaModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="ModalLabel">Tambah Pengguna Baru</h3>
</div>
<div class="modal-body">
{{ Form::open(array('url'=>'users/addpengguna','class'=>'form-horizontal', 'method'=> 'POST')) }}
<ul>
#foreach($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
<div class="control-group">
<label for="firstname" class="control-label">First Name:</label>
<div class="controls">
{{ Form::text('firstname', null, array('class'=>'span3', 'placeholder'=>'First Name')) }}
</div>
</div> <!-- /field -->
<div class="control-group">
<label for="lastname" class="control-label">Last Name: </label>
<div class="controls">
{{ Form::text('lastname', null, array('class'=>'span3', 'placeholder'=>'Last Name')) }}
</div>
</div> <!-- /field -->
<div class="control-group">
<label for="email" class="control-label">Email Address: </label>
<div class="controls">
{{ Form::text('email', null, array('class'=>'span3', 'placeholder'=>'Email Address')) }}
</div>
</div> <!-- /field -->
<div class="control-group">
<label for="password" class="control-label">Password:</label>
<div class="controls">
{{ Form::password('password', array('class'=>'span3', 'placeholder'=>'Password')) }}
</div>
</div> <!-- /field -->
<div class="control-group">
<label for="confirm_password" class="control-label">Confirm Password:</label>
<div class="controls">
{{ Form::password('password_confirmation', array('class'=>'span3', 'placeholder'=>'Confirm Password')) }}
</div>
</div> <!-- /field -->
<div class="control-group">
<label for="type_user" class="control-label">Tipe Pengguna:</label>
<div class="controls">
{{ Form::radio('level', '1'); }} Supervisor
{{ Form::radio('level', '0'); }} Sales
</div>
</div> <!-- /field -->
</form>
</div>
<div class="modal-footer">
{{ Form::submit('Simpan', array('class'=>'button btn btn-primary','id'=>'mdl_save_change'))}}
<button class="btn" data-dismiss="modal" aria-hidden="true">Batal</button>
</div>
{{ Form::close() }}
</div>
then i use the controller to save the details:
public function postAddpengguna(){
/* function to add user in data pengguna */
$validator = Validator::make(Input::all(), User::$rules);
if($validator -> passes()){
$user = new User;
$user->firstname = Input::get('firstname');
$user->lastname = Input::get('lastname');
$user->email = Input::get('email');
$user->password = Hash::make(Input::get('password'));
$user->level = Input::get('level');
/* save the following details */
$user->save();
return Redirect::to('pengguna');
} else {
return Redirect::to('index');
}
}
but the form doesn't save any data to database. I have another page called registration and it works.
my questions:
how to trace POST from laravel form submit, is there any browser extension?
how to trace error log in laravel
any ideas what's going on in my problem?
thank you in advance.
UPDATE
Here's the screenshot that describe how this works.
bootstrap modal:
when i press the submit button (blue button in modal) i want it to save the data to db. The function php is shown above.
PS. i don't use any AJAX to call the value from the FORM. But when i use the AJAX, it always error because TOKEN is missing.
First of all check the action and _token field of form . To add token field in your form you should include the following line in your form:
<input type="hidden" name="_token" value="{{csrf_token()}}">
To re-use bootstrap modal in your project you can check this Github link
In the latest versions of laravel 5 you can use a shortcut to get the token field.
<form ... >
{!! csrf_field() !!}
</form>
In this case you'll get something like
<input type="hidden" name="_token" value="hpyL7cUbCMFBGRfCi2dpzE5XHGj8WuyY2jqloKRx">
You can in any case get the token string calling csrf_token(), anyway I honestly prefer the csrf_field() alternative.
You may use this code with your ajax code:
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': {!! json_encode(csrf_token()) !!}
}
});
});
Related
I am doing an inventory management page for my school project, and currently, the form whihroducts is shifted to the left.
How it looks like:
{% extends "base.html" %}
{% block title %}Adding a new product{% endblock %}
{% block content %}
{% from "includes/formHelper.html" import render_field %}
<h1 class="display-4">Add new product</h1>
<form method="POST" action="">
<!-- Container class for Form -->
<div id="container py-2">
<div class="form-group" >
<div class="col-sm-3 order-5 float-right py-2">
{{ render_field(form.name, class="form-control") }}
</div>
</div>
<div class="form-group">
<div class="col-sm-3 order-5 float-right py-2">
{{ render_fiel {{ render_field(form.type, class="form-control") }}
</div>
</div>
<div class="form-group">
<div class="col-sm-3 order-5 float-right py-2">
d(form.stock, class="form-control") }}
</div>
</div>
<div class="form-group">
<div class="col-sm-3 order-5 float-right py-2">
{{ render_field(form.price, class="form-control") }}
</div>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-success btn-lg float-left">
</form>
I tried using CSS to float-right and row-reverse the entire form to the right of the page, but it still does not work out.
I have a form in which some inputs are disabled but have default values generated and set before the form loads (I can see the default values on the form inputs which are disabled). On form submission, the controller validates the form values before creating an entry in the database. My problem is the disabled inputs with the default values are being seen as blank and I keep getting an error that the input values are requried
HTML
<form enctype="multipart/form-data" method="POST" action="{{ route('admins.store') }}">
#csrf
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label class="bmd-label-floating">Admin Names</label>
<input type="text" name="name" class="form-control {{ $errors->has('name') ? 'error' : '' }}" id="name">
<!-- Error -->
#if ($errors->has('name'))
<div class="error">
{{ $errors->first('name') }}
</div>
#endif
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="bmd-label-floating">Admin ID</label>
<input type="text" name="adminID" value="{{ $adminID }}" class="form-control {{ $errors->has('adminID') ? 'error' : '' }}" id="adminID" disabled>
<!-- Error -->
#if ($errors->has('adminID'))
<div class="error">
{{ $errors->first('adminID') }}
</div>
#endif
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">Admin Email</label>
<input type="email" name="email" class="form-control {{ $errors->has('email') ? 'error' : '' }}" id="email">
<!-- Error -->
#if ($errors->has('email'))
<div class="error">
{{ $errors->first('email') }}
</div>
#endif
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label class="bmd-label-floating">Phone Number</label>
<input type="text" name="phonenumber" class="form-control {{ $errors->has('phonenumber') ? 'error' : '' }}" id="phonenumber">
<!-- Error -->
#if ($errors->has('phonenumber'))
<div class="error">
{{ $errors->first('phonenumber') }}
</div>
#endif
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="bmd-label-floating">Access Level</label>
<input type="text" name="accessLevel" value="admin" class="form-control {{ $errors->has('accessLevel') ? 'error' : '' }}" id="accessLevel" disabled>
<!-- Error -->
#if ($errors->has('accessLevel'))
<div class="error">
{{ $errors->first('accessLevel') }}
</div>
#endif
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="bmd-label-floating">Password</label>
<input type="text" name="password" value="{{ $password }}" class="form-control {{ $errors->has('accessLevel') ? 'error' : '' }}" id="password" disabled>
<!-- Error -->
#if ($errors->has('password'))
<div class="error">
{{ $errors->first('password') }}
</div>
#endif
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right">Add Admin</button>
<div class="clearfix"></div>
</form>
Controller:
if(Auth::check())
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'phonenumber' => 'required|regex:/^([0-9\s\-\+\(\)]*)$/|min:10',
'adminID'=>'required',
'accessLevel'=>'required',
'password'=>'required'
]);
$admin = Admin::where('email', '=', $request->email)->first();
Following your sample code
<div class="col-6">
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control form-control-sm" placeholder="yyyy-mm-dd"
name="d2" #c2="ngModel" [(ngModel)]="model2" ngbDatepicker #d2="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" (click)="d2.toggle()" type="button">
</button>
</div>
</div>
</div>
</form>
<hr/>
<button class="btn btn-sm btn-outline-primary" (click)="model2 = null">Select Today</button>
<hr/>
<pre>M: {{ model2 | json }}</pre>
<pre>S: {{ c2.status }}</pre>
<pre>B: {{ c2.status==INVALID }}</pre>
</div>
works fine. But I want to set an error-class for the whole input-group, something like
<div class="input-group" [ngClass]="{ 'has-error':isInValid }">
But the evalutation of the c2.status never evaltuates to true/false dynamically. It remains unchanged ==> How to make a proper compare to set the class dynamically?
Thx to JB Nizet I figured out the following proper syntax:
<div class="input-group" [ngClass]="{ 'has-error': c2.invalid }">
EDIT I am not using resource controller but I believe my route is correct
I have a form on it called recordings I have the form like:
<form class="form-horizontal" role="form" method="POST" action="{{ url('/recordings/create') }}" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label class="col-md-4 control-label">Client Name</label>
<div class="col-md-6">
{!! Form::select('ClientName', $client_options, '', array('class' => 'form-control')) !!}
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">File</label>
<div class="col-md-6">
<input type="file" class="form-control" name="FileUpload">
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Submit
</button>
</div>
</div>
</form>
Then in my RecordingsController
public function store()
{
var_dump(Input::file('FileUpload'));
var_dump(Input::get('ClientName')) ;
}
My route:
Route::get('recordings/create', 'RecordingsController#create');
Route::post('recordings/create', 'RecordingsController#store');
Why is it the var_dump is null? I have a dropdown which has values in it and I already selected one. The other one is file input filed which I also selected already a file.
Try:
public function store(Request $request) {
$ClientName = $request->ClientName:
if ($this->request->hasFile('FileUpload'))
{
$files = $this->request->file('FileUpload');
....
Or simple use
dd($request);
Always a good idea here is to use Firebug - to check out which values are submitted to your script.
Works now. Problem is I am sending huge data in my post. So I did is changed the post_max_size in my php.ini. Weird though I am not getting error regarding that.
I updated Laravel 4.1 recently and an exiting modal window form is not working correctly. I have figured out that for some reason after the Laravel 4.1 update, Laravel is auto inserting an tag into my modal body. (I have the Form::close() in the footer. I was just curious if anyone else has seen this or can offer an explanation of why this is happening and how to prevent it. I am good about searching through my issues, but this one is not yielding me any results.
Note that if I move my submit button into the modal-body div, then submit works as expected and updates goes through the normal process.. but for some reason with this particular modal, having the submit button in the footer puts the submit button outside of the form as the form close is auto inserted before the end of the modal-body div. Also strangely enough I have this working on another page, and everything works as expected.
Here is the relevant code:
<div class="modal-body">
<?php
$access = Session::get('user_access');
$userid = Session::get('user_id');
?>
{{ Form::open(array('method'=>'POST','route' => 'users.store', 'style' => 'display:inline')) }}
#foreach($user as $userinfo)
<!-- Set hidden form element with userid embedded -->
<input type="hidden" name='id' id='id' value={{ $userid }}>
<!-- Display the username and profile Picture -->
<h2><center>{{ $userinfo->username }}</center></h2>
<br><br>
<!-- 2 Column Form to change user information and display current status -->
<div class ='container col-md-offset-1'>
<div class='row col-md-3'>
<div>
{{ Form::label('givenname', 'First Name:') }} <br>
<input type="text" name='givenname' id='givenname' value={{ $userinfo->givenname }}>
</div><br />
<div>
{{ Form::label('surname', 'Last Name:') }} <br>
<input type="text" name='surname' id='surname' value={{ $userinfo->surname }}>
</div><br />
<div>
{{ Form::label('email', 'Email Address:') }} <br>
<input type="text" name='email' id='email' value={{ $userinfo->email }}>
</div><br />
</div>
<div class='row col-md-3'>
<div>
{{ Form::label('password', 'New Password:') }} <br>
<input type="password" name='password' id='password' value={{ $userinfo->password }}>
</div><br />
<div>
{{ Form::label('password_confirmation', 'Confirm New Password:') }} <br>
<input type="password" name='password_confirmation' id='password_confirmation' value={{ $userinfo->password }}>
</div><br />
<div>
{{ Form::label('useraccess', 'Current Subscription Status:') }} <br>
{{ $access }}
</div><br />
</div>
</div>
#endforeach
</div> <!-- End Modal Body -->
<div class="modal-footer">
{{ Form::submit('Save', array('class' => ' btn btn-warning')) }}
<!-- Close the form -->
{{ Form::close() }}
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
When I run the developer tools in the browser, I can see the auto insert
<form method="POST" action="http://dev.app.myapp.com/users" accept-charset="UTF-8"><input name="_token" type="hidden" value="<TOKEN">
<!-- Set hidden form element with userid embedded -->
<input type="hidden" name="id" id="id" value="6">
<!-- Display the username and profile Picture -->
<h2><center>johndoe123</center></h2>
<br><br>
<!-- 2 Column Form to change user information and display current status -->
<div class="container col-md-offset-1">
<div class="row col-md-3">
<div>
<label for="givenname">First Name:</label> <br>
<input type="text" name="givenname" id="givenname" value="John">
</div><br>
<div>
<label for="surname">Last Name:</label> <br>
<input type="text" name="surname" id="surname" value="Doe">
</div><br>
<div>
<label for="email">Email Address:</label> <br>
<input type="text" name="email" id="email" value="johndoe#notarealemail.com">
</div><br>
</div>
<div class="row col-md-3">
<div>
<label for="password">New Password:</label> <br>
<input type="password" name="password" id="password" value="Encrypted Password String">
</div><br>
<div>
<label for="password_confirmation">Confirm New Password:</label> <br>
<input type="password" name="password_confirmation" id="password_confirmation" value="Encrypted Password String">
</div><br>
<div>
<label for="useraccess">Current Subscription Status:</label> <br>
User </div><br>
</div>
</div>
</form>
<div class="modal-footer">
<input class=" btn btn-success" type="submit" value="Save">
<!-- Close the form -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
The reason is that your mark-up is lacking proper structure. You begin the <form> in some element, then close it inside another element.
Check out the page source (ALT+CMD+U on Mac). You will notice </form> exactly where you originally put Form::close() (inside <div class="modal-footer">).
That position, however, is invalid mark-up, as I mentioned before. The browser doesn't know exactly what you want, but it will try to come to a conclusion, so it correctly moves </form> down one level.
What you are seeing in developer tools is not what was printed out by Laravel, but actually how the browser interpreted your invalid mark-up.
A solution for this specific case: move Form::close() after <div class="modal-footer">.