pknad505's avatar

Creating Forms?

Hello I have been stuck for a long time trying to create a form for my laravel site. I followed the instructions in the tutorial and that didnt work. So i found out that i had to get it from the laravelcollective site. Which i tried and that just broke my whole site and i had to start from scratch again. I want to know is do i need laravelcollective/html to make a form in laravel or can i just use the native laravel and plain html? If so when i used method post it displayed the data from the form in the url why is that?

0 likes
9 replies
IsaacBen's avatar
Level 7

I just use regular HTML forms. I think it's easier to read and understand.

Here is an example of a simple form:

<form action="material/add" method="post" accept-charset="UTF-8">
    {{ csrf_field() }}

    <div class="col-md-5 form-group">
        <label>Add Material:</label><br>
        <input  class="textWidth form-control" name="type" id="type" type="text" placeholder="type">
        <input  class="textWidth form-control" name="price" id="price" type="text" placeholder="price">
        <button  type="submit" title="add" class="button button-action button-square button-small addMaterial"><i class="fa fa-plus"></i></button>
    </div>

</form>
2 likes
IsaacBen's avatar

@pknad505 It generates a token, without it you will get an error from Laravel. This is supposed to protect you from CSRF=cross site frogery. It's a good thing basically.

2 likes
IsaacBen's avatar

@pknad505 No problem. Let me save you some trouble in the future.

In case your method is not post or get you'll get an error because html forms don't support it. To solve it you'll have to add a hidden field with the method type.

Here is an example for a delete form. If it's patch then just change it to patch.

<form action="client/delete" method="post" accept-charset="UTF-8">
    {{ csrf_field() }} {{ method_field('DELETE') }}
<input name="name" type="hidden" value="{{$clients->name}}">
<button type="submit" id="{{$clients->name}}" title="remove" class="button button-caution button-square button-small delete"><i class="fa fa-trash-o"></i></button>

</form>

If you're using AJAX then you will need to add a CSRF token in the page header.

 <meta name="csrf_token" content="{{ csrf_token() }}"/>

This is how an AJAX delete method would look like. Of course change it to your needs

$(document).delegate(".delete", "click", function (e) {
    e.preventDefault();
    var id           = this.id;
    var removeRow    = $(this).closest("tr").attr('id');
    var form         = $(this).parents('form:first');
    var url          = form.prop('action');
    var conformation = confirm("Are you sure you want to delete " + id +"?");
    //Stop the process if user clicks cancel
    if(!conformation){
        return;
    }

    $.ajax({
        url: url,
        type: "delete",
            beforeSend: function (xhr) {
            var token = $('meta[name="csrf_token"]').attr('content');
            if (token) {
                  return xhr.setRequestHeader('X-CSRF-TOKEN', token);
            }                
        },
        data: {'name': id},
        success:function(data){
            $("#"+removeRow).remove();
            toastr.success(id +" has been deleted successfully");

        },error:function(){ 
            toastr.error("Something went wrong");
        } 
     });
  });
1 like
neovive's avatar

@IsaacBen Thanks for posting the delete example. It was very helpful. How do you typically handle form-model binding without laravelcollective/html? Especially for update forms and repopulating form elements on errors.

1 like
IsaacBen's avatar

@neovive I just type it by myself. I prefer to avoid "magic" if I can. Because later I will forget what I had there.

Here is an edit form that I have. It keeps the data incase there was an error. The 'old' input has a default of what's in the database. In case there was an error it will show the 'old' input that user entered so it will save it and the user won't have to add it again. To make it work automatically I created a request file.

<form class="form-inline" method="POST" action="/ticket/{{$ticket->id}}" accept-charset="UTF-8" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="saveEdit form-group">
      <button class="button button-square button-primary saveButton" type="submit" title="save">
        <i class="fa fa-lg fa-save"></i>
      </button>
    </div>
<br>
<fieldset>
    <h3 class="legendForm">Update Ticket</h3>
        <div class="form-group">
            <label for="clientName">Client: </label><br>
            <select class="textWidth form-control" name="clientName" id="clientName" type="text">
                <option value="{{$ticket->clientName}}" selected="selected">{{$ticket->clientName}}</option>
                @foreach($client as $clients)
                    @if($clients->name !== $ticket->clientName)
                      <option value="{{$clients->name}}">
                        {{$clients->name}}
                      </option>
                    @endif
                @endforeach
            </select>
        </div>

        <div class="form-group">
            <label for="contactName">Contact: </label><br>
            <input class="textWidth form-control" name="contactName" id="contactName" type="text"
             value="{{ old('contactName', $ticket->contactName) }}">
        </div>

        <div class="form-group">
            <label for="contactPhone">Contact Phone: </label><br>
            <input class="textWidth form-control" name="contactPhone" id="contactPhone" type="text"
            value="{{ old('contactPhone', $ticket->contactPhone) }}">
        </div>

        <div class="form-group">
            <label for="refNumber">Reference Number:</label><br>
            <input class="textWidth form-control" name="referenceNumber" id="refNumber" type="text"
            value="{{ old('referenceNumber' ,$ticket->referenceNumber) }}">
        </div>
