Question

I am coding a multi step form. At the end of this form i want to have a div that displays the values of each entry. Some of the entrys need to be formatted. For instance i have length and width as two separate inputs and want to display the result as length X Width. While others would be all on one line. I would like an edit button to be next to each entry.

My 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>

Each time someone clicks “input.next” the next article shows up.

When they click “input.next” in “article#part2” the last article shows up. The text inside “div#results” should be what was inputed in all other steps including which radio was picked. Each entry should have a button that would allow the person to jump back. Also #input2 and #input3 should be shown on one line like so “#input2″+” x “+”#input3” the rest should be on one line.

I understand that i could use .serializeArray() to display the results but that leave me with two problems.

1. how to make the two unique inputs show on a single line.
2. How do i deal with the edit button

Right now i have this function called when the last article is shown.

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

}

But how do i add the edit button and tell it to go to the right article when clicked?

Answer 1

Try the following code

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

This is basically the same as your code, except that the data is put into an array first (each item represents a line), and then inserted one line at a time. It also adds the edit button on each line.

Notice how the edit button inserted has a click handler, which calls a changePage method and passes the appropriate page index value.

It may have just been a typo, but you were missing the “#” in two of your jQuery selectors.