Laravel & jQuery - Add form fields dynamically using template

Question

I am using Laravel and I have a Booking model that has a one to many relationship with a Service. So a booking can have many services.

I have set up all the relationships in the models and its working fine.

In my bookings create view file I have a panel where I want to allow users to dynamically add services.

{{ Form::open(array('url' => 'bookings')) }}


    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">Services</h3></div>  
        <div class="panel-body" id="newServices">                 
            <a href="#" id="addService" class="btn btn-default pull-right">Add Service</a>
        </div>
    </div>

    {{ Form::submit('Create Booking', array('class' => 'btn btn-primary btn-vostra')) }}

{{ Form::close() }}

I have a template view file bookings.service which has some input elements:

@extends('layouts.app')

@section('content')

            <div class="form-group">
                    {{ Form::label('customer_name', 'Customer Name') }}
                    {{ Form::text('customer_name',  Input::old('customer_name'), array('class' => 'form-control')) }}
            </div>

            <div class="form-group">
                    {{ Form::label('customer_address_line_1', 'Address Line 1') }}
                    {{ Form::text('customer_address_line_1', Input::old('customer_address_line_1'), array('class' => 'form-control')) }}
            </div>

            <div class="form-group">
                    {{ Form::label('customer_address_line_2', 'Address Line 2') }}
                    {{ Form::text('customer_address_line_2', Input::old('customer_address_line_2'), array('class' => 'form-control')) }}
            </div>

@endsection

My question is how do I dynamically add the services view template file into the bookings view file?

Here is what I have so far but its incomplete:

$('#addService').click(function(e) {
        e.preventDefault();
        var html = {};
        $('#newServices').append(html);
});

Did you figure it out? Could you share what was the solution? — brunohdaniel
– brunohdaniel, Commented Apr 21, 2017 at 0:46

Jayakusuma · Accepted Answer · 2018-03-10 08:15:58Z

in case someone is still actively looking for the answer, first of all, just put the js code at the bottom of your laravel page, right before @endsection. But make sure you also write the reference to app.js cause you need it to add javascript to your page (and jquery if you want to)

here is how it will looks

@extends('layouts.app')

@section('content')

            <div class="form-group">
                    {{ Form::label('customer_name', 'Customer Name') }}
                    {{ Form::text('customer_name', Input::old('customer_name'), array('class' => 'form-control')) }}
            </div>

            <div class="form-group">
                    {{ Form::label('customer_address_line_1', 'Address Line 1') }}
                    {{ Form::text('customer_address_line_1', Input::old('customer_address_line_1'), array('class' => 'form-control')) }}
            </div>

            <div class="form-group">
                    {{ Form::label('customer_address_line_2', 'Address Line 2') }}
                    {{ Form::text('customer_address_line_2', Input::old('customer_address_line_2'), array('class' => 'form-control')) }}
            </div>
            
<script>{{ asset('js/app.js') }}</script>
<script>
    $(document).ready(function(){
    $('#addService').click(function(e) {
        e.preventDefault();
        var html = {};
    $('#newServices').append(html);
    });
});
</script>

@endsection

okay now for how to dynamically add form, honestly, i can't really tell how using your example. But if it can help, here is how i did it

<table id="add-me" class="table table-bordered">
<thead>
                     <tr>
                      <th>Quantity</th>
                      <th>Item</th>
                      <th>Selling Price</th>
                      <th>Actions</th>
                    </tr>
                 </thead>
                 <tbody >
@foreach($invoice_items as $item)
           <tr>
             <td id="quantity" class="col-md-2"><input onkeypress='return event.charCode >= 48 && event.charCode <=57'
               type="text" value="{{ $item->quantity }}" name="quantity[]" class="form-control" autofocus="" /></td>
             <td class="col-md-7"><select class="form-control" id="item" name="item[]">

               @foreach($products as $product)
               @if($product->item == $item->item && $product->price == $item->price)
                <option selected value={{$product->id}}>{{$product->item}} - {{$product->price}}</option>
               @endif
                 <option value={{$product->id}}>{{$product->item}} - {{$product->price}}</option>
               @endforeach
             </select></td>
             <td class="col-md-3"><input type="text" value="{{ $item->price }}" name="price[]" class="form-control" /></td>
             <td class="col-md-2">
                 <button type="button" class="btn btn-danger">
                 Delete</button>
             </td>
           </tr>
           @endforeach
       </tbody>
           </table>
                    </div>
                    <div class="action-buttons">
                        <button id="add-form" type="button" class="btn btn-default">Add New Form</button>
                        <button type="submit" class="btn btn-success">Add Invoice</button>
                    </div>
                    
                    <script>
        $(document).ready(function(){

    var i = 1;
        $('#add-form').click(function() {
              i++;
              $('#list').replaceWith('<input type="hidden" id="list" name="list" value='+i+'></input>');
              $('#add-me').append(
                 '<tbody id="row'+i+'"><tr>'+
                   '<td class="col-md-2">'+
                      '<input id="quantity" onkeypress="return event.charCode >= 48 && event.charCode <=57" type="text" name="quantity[]" class="form-control"/>'
                  +'</td>'
                  +'<td class="col-md-7">'
                      +'<select class="form-control" id="item" name="item[]">'
                        +'@foreach($products as $product)'
                          +'<option value={{$product->id}}>{{$product->item}} - {{$product->price}}</option>'
                        +'@endforeach'
                      +'</select>'
                  +'</td>'
                  +'<td class="col-md-3">'
                      +'<input type="text" name="price[]" class="form-control" />'
                  +'</td>'
                  +'<td class="col-md-2">'
                      +'<button id="+i+" type="button" class="btn btn-danger delegated-btn">Delete</button>'
                  +'</td>'
              +'</tr></tbody>'
              );
        });

        });

        </script>

Collectives™ on Stack Overflow

Laravel & jQuery - Add form fields dynamically using template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related