<br><br>
        <div class="form-group">
            <label for="datepicker1">Date:</label><br>
            <input class="textWidth datepicker2 form-control" id="datepicker" name="date" type="text"
            value="{{ old('date' ,Carbon::parse($ticket->date)->format('m/d/Y') )}}">
        </div>

        <div class="form-group">
            <label for="dueDate">Due Date:</label><br>
            <input class="textWidth datepicker2 form-control" id="dueDate" name="dueDate" type="text"
            value="{{ old('dueDate' ,Carbon::parse($ticket->dueDate)->format('m/d/Y') )}}">
        </div>

        <div class="form-group">
            <label for="timeDue">End Time: </label><br>
            <input class="textWidth form-control" name="timeDue" id="timeDue" type="text"
            value="{{ old('timeDue', $ticket->timeDue) }}">
        </div>

        <div class="form-group">
            <label for="jobPriority">Job Priority:</label><br>
            <select class="textWidth form-control" name="jobPriority" id="jobPriority" type="text">
                <option value="{{$ticket->jobPriority}}" selected="selected">{{ old('jobPriority', $ticket->jobPriority) }}</option>
                @foreach($priority as $priorities)
                    @if($priorities->name !== $ticket->jobPriority)
                      <option value="{{$priorities->name}}">
                        {{$priorities->name}}
                      </option>
                    @endif
                @endforeach
            </select>
        </div>
        
<br><br>

        <div class="form-group">
            <label for="jobLocation">Job Location:</label><br>
            <input class="jobLocationWidth form-control" name="jobLocation" id="jobLocation" type="text"
            value="{{ old('jobLocation', $ticket->jobLocation) }}">
        </div>

        <div class="form-group">
            <label for="workerName">Dispatched To:</label><br>
            <select class="textWidth form-control" name="workerName" id="workerName" type="text">
                @if(old('workerName'))
                    <option value="{{ old('workerName') }}" selected="selected">{{ old('workerName') }}</option>
                @else
                    <option value="{{$ticket->workerName}}" selected="selected">{{$ticket->workerName}}</option>                
                @endif
                @foreach($worker as $workers)
                      <option value="{{$workers->name}}">
                        {{$workers->name}}
                      </option>
                @endforeach             
            </select>
        </div>
        
        <div class="form-group">
            <label for="jobStatus">Status:</label><br>
            <select class="textWidth form-control" name="jobStatus" id="jobStatus" type="text">
                <option disabled selected> -- select an option -- </option>
                @foreach($status as $statuses)
                      <option value="{{$statuses->name}}">
                        {{$statuses->name}}
                      </option>
                @endforeach
            </select>
        </div>
<br><br>
        <div class="form-group">
            <label for="workDescription">Work Description:</label><br>
            <textarea class="textAreaWidth form-control" rows="4" name="workDescription" id="workDescription">{{ old('workDescription', $ticket->workDescription) }}</textarea>   
        </div>
        
</fieldset>

</form>
pknad505's avatar

Hello again @isaacjohnson i am not sure what i am doing wrong here. I am using the post method but its still putting the data inside the url what am i doing wrong. This is my form currently:

<form role="form" action="registerCont" method="post">
                    {{ csrf_field() }}
                    <h2>Please Sign Up
                        <small>It's free and always will be.</small>
                    </h2>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="text" name="first_name" id="first_name" class="form-control input-lg"
                                       placeholder="First Name" tabindex="1">
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="text" name="last_name" id="last_name" class="form-control input-lg"
                                       placeholder="Last Name" tabindex="2">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" name="display_name" id="display_name" class="form-control input-lg"
                               placeholder="Display Name" tabindex="3">
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" id="email" class="form-control input-lg"
                               placeholder="Email Address" tabindex="4">
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="password" name="password" id="password" class="form-control input-lg"
                                       placeholder="Password" tabindex="5">
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="form-group">
                                <input type="password" name="password_confirmation" id="password_confirmation"
                                       class="form-control input-lg" placeholder="Confirm Password" tabindex="6">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-4 col-sm-3 col-md-3">
                        {{--<input type="checkbox" name="t_and_c" id="t_and_c" class="hidden" value="1">--}}
                        </div>
                        <div class="col-xs-8 col-sm-9 col-md-9">
                            By clicking <strong class="label label-primary">Register</strong>, you agree to the <a
                                    href="#" data-toggle="modal" data-target="#t_and_c_m">Terms and Conditions</a> set
                            out by this site, including our Cookie Use.
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-md-6"><input type="submit" value="Register"
                                                               class="btn btn-primary btn-block btn-lg" tabindex="7">
                        </div>
                        <div class="col-xs-12 col-md-6"><a href="#" class="btn btn-success btn-block btn-lg">Login</a>
                        </div>
                    </div>
                </form>

IsaacBen's avatar

@pknad505 Very weird. Try to add type of submit to your button. Make sure that you have that URL in post also.

Please or to participate in this conversation.