Question

a nice member here helped me out to create a form which adds steps as you go. I modified it a bit to allow you to change the answers to some of those questions by clicking a change button. Of course, I realized my limits and applied it to only the first question, and badly…
The way I was approaching this was to give each question and button it’s own unique id, which I think is probably the wrong way to approach this?

This is what I want and I partially accomplished some:

• Fill out a field, press NEXT
• Field 1 Turns into readonly text and a ChangeButton appears
• a new field appears below that you can fill out
• By pressing CHANGE on field one, field2 becomes non-editable and field1 is now editable. The change button also turns to “Save”. By clicking save, you make field 2 editable and field1 non-editable again.
• this continues on forever 🙂

I tried what I found on the internet but I hope that someone who’s better at this could help me out a bit if that’s ok 🙂
Here’s my Jfiddle
http://jsfiddle.net/pufamuf/TEyVL/3/

Thank you!

Answer 1

Example of the following here

Here’s how I’d accomplish what you’re trying to do…

HTML:

<div id="question1" class="question active">
    <label>Q1</label>
    <input type="text" />
    <input type="button" value="SAVE" class="button" />
</div>

jQuery:

var qa = []; // questions array of objects { text: "question text" }

$('.button').live('click', function(e) {
    var $but = $(this),
        $inp = $but.prev(),
        $parent = $but.parent(),
        i = $parent.attr('id').match(/\d+$/)[0] - 1,
        $new;

    if ($but.val() == 'SAVE') {

        // store value to array
        qa[i] = {
            text: $inp.val()
        };

        // append new question inputs if needed
        if (!$('#question' + (i + 2)).length) {
            $new = $parent.clone();
            $new.attr('id', 'question' + (i + 2));
            $new.find('label').html('Q' + (i + 2));
            $new.find('input[type="text"]').val('');
            $new.insertAfter($parent);
        }

        // change to inactive attributes
        $inp.attr('disabled', true);
        $parent.removeClass('active').addClass('answered');
        $but.val('CHANGE');

    } else { // CHANGE

        // change to active attributes
        $inp.attr('disabled', false);
        $parent.removeClass('answered').addClass('active');
        $but.val('SAVE');

    }
});

I made the array store objects so it’s easy to add other properties to each question if needed.

See demo