0

マルチステップフォームをコーディングしています。このフォームの最後に、各エントリの値を表示する div が必要です。一部のエントリはフォーマットする必要があります。たとえば、長さと幅が 2 つの別々の入力としてあり、結果を長さ X 幅として表示したいとします。他の人はすべて1行になります。各エントリの横に編集ボタンを配置したいと思います。

私の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" のように 1 行で表示する必要があります。残りは 1 行で表示する必要があります。

.serializeArray() を使用して結果を表示できることは理解していますが、2 つの問題が残ります。

  1. 2 つの一意の入力を 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);
    }

これは基本的にコードと同じですが、データが最初に配列に入れられ (各項目は行を表します)、次に一度に 1 行挿入されます。また、各行に編集ボタンを追加します。

挿入された編集ボタンには、changePage メソッドを呼び出して適切なページ インデックス値を渡すクリック ハンドラーが含まれていることに注目してください。

単なるタイプミスかもしれませんが、2 つの jQuery セレクターに「#」がありませんでした。

于 2012-07-05T22:14:08.093 に答える