Laravel & jQuery - Add form fields dynamically using template - php

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">
Add Service
</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);
});

Answer 1

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>