laravel collective forms

I've got a question concirning laravel collective forms. I'm trying to make mine a bit responsive in a way that if a user selects a specific type:

<div class="form-group">
        {!! Form::label('type', 'Type:', ['class' => 'col-md-4 control-label']) !!}
    <div class="col-md-6">
        {!! Form::select('type', ['Task' => 'Task', 'Booking' => 'Booking'], null, ['class' => 'form-control']) !!}
    </div>  
</div>

on that same page a partial would be shown. So for example, if the user selects Booking, if would display this partial:

{!! Form::open(['route' => ['tnb.store', $group->slug]]) !!}
                    <div class="form-group form-horizontal">
                        <div class="form-group">
                                {!! Form::label('type', 'Type:', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::select('type', ['Task' => 'Task', 'Booking' => 'Booking'], null, ['class' => 'form-control']) !!}
                            </div>  
                        </div>
                        <div class="form-group">
                                                  //  depending on the type
                                {!! Form::label('name', 'Booking', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::Text('name', null, ['class' => 'form-control']) !!}
                            </div>  
                        </div>
                        <div class="form-group">
                                {!! Form::label('desc', 'Description:', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::Text('desc', null, ['class' => 'form-control']) !!}
                            </div>  
                        </div>
                        <div class="form-group">
                                {!! Form::label('username', 'Concirning:', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::select('username', $usernames, null, ['class' => 'form-control']) !!}
                            </div>  
                        </div>
                        <hr>
                        <div class="form-group">
                                {!! Form::label('startdate', 'Start date:', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::input('date', 'startdate', date('Y-m-d'), ['class' => 'form-control']) !!}
                            </div>  
                        </div>
                        <div class="form-group">
                                {!! Form::label('time', 'Start time:', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::input('time', 'starttime', date('00:00'), ['class' => 'form-control']) !!}
                            </div>  
                        </div>
                        <div class="form-group">
                                {!! Form::label('enddate', 'End date:', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::input('date', 'enddate', date('Y-m-d'), ['class' => 'form-control']) !!}
                            </div>  
                        </div>
                        <div class="form-group">
                                {!! Form::label('endtime', 'End time:', ['class' => 'col-md-4 control-label']) !!}
                            <div class="col-md-6">
                                {!! Form::input('time', 'endtime', date('00:00'), ['class' => 'form-control']) !!}
                            </div>  
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                  //  depending on the type
                                {!! Form::submit('Create booking', ['class' =>  'btn btn-primary']) !!}
                            </div>
                        </div>
                    </div>
                {!! Form::close() !!}

and if the user would select task as his type, it would display another. What is the easiest and cleanest way to get this done?

Thanks

CodeX

10 years ago

Level 1

If the form fields are the same for all Types, except the label and form submit, you can just add an id attribute and change the text accordingly to the Type using jquery.

{!! Form::select('type', ['Task' => 'Task', 'Booking' => 'Booking'], null, ['class' => 'form-control', 'id' => 'type_select']) !!}

{!! Form::label('name', 'Booking', ['class' => 'col-md-4 control-label', 'id' => 'name_label']) !!}

jquery:

$(function() {
    $('#type_select').on('change', function() {
        $('#name_label').html(this.value);
    });
})

If the form fields are different, you can wrap each form in a div, and use jquery to show/hide appropriate form.

<div id="Booking_form" class="the_form">

<put form code here>

</div>

jquery:

$(function() {
    $('#type_select').on('change', function() {
        $('.the_form').hide(); // hide all first
        $('#'+this.value+'_form').show(); // show appropriate form
    });
})

(untested code)

Please or to participate in this conversation.