jquery多步驟表單收集和數據並添加編輯鏈接

我正在編寫一個多步驟表單。在這個表單的結尾，我想要一個顯示每個條目的值的div。一些entrys需要格式化。例如我有長度和寬度作爲兩個單獨的輸入，並希望顯示結果爲長度X寬度。而其他人將全部在一條線上。我希望每個條目旁邊都有編輯按鈕。jquery多步驟表單收集和數據並添加編輯鏈接

我的HTML

<form> 
<article id="part1"> 
<input type"text" name="input1" id="input1"> 
<input type"text" name="input1" id="input2"> 
<input type"text" name="input1" id="input3"> 
<input class="next button" type="button" value="Next"> 
</article> 

<article id="part2"> 
<input type"radio" name="radio" id="input4"> 
<input type"radio" name="radio" id="input5"> 
<input class="next button" type="button" value="Next"> 
</article> 

<article id="part3"> 
<div id="results"></div> 
<input name="Submit" type="submit" class="next button submitLast" value="Order"> 
</article> 
</form>

每次有人點擊「input.next」在下一篇文章中顯示出來。

當他們點擊「article＃part2」中的「input.next」時，最後一篇文章出現了。「div＃results」中的文本應該是所有其他步驟中輸入的內容，包括選擇哪個收音機。每個條目都應該有一個允許該人跳回的按鈕。另外＃input2和＃input3應該在一行上顯示，就像「＃input2」+「x」+「＃input3」一樣，其餘的應該放在一行上。

據我所知，我可以使用.serializeArray（）來顯示結果，但給我留下兩個問題。

如何使兩個獨特的輸入顯示在一行上。
如何我現在處理的編輯按鈕

我有這個功能顯示的最後一篇文章時調用。

function showValues() { 
var line1 = $("#input1").val() 
var line2 = $("#input2").val()+" x "+$("input3").val() 
var option1 = $("#input4").is(":checked") 
var option2 = $("#input5").is(":checked") 
if (option1==true) { 
var type = "option1" 
} 
if (option2==true) { 
var type = "option2" 
} 
$("results").append(line1+"<br>"+line2+"<br>"+type); 

}

但是，如何添加編輯按鈕，並告訴它在點擊時轉到正確的文章？

來源

2012-07-05 Bart

嘗試使用以下代碼

function showValues() { 
     var line1 = $("#input1").val() 
     var line2 = $("#input2").val() + " x " + $("#input3").val() 
     var option1 = $("#input4").is(":checked") 
     var option2 = $("#input5").is(":checked") 
     if (option1 == true) { 
      var type = "option1" 
     } 
     if (option2 == true) { 
      var type = "option2" 
     } 

     var data = new Array(); 
     data[0] = { text: line1, edit: 0 }; 
     data[1] = { text: line2, edit: 0 }; 
     data[2] = { text: type, edit: 1 }; 

     for (var i = 0; i < data.length; i++) { 
      $("#results").append(data[i].text); 
      $("#results").append("<input type='button' value='edit' onclick='changePage(" + data[i].edit + ")' /><br />"); 
     } 
    } 

    function changePage(pageIndex) { 
     // Replace this with whatever code is needed to change the page 
     alert(pageIndex); 
    }

這基本上是相同的代碼，所不同的是數據被放入一個陣列的第一（每個項目表示的線），然後插入一行，在一時間。它還在每一行上添加編輯按鈕。

注意插入的編輯按鈕有一個點擊處理程序，它調用changePage方法並傳遞適當的頁面索引值。

它可能只是一個錯字，但是你錯過了兩個jQuery選擇器中的「＃」。

來源

2012-07-05 22:14:08

jquery多步驟表單收集和數據並添加編輯鏈接

回答

相關問題