jQuery: Make dynamic content editable after submission

Question

I have a form where user can submit a few values and they get stored inside a list in a span separated by a comma, like this:

<li>
    <span>
      Harvard,Marketing,2009,2014
    </span>
    <br><a>[Remove]</a>
    <br><a>[Edit]</a>
</li>

//output
Harvard,Marketing,2009,2014
[Remove]
[Edit]

• When clicking on [Edit] I'd like to show up the form replacing the list space with the values in the span filling the inputs showing in the new form so the user can modify them and save again. How can I accomplish this?

Complete code on jsFiddle: http://jsfiddle.net/YueX2/

Please run it so you can see how it works, just click on "Add another" and then on the "Save" button.

Answer 1

is a bit messy but should give you an idea how to do this.

the given template for the "li" is slightly modified

<li>
    <span>
      Harvard,Marketing,2009,2014
    </span>
    <br><a href="#" class="remove">[Remove]</a>
    <br><a href="#" class="edit">[Edit]</a>
</li>

the code could be like this:

$('.edit').click(function(){
    var parent = $(this).parent();
    //get the String from the span element
    var values = $.trim( parent.find('span').text() );
    //and plit them
    values = values.split(',');

    //prepend an container to hold the inputs
    parent.prepend('<div class="editCont"></div>');
    var container = parent.find('.editCont');

    //create inputs for each of the seperated values
    for(var v in values){
        container.append('<input type="text" value="'+values[v]+'" /><br>');
    }
    //create save link and bind click event to it
    container.append('<a href="#" class="editContButton" >save</a><br>');
    parent.find('.editContButton').click(function(){
        //collect all values from the inputs
        var text = [];
        var inputs = container.find('input');
        for(var i = 0; i < inputs.length; i++){
            text.push( $(inputs[i]).val() );
        }
        parent.find('span').show();
        //replace the text in the span element and remove container with inputs again
        parent.find('span').text( text.join(",") );
        container.remove();
    })
    parent.find('span').hide();
});

If clicked on Edit the text in the span is split and an input for every entry is created and at the end i add a save link. If the link is klicked the inputs get joined to an sting and replace the old text in the spawn.

the hide and unhiding of the spawn is optional ;)

Answer 2

When edit is clicked, you can split the content of that span, since it's already comma separated. Then you can take new input and apply it to the span on save. I edited your edit function, and added a new save function.

//existing edit method
$(document).on('click', '.edit', function () {

    //hides edit and remove buttons
    $(".removeParent, .edit").hide();

    //splits span into separate terms
    var terms = $(this).siblings("span").html().split(",");

    //makes new form
    $(this).parents("li").append("<input id='edit1' type='text' value=" + terms[0] + ">" + "<input id='edit2' type='text' value=" + terms[1] + ">" + "<input id='edit3' type='text' value=" + terms[2] + ">" + "<input id='edit4' type='text' value=" + terms[3] + "><input type='button' class='saveEdit' value='Save'>");
});

//additional save method 
$(document).on('click', '.saveEdit', function () {

    //unhides edit and remove buttons
    $(".removeParent, .edit").show();

    //makes the new string for the span
    var newString = $("#edit1").val()+","+$("#edit2").val()+"," +$("#edit3").val()+","+$("#edit4").val();

    //replaces the html of the span with the new string
    $(this).siblings("span").html(newString);

    //hides new form and save button
    $(this).hide(); 
    $("#edit1, #edit2, #edit3, #edit4").hide(); 
});