0

我正在编写一个多步骤表单。在此表单的末尾，我希望有一个 div 来显示每个条目的值。有些条目需要格式化。例如，我将长度和宽度作为两个单独的输入，并希望将结果显示为长度 X 宽度。而其他人都在一条线上。我希望每个条目旁边都有一个编辑按钮。

我的 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() 来显示结果，但这给我留下了两个问题。

  1. 如何使两个唯一输入显示在一行上。
  2. 我如何处理编辑按钮

现在我在显示最后一篇文章时调用了这个函数。

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);

}

但是我如何添加编辑按钮并告诉它在点击时转到正确的文章？

4

1 回答 1

0

试试下面的代码

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-05T22:14:08.093 回答