多頁表單的策略？

我一直在嘗試使用jQuery Mobile進行多頁輪詢，該輪詢應該通過Ajax/PHP與我的MySQL數據庫進行交互，並且現在一直存在問題。看起來我有一些問題提交表單，因爲它分成幾頁。我需要的一個要求是頁面無法重新加載頁面。多頁表單的策略？

在我第一次嘗試我試過了劃分頁面分爲以下幾個：

<div id="page1" data-role="page">

然而，這失敗了這麼多次，不管我怎麼想它的代碼。我無法獲得提交按鈕的工作，我認爲這可能是由於我已將表單拆分爲多個div「頁面」這一事實造成的。我也試着做下一個/提交按鈕，而不是「接下來，接下來......提交」，這樣我就可以將臨時數據存儲在會話中，但不成功。

我返工我的整個戰略變成一個隱藏問題的div是未激活代碼。通過這個我的意思是我有一個div與數據角色設置爲頁面，其中我有幾個div與數據角色的內容隱藏/顯示通過點擊下一個按鈕的形式。我設法制作了一個小樣本表單，它提交了整個表單，並用一些PHP代碼完美地打印出來。不過，我尚未成功驗證此版本。我只能讓我的腳本驗證最後一頁，即使這樣，它也需要檢查所有複選框，這是毫無意義的。當我試圖在我的真實項目中實現這個版本時，我無法將它提交給.php腳本，但這可能只是我將繼續尋找的一些語法錯誤。

因此，已經有人做過類似的東西嗎？我正在尋找潛在的其他策略來解決這個問題，或者有人有一個理論，爲什麼我上述的嘗試失敗了。似乎Ajax表單提交很難在jQuery Mobile中工作？

而且萬一有人能發現在這一個缺陷，我附這段代碼，我使用的提交，有沒有一種簡單的方法，使之成爲一個功能呢？或者這是毫無意義的？

$(document).ready(function() 
    { 
      $("#submit").click(function() 
      { 
       var data_string = $('#form').serialize(); 
       $.ajax(
       { 
        type:'POST', 
        url:'add.php', 
        data:data_string, 
        success:function(response) 
        { 
         $("#answers").html(response); 
        } 
       });   
      }) 
    });

我也在window.onload中使用這個函數來生成一個冗長的.php腳本的輪詢。基本上它產生的問題是，每個其他問題品種只有name =「answers [question_id]」。

function getQuestions(id) 
     { 
      var xmlhttp = getHttpRequestObj(); 
      xmlhttp.onreadystatechange=function() 
       { 
       if (xmlhttp.readyState==4 && xmlhttp.status==200) 
       { 
        document.getElementById(id).innerHTML=xmlhttp.responseText; 
       } 
       } 
      xmlhttp.open("GET","poll2.php",true); 
      xmlhttp.send(); 
     }

的形式如下：

<form id="form"> 
    <div data-role="content" id="form'.$page.'" class="section"> 
    <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="'.$question_id.'"> 
     <input type="checkbox" name="answers['.$question_id.']['.$alt_id.']" id="'.$question_id.'_'.$alt_id.'" value="'.$alt_id.'"/> 
     <label for="'.$question_id.'_'.$alt_id.'">'.$alt_desc.'</label> 
    </fieldset> 
    <input type="button" name="next" value="Next" id="next" onClick="toggleVisibility(\'form'.($page+1).'\')" class="next-btn"/> 
    </div>

最後一頁上有這個代碼，而不是下一個按鈕：

</div><input type="button" id="submit" value="Submit" class="submit-btn"/></form>

來源

2012-07-16 Tom

在我看來，隱藏的其他選項，打開一個一個是更好的方法（也稱爲多步驟形式）。

進行驗證，您可以用JavaScript或使用AJAX觸發適當的事件（你不需要提交以供驗證），並在服務器端驗證做在客戶端。

你在正確的軌道。我在這裏看到的問題是你如何進行驗證，但這取決於你的表單的結構。

來源

2012-07-16 07:00:17 itachi

通過隱藏其他選項，打開一個個你指的是顯示/隱藏DIV版本我做？它確實感覺更好，但是我可以讓jQuery Validator腳本正確地使用它 - 這很奇怪，因爲所有步驟中的所有數據都發送出去，即使它們都附帶了class =「required」，但仍未驗證他們。我可能需要研究如何設計我自己的版本。除此之外，很高興聽到我走在正確的軌道上！但是，如果提交每個步驟的會話數據，而不是在完成時立即發送全部數據，會不會有好處？ – Tom 2012-07-16 07:56:24

用更多的代碼更新了一些問題，也許可以再澄清一點。 – Tom 2012-07-16 08:04:29

讓.php腳本生成投票可能會有問題嗎？似乎我不能提交一次，我做.php腳本來生成民意調查，但直接在.html中直接製作的調查似乎很好（除了驗證課程）。 – Tom 2012-07-16 09:10:40

多頁表單的策略？

回答

相關問題