如何將信息輸入一系列表格並顯示該信息？

我正在使用多個複選框/下拉選擇ID的項目。

ex。

<!DOCTYPE HTML> 

<html> 
    <div class="select"> 
     <select id> 
      <option>-</option> 
      <option>2.00</option> 
      <option>2.50</option> 
      <option>2.75</option> 
     </select> 
    </div> 

<div class="checkboxes"> 
options: 
<br> 
<input type="checkbox" name="option1" value="O1">O1 
<br> 
<input type="checkbox" name="option2" value="O2">O2 
<br> 
<input type="checkbox" name="option2" value="O3">O3 
<br> 
</div> 

</html>

大約有五六個按順序排列。我期望做的事（並且不知道如何去做）是讓這五個選擇成爲順序的（意思是有一個「開始」按鈕，然後問你第一個問題，接下來要命中，問第二個問題，命中下一步等。倒數第二個按鈕是一個「審查」，它顯示了你對每個問題的回答，在審查中有一個「提交」按鈕，它將執行一個齒輪「Submitting ...」，然後最後提交）。

我知道如何佈置每個不同的select id（上面的幾個例子），但我不知道如何「使用」數據，存儲它，順序地請求它，並將輸入的信息呈現在結束。

我知道這有點頭疼，但是有沒有人有任何方向可以提供給我這裏？

非常感謝！

來源

2015-01-07 levitt

這取決於您要做什麼。也許你正試圖在某個服務器上對它進行一些操作，這意味着你需要編寫一些軟件來處理它 - 通常使用Python，Ruby，JavaScript或PHP等語言。在這裏，你需要一個提交按鈕在任何地方發送請求。嘗試閱讀[本文]（https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data）是一個很好的起點。 –

「01」，「02」，「03」應該是「」。 http://www.w3.org/TR/WCAG20-TECHS/H44.html – danielnixon

當您從一個窗體移到另一個窗體時，將數據存儲在localstorage中，並在到達最後一個窗體（概覽）時檢索它們。一種方法是保持1.跟蹤當前狀態並相應地呈現DOM中的視圖的控制器對象2.表單視圖對象，用於註冊所指示的選項，將它們傳遞給3.驗證檢查輸入到表單中的對象，以及4.將數據存儲到本地存儲中的對象。可能還有很多插件可以在Google上查看。 – Trace

雖然這是一個相當廣泛的問題（對於堆棧溢出可能過於寬泛），但您並不需要任何複雜的東西。
您只需將數據劃分爲邏輯部分，根據需要隱藏和顯示這些部分，並將所有內容都包含在表單元素中。

我下面所示的基本概念與一些簡單的示例代碼：

var options = $('.option'); 
 
//On page load, hide all options and then show the first one 
 
options.hide().eq(0).show(); 
 

 
$('.move').on('click', function() { 
 
    //Which move button did we click? 
 
    //This allows us to avoid repeating the rest of the below logic in two separate event handlers 
 
    var button = this.getAttribute("id"); 
 
    //Which way do we want to move? 
 
    var direction = +1; 
 
    if (button.localeCompare("prev") === 0) { 
 
    direction = -1; 
 
    } 
 
    //Hide the option we're currently viewing 
 
    var currentOption = $('.option:visible'); 
 
    currentOption.hide(); 
 
    //Figure out which option to show next 
 
    var currentIndex = (options.index(currentOption)); 
 
    //Make sure that the index is limited to reasonable values (so we don't try to show options that don't exist) 
 
    var index = Math.min(currentIndex + direction, options.length - 1); 
 
    index = Math.max(index, 0); 
 
    options.eq(index).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="prev" class="move" type="button" value="Prev option" /> 
 
<input id="next" class="move" type="button" value="Next option" /> 
 
<form> 
 
    <div class="option"> 
 
    <p>Description 1</p> 
 
    <select> 
 
     <option>-</option> 
 
     <option>2.00</option> 
 
     <option>2.50</option> 
 
     <option>2.75</option> 
 
    </select> 
 
    </div> 
 
    <div class="option"> 
 
    <p>Description 2</p> 
 
    <select> 
 
     <option>-</option> 
 
     <option>5.00</option> 
 
     <option>10.00</option> 
 
     <option>20.00</option> 
 
    </select> 
 
    </div> 
 
    <div class="option"> 
 
    <p>Description 3</p> 
 
    <select> 
 
     <option>-</option> 
 
     <option>50.00</option> 
 
     <option>100.00</option> 
 
     <option>200.00</option> 
 
    </select> 
 
    </div> 
 
    <p> 
 
    <button>Submit</button>(This submits all the options) 
 
    </p> 
 
</form>

來源

2015-01-07 01:10:36 Nit

-1

你要找的是創建嚮導的方式。使用jQuery的一個例子可以在這裏http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/ 您將需要編輯HTML發現，使其更像是其尋找...

<!DOCTYPE HTML> 

<html> 
<head> 
    <title></title> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/formToWizard.js"></script> 
</head> 
<body> 
<form id="myForm" action="register.php" method="post"> 
<fieldset> 
<legend>Step 1</legend> 
    <div class="select"> 
    <select id> 
     <option>-</option> 
     <option>2.00</option> 
     <option>2.50</option> 
     <option>2.75</option> 
    </select> 
    </div> 
</fieldset> 
<fieldset> 
<legend>Step 2</legend> 
    <div class="checkboxes"> 
     options: 
     <br> 
     <input type="checkbox" name="option1" value="O1">O1 
     <br> 
     <input type="checkbox" name="option2" value="O2">O2 
     <br> 
     <input type="checkbox" name="option2" value="O3">O3 
     <br> 
    </div> 
</fieldset> 
<script> 
    $('#myForm').formToWizard(); 
</script> 
</body> 
</html>

這個插件有很多的選擇太多，所以讀了的文檔...

然後，您使用操作/方法提交表單，然後從服務器端處理該表單...

來源

2015-01-07 01:11:31 NHNick603

不明白downvote？在我發佈的幾秒鐘內發生。問題確實非常廣泛，尋找嚮導和服務器端處理... – NHNick603

如何將信息輸入一系列表格並顯示該信息？

回答

相關問題