Laravel和jQuery-使用模板動態添加表單字段

Question

我正在使用Laravel，並且我有一個Booking模型，該模型與Service具有一對多關系。 因此預訂可以提供許多服務。

我已經在模型中建立了所有關系，並且可以正常工作。

在我的預訂create視圖文件中，我有一個面板，我要允許用戶動態添加服務。

{{ 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() }}

我有一個模板視圖文件bookings.service ，其中包含一些輸入元素：

@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

我的問題是如何將services視圖模板文件動態添加到bookings視圖文件中？

這是我到目前為止所獲得的，但是還不完整：

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

Answer 1

如果有人仍在積極尋找答案，首先，只需將js代碼放在laravel頁面的底部，就在@endsection之前。 但是請確保您還寫了對app.js的引用，因為您需要它將javascript添加到頁面中（如果需要，還可以添加jquery）

這是它的樣子

 @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 

好吧，現在如何動態添加表單，老實說，我真的不能說出如何使用您的示例。 但是，如果有幫助，這就是我的做法

 <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>