Laravel在多个页面上形成表格 [英] Laravel form over multiple pages

问题描述

我是Laravel和面向前端编程的初学者(我的大部分背景是数据库管理).我试图将多页表单放在一起，以允许用户在数据层次结构中移动:

I'm a beginner to Laravel, and also to front-end oriented programming (most of my background is in database management). I'm attempting to put together a multiple page form that allows users to move through a hierarchy of data:

1. 在第一页上，他们可以选择一个项目或创建一个新项目，
2. 第二次，他们选择了该项目的一个子部分(或者再次创建一个新的子部分)
3. 在第三页上，他们可以执行文件上传或特定的任务 小节.

1. on the first page, they can select a project or create a new one,
2. on the second they select a subsection of that project (or again, make a new one)
3. on the third page they can perform file uploads or specific tasks for that subsection.

我这样做的方式很简单，就是让第一个页面之后的每个页面成为POST路由，该路由将获取上一步的标识数据，从而为视图生成正确的选择字段并正确地填充数据库.但是，经过一些研究，我了解到直接从后路由调用视图是一种笨拙的处理方式(混合GET和POST方法)，尤其是通过验证错误重定向无法用于后路由这一事实，这一点尤其明显.因此，如果用户搞砸了表单，而不是使用错误列表将其重定向到最后一个阶段，则最终将导致方法不允许"异常.

My hacked-together way of doing this was simply to have each page after the first be a POST route that grabs the identifying data of the previous step to generate the correct select fields for the view and populate the database properly. However, after some research I've learned that directly calling views from a post route is a clumsy way of doing things (mixing up GET and POST methodology), made especially evident by the fact that validation error redirects cannot work with post routes. Thus, if the user ever messes up in the form, rather than being redirected to the last stage with a list of errors, they end up with a Method Not Allowed exception.

实现这种多页表单的更好(RESTful)方法是什么?我在前端方面不太擅长，如果可以的话，我宁愿避免使用Ajax.

What is a better (RESTful) way of achieving this kind of multiple-page form? I'm not very good at front end stuff and would rather avoid Ajax if I can.

这是我目前的一些代码:

Here's some of my code as it stands:

路由文件:

Route::get('newentry', 'NewEntryController@index');
Route::get('newentry/selectjob','NewEntryController@selectjob');
Route::post('newentry/selectday','NewEntryController@selectday');
Route::post('newentry/upload','NewEntryController@upload');

表单页面的示例方法

public function selectday()
        {
            //get post from job form and validate
            $request = Request::all();
            $job_id = intval(Request::get('job_id'));

            //create data variable, pass job_id for hidden field
            $data = [];
            $data['job_id'] = $job_id;
            //apply ruleset
            $rules = array(
                'job_id'    => 'required'
            );
            $validator = Validator::make($request, $rules);

            if ($validator->passes()) {

                //get the subset of days
                $data['days'] = DB::table('daily_runs')
                    ->where('job_id',$job_id)
                    ->orderBy('id', 'asc')
                    ->lists('start_time','id');

                return View::make('newentry.day')->with('data', $data);
            } else {

                return Redirect::to('newentry/selectjob')->withInput()->withErrors($validator); //this redirect will not work. 
            }
        } //end selectday

如果用户没有犯错误(如我所提到的，如果他们弄乱了验证重定向，将抛出Method Not Allowed异常)，则此代码将起作用，但据我所知，我正在以较差的编码实践来接近它.我可以在控制器/视图结构中采取哪些步骤来使其变得更好?

This code will work if the user makes no mistakes (as I mentioned, if they mess up the validation redirect will throw a Method Not Allowed exception) but from what I'm hearing I'm approaching it with poor coding practice. What steps could I take in the controller/view structure to make it better?

推荐答案

您必须在Ajax的一页上执行此操作.废话 每个选择列表使用一页.

You have to do this in Ajax on one page. It is nonsense using one page for every select list.

这是您的第一选择列表

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>

这是AJAX代码

$(document).ready(function(){

// when the select list changes

$( ".target" ).change(function(e) {
e.preventDefault();

// gets the selected value
var selectedoption = $(this).text();


// sends it via Ajax Post to the controller

$.ajax({
type:"POST",
url: 'your uri to controller',
data: {'whatever waits at your controller' :selectedoption}

        });

    });  


});  

注意:在Laravel中，为了避免CSRF出现问题，您需要查看我的其他帖子， 您只需要按照我在链接上所说的在页面中输入控制器的URI

Note: In Laravel to avoid an issue with CSRF you need to check my other post, you just need to enter the URI to your controller in the page as I say on my link

Laravel:解决方法通过Ajax发行CSRF令牌:

使用Controller获取的值，它将查询发送到模型，从模型获取答复，然后将结果返回到视图.

with the value the Controller gets, it sends the query to the model, gets the reply from the model and then returns the result back to the view.

在视图中，您仍位于第一个选择列表所在的页面上.

In the view you are still on the same page where the first select list was.

第二个选择列表选择该值，并在填充第二个选择列表的foreach循环中使用它.

The second select list picks that value and uses it in a foreach loop that populates the second select list.

这篇关于Laravel在多个页面上形成表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！