在Sinatra中，我如何制作多頁彈出式表單，並在填寫時保留在同一頁面上？

Question

我已經制作了一個顯示在彈出窗口中的表單，但是我不知道如何將其設置為多步。

這是我的代碼：

1） main.rb文件：

[
    'rubygems',
    'sinatra',
    'sequel'
].each{|g| require g}

DB = Sequel.sqlite('database.sqlite')

DB.create_table? :data_table do 
    primary_key :id
    varchar :img_path
    varchar :form1_name
    varchar :form2_option
end


before do 
    @img_path = nil
    @form1_name = nil
    @form2_option = nil
end

get '/?' do
    erb :index
end

post '/form2' do 
    user_img = params['user_img']
    @img_path = './public/images/uploads/' + user_img[:filename]

    File.open(@img_path,'wb'){|f| f.write(user_img[:tempfile].read)}# Copying the upload file to the server directory

    @form1_name = params['form1_name'] # !!!DATAPOINT!!!
end

2） layout.erb文件

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Multi-page form test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <!-- jQuery UI CSS -->
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <!-- jQuery -->
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <!-- jQuery UI -->
    <script src="./js/script.js"></script>
</head>
<body>
    <%= yield %>
</body>

3） index.erb文件

<button id="upload_form_opener" type="button">Click here to upload</button>
<div id="upload_form_container" title="Form container title">
    <form action="form2" method="post" enctype="multipart/form-data" accept-charset="utf-8">
        <img id="upload_preview" style="width: 300px; height: 300px;" />
        <input id="upload_image" accept="image/*" type="file" name="user_img" onchange="PreviewImage();" />
        <script type="text/javascript">
            // This JavaScript snipppet is for previewing the image upload
            function PreviewImage() {
                var oFReader = new FileReader();
                oFReader.readAsDataURL(document.getElementById("upload_image").files[0]);

                oFReader.onload = function (oFREvent) {
                    document.getElementById("upload_preview").src = oFREvent.target.result;
                    // document.getElementById("upload_image").disabled = true
                }; // DONE: function (oFREvent)
            }; // DONE: function PreviewImage()
        </script>
        <p>Name <input type="text" name="form1_name" /></p>
        <input type="submit" value="Next" />
    </form>
</div>

4） script.js

$(document).ready(function(){
    var uFormContainer = $('#upload_form_container');

    // This snippet is for opening the pop-under form
    uFormContainer.dialog({autoOpen: false});
        $('#upload_form_opener').click(function(){
            uFormContainer.dialog('open');
    });
});

5）我希望表格的第二步看起來像這樣...

<form action="form2" method="post" enctype="multipart/form-data" accept-charset="utf-8">
    <p>Some other text field <input type="text" name="form2_option" /></p>
    <input type="submit" value="Next" />
</form>

...但是我不想離開頁面（就Sinatra而言，它是'/'）。 錫那特拉有可能嗎？

Answer 1

有多種實現方法：

保存一些cookie或會話，這是現在的步驟，具體取決於生成不同的表單。 提交后，將下一步ID寫入會話並重定向到root_url。
使用ajax發送表單並呈現下一步的表單。
您甚至不能真正發送表單，而只是切換到下一個表單，只需使用javascript隱藏上一個字段並顯示下一步的字段即可。 提交后，所有參數將被發送。

在Sinatra中，我如何制作多頁彈出式表單，並在填寫時保留在同一頁面上？

問題描述

1 個解決方案

解決方案1
1 已采納 2013-12-10 10:10:39

在Sinatra中，我如何制作多頁彈出式表單，並在填寫時保留在同一頁面上？

問題描述

1 個解決方案

解決方案1 1 已采納 2013-12-10 10:10:39

解決方案1
1 已采納 2013-12-10 10:10:39