多步onClick Javascript表單

任何人都可以請給我一個如何創建一個多步表單的例子，其中每個階段是由onClick提交，然後使用隱藏的輸入或變量來存儲前一頁的值？多步onClick Javascript表單

例如：

步驟1 ...

<input type="radio" name="group1" value="yes" onclick="this.form.submit()" /> 

<input type="radio" name="group1" value="no" onclick="this.form.submit()" />

步驟2 ...

<input type="radio" name="group2" value="100" onclick="this.form.submit()" /> 

<input type="radio" name="group2" value="200" onclick="this.form.submit()" /> 

<input type="radio" name="group2" value="300" onclick="this.form.submit()" /> 


<!-- previous input --> 
<input type="hidden" name="group1" value="200" />

謝謝！

來源

2012-04-19 user1105056

隱藏不屬於該步驟的零件並僅在最後一步提交整個表單才更好嗎？ – Th0rndike 2012-04-19 09:41:48

@ Th0rndike。應該是一個答案... – gdoron 2012-04-19 09:49:39

好吧，我會讓它的答案 – Th0rndike 2012-04-19 09:53:43

因此，正如我在評論說，建立只有一種形式：（代碼高度格式化和理解的目的僅提供）在第一步

<form> 
    <input class='step1input'/> 
    <input class='step1input'/> 
     <input class='step2input'/> 
    <input class='step2input'/> 
    ... 
</form>

隱藏不屬於那裏（step2input類）的一個輸入

在第二步中，隱藏其他輸入（step1input類）

等等

在最後一個步驟結束時，您提交整個形式

編輯：你在做什麼很好，只是，而不是提交表單，你只是隱藏的元素。使用一個jQuery或類似這樣的JavaScript函數：

function goToNextStep(currentStep){ 
    if (currentStep==1) { 
     $('input[name='group1']').hide(); 
     $('input[name='group2']').show(); 
    }else if (currentStep==2){ 
     ... 
    } 
    ... 
    else if (currentStep==lastStep){ 
     document.form.submit(); 
    } 
}

步驟1 ...

<input type="radio" name="group1" value="yes" onclick="goToNextStep(1)" /> 

<input type="radio" name="group1" value="no" onclick="goToNextStep(1)" />

步驟2 ...

<input type="radio" name="group2" value="100" onclick="goToNextStep(2)" /> 

<input type="radio" name="group2" value="200" onclick="goToNextStep(2)" /> 

<input type="radio" name="group2" value="300" onclick="goToNextStep(2)" />

來源

2012-04-19 10:00:48 Th0rndike

那麼表單元素將被隱藏使用CSS？對不起，厚厚的，但你能提供一個例子嗎？ – user1105056 2012-04-19 10:25:39

爲你編輯... – Th0rndike 2012-04-19 12:44:52

非常感謝！ – user1105056 2012-04-20 19:26:35

怎麼樣使用這樣的插件：

http://www.michaelpeacock.co.uk/blog/entry/multistep-form-navigation-jquery-plugin

這個人是很簡單太：

http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

或這裏是一個更詳細的插件：

http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/

來源

2012-04-19 09:47:30

對不起，我應該在我的問題上更清楚一點，我試圖讓表單在沒有「下一個」按鈕的情況下進入下一個階段。所以當用戶點擊一個選擇時，他們會自動進入下一個問題。 – user1105056 2012-04-19 09:58:32

基本上你錯過了一個JS函數只顯示各自的形式部分並隱藏其餘部分。

這裏有三個步驟的例子。檢查JSfiddle example。

在HTML只是插入

<body onload="shows_form_part(1)"> 
    <form> 
    <div id="form_part1"> 
     <!--form elements 1--> 
     <button type="button" onclick="shows_form_part(2)">&raquo;</button> 
    </div> 
    <div id="form_part2"> 
     <!--form elements 2--> 
     <button type="button" onclick="shows_form_part(1)">&laquo;</button> 
     <button type="button" onclick="shows_form_part(3)">&raquo;</button> 
    </div> 
    <div id="form_part3"> 
     <!--form elements 3--> 
     <button type="button" onclick="shows_form_part(2)">&laquo;</button> 
     <button type="button" onclick="submit_form()">Submit</button> 
    </div> 
    </form> 
</body>

在Javascript

定義該功能，即僅示出了各自的組成部分和隱藏的其餘部分。

function shows_form_part(n){ 
    var i = 1, p = document.getElementById("form_part"+1); 
    while (p !== null){ 
     if (i === n){ 
      p.style.display = ""; 
     } 
     else{ 
      p.style.display = "none"; 
     } 
     i++; 
     p = document.getElementById("form_part"+i); 
    } 
}

然後你只需要定義submit_form()函數。

HTML字符«和»只是分別打印«和»這可能對上一個和下一個按鈕字符很有意思。

來源

2017-02-19 21:59:17

多步onClick Javascript表單

回答

相關問題