如何正确构建这个多步形式?

时间:2018-02-09 18:01:05

标签: php html forms laravel

我有一个页面create_conference.blade.php来创建新的会议。在此页面中有一个多步骤表单:

    第一步中的
  • 要求用户提供一般会议信息
  • 第二天的
  • 询问会议创建者的描述
  • 在第3天向用户询问会议的注册类型

表单的工作方式是:用户输入第一步的信息,然后单击“转到步骤2”,然后在步骤2中,用户输入该步骤2的具体信息,然后单击“转到步骤3” 。最后,在步骤3中,用户输入该步骤3的特定信息,并点击“存储”以提交信息,从而创建会议。

你知道如何用laravel正确处理这个多步形式逻辑吗?我没有成功地构建这个。

HTML:

<!-- So, the page has 3 step: General Info, Conference Creator Info and Registration Types) -->
    @extends('app')
    @section('content')
            <div class="container nopadding py-4">
                <h1 class="h5 text-center">Create Conference</h1>
                <div class="row">
                    <div class="col-12">
                            <ul class="nav nav-pills registration_form_list" role="tablist">
                                <li class="">
                                    <a class="nav-link active" href="#step1" data-toggle="tab" role="tab">
                                        Step1<br><small>General Information</small></a>
                                </li>
                                <li class="disabled">
                                    <a class="nav-link" href="#step2" data-toggle="tab" role="tab">
                                        Step 2<br><small>Conference Creator Info</small></a>
                                </li>
                                <li class="disabled">
                                    <a class="nav-link" href="#step3" data-toggle="tab" role="tab">
                                        Step 3<br><small>Registration Types</small></a>
                                </li>
                            </ul>

                    <!-- STEP 1 - General Confenrece Information-->

                    <form method="post" class="clearfix" action="conference/store">
                    {{csrc_field()}}
                        <div class="tab-content registration_body bg-white" id="myTabContent">
                            <div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
                                <form method="post" class="clearfix">
                                    <div class="form-group">
                                        <label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name </label>
                                        <input type="text" name="conference_name" class="form-control" id="conference_name">
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-lg-6">
                                            <label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Conference Categories</label>
                                            <select id="tag_list" name="conference_categories" multiple class="form-control" id="conference_categories">
                                                <option>IT</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="address" class="text-heading h6 font-weight-semi-bold">Address</label>
                                            <input type="text" name="conference_address" class="form-control" >
                                    </div>
                                    <div>

                                        <button type="button" href="#step2" data-toggle="tab" role="tab"
                                                class="btn mr-2 btn-primary btn next-step">
                                            Go To Step 2
                                        </button>
                                    </div>
                                </form>
                            </div>

                    <!-- STEP 2 - Conference creator Information-->

                            <div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">
                                <form method="post" class="clearfix">
                                    <div class="form-row">
                                    <div class="form-group">
                                        <label for="conference_creator_description" class="text-heading h6 font-weight-semi-bold">Description</label>
                                        <textarea name="conference_creator_description" id="conference_creator_description" class="form-control" rows="3"></textarea>
                                    </div>

                                       <button type="button" href="#step1" data-toggle="tab" role="tab"
                                                class="btn mr-2 btn-primary btn next-step">
                                            Go Back To Step 1
                                        </button>
                                       <button type="button" href="#step3" data-toggle="tab" role="tab"
                                                class="btn mr-2 btn-primary btn next-step">
                                            Go To Step 3
                                        </button>
                                </form>
                            </div>

                    <!-- STEP 3 - Registration Types-->

                            <div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
                                <form method="post" class="clearfix">
                                    <div class="form-group">
                                        <label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
                                        <input type="text" name="registration_type_name" class="form-control" id="registration_type_name">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="registration_type_capacity" class="text-heading h6 font-weight-semi-bold">Capacity</label>
                                        <input type="text" class="form-control" name="registration_type_name" id="registration_type_capacity">
                                    </div>
                                      <div class="form-group">

                                             <button type="button" href="#step2" data-toggle="tab" role="tab"
                                                class="btn mr-2 btn-primary btn next-step">
                                            Go Back To Step 2
                                        </button>
                                       <button type="submit"  data-toggle="tab" role="tab"
                                                class="btn mr-2 btn-primary btn next-step">
                                            Store
                                        </button>
                                    </div>
                                </form>
                            </div>        
                        </div>
                    </form>
                </div>
            </div>
        </div>

Laravel:

  • 我创建了一个ConferenceController
  • 然后在表单中添加一个动作(action =“conference / store”)
  • 然后我也创建了一条路线:

    Route :: post('/ createConference,[     'uses'=&gt; “ConferenceController @店”     'as'=&gt; conference.store” ]

但是当我输入一些信息并提交表格时,它会出现:

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message.   

1 个答案:

答案 0 :(得分:1)

错误的操作网址

Route::post(‘/createConference,[‘uses’=>‘ConferenceController@store’,‘as’=>conference.store’]);

将表单的操作设置为路由的名称并添加crsf字段

<form action="{{route('conference.store')}}" method="post">
{{ csrf_field() }}