使用jquery表單嚮導在每一步提交表單

我在MVC應用程序中使用Jquery Form嚮導插件。 http://thecodemine.org/ 我有一個4個步驟的表格。在其中一步我有上傳功能。我想在每一步提交功能，以及後退和下一步。後面的步驟是可選的。使用jquery表單嚮導在每一步提交表單

我能夠在導航中添加提交按鈕。點擊它時，只會提交與活動步驟相關的表單數據，其他數據爲空。

對於我的問題更加清晰：查看：

<form id="myform" method="post" action="/Controller/Action"> 
    <div id="fieldWrapper"> 
     <fieldset class="step fieldset" id="first"> 
      <legend class="legend">First step</legend> 
      Some input controls 
     </fieldset> 
     <fieldset class="step fieldset" id="second"> 
      <legend class="legend">Second step</legend> 
      some more input controls (optional) 
     </fieldset> 
     <fieldset class="step fieldset" id="third"> 
      <legend class="legend">Third step</legend> 
      some more input controls with filu upload 
      (optional) 
     </fieldset> 
     <fieldset class="step fieldset" id="fourth"> 
      <legend class="legend">Fourth step</legend> 
      some more input controls (optional) 
     </fieldset> 
    </div> 
    <div id="demoNavigation"> 
     <input class="navigation_button" id="back" value="Back" type="reset" /> 
     <button type="submit" id="submitBtn">Submit and Finish</button> 
     <input class="navigation_button" id="next" value="Next" type="submit" /> 
    </div> 
    </form>

腳本：

<script type="text/javascript"> 
    $(function() { 
     $("#myform").formwizard({ 
      validationEnabled: true, 
      focusFirstInput: false, 
      disableUIStyles: true, 
      textSubmit: 'Submit and Finish', 
      textNext: 'Continue to next step', 
      next: "input:submit" 
     } 
     ); 
    }); 
</script>

更新了Jquery.form.wizard.js以使提交按鈕隱藏在最後一步。現在在每一步我都提交按鈕和導航按鈕。

當我在第二步中提交表格時，第二步中的表格數據只會發佈，而其他人不會發布。

我經歷了樣品，但找不到合適的樣品。任何人都可以建議如何做到這一點？

來源

2012-12-28 Vinod Vutpala

我沒有問題，實現這一目標。請確保您的字段位於字段集標籤中;無法貼上標記。 – CarneyCode

我瀏覽了文檔和jquery.form.wizard.js文件，以瞭解所做的事情。

我只是寫一些腳本如下：

<script type="text/javascript"> 
    $(function() { 
     $("#myform").formwizard({ 
      validationEnabled: true, 
      focusFirstInput: false, 
      disableUIStyles: true, 
      textSubmit: 'Submit and Finish', 
      textNext: 'Continue to next step', 
      next: "input:submit" 
     } 
     ); 
    }); 
    $('#submitBtn').click(function() { 
     var stepInfo = $('#myform').formwizard('state'); 
     for (var i = 0; i < stepInfo.activatedSteps.length; i++) { 
      stepInfo.steps.filter("#" + stepInfo.activatedSteps[i]).find(":input").not(".wizard-ignore").removeAttr("disabled"); 
     } 
    }); 
</script>

來源

2013-01-04 09:52:47

使用jquery表單嚮導在每一步提交表單

回答

相關問題