//Allow user to edit span element. function editHandler() { //first replace the span with an input $(this).replaceWith('<input id="usertext" value="' + $(this).text() + '"/>'); //now set up an event-handler for #usertext to turn it back to a span $('#usertext').focus().select(); $('#usertext').focusout( //'tab' or click somewhere else. function() { $(this).replaceWith('<span class="editable">' + $('#usertext').val() + '</span>'); }) } //adds a new choice function addChoice() { $('#choices').append('<li><span class="editable">Choice...</span> <a href="#" class="delchoice">X</a></li>'); } function deleteChoice(){ $(this).parent().remove(); } //extracts the text from the current question and sends it to the server function submitQuestion(){ var qtext = $('#qtext').text(); var choices = [null,null,null,null,null]; $('li span.editable').each(function(index){ choices[index] = $(this).text(); }); alert('POSTing qtext=' + qtext + ' c0=' + choices[0] + ' c1=' + choices[1]); //I have not tested this next call but chrome tools says it works $.postGo('/echo/html', { questionText: qtext, choice0: choices[0], choice1: choices[1], choice2: choices[2], choice3: choices[3], choice4: choices[4] }); } //Use .live because we will be adding more .editables at runtime. $('.editable').live('click', editHandler); $('#addchoice').click(addChoice); $('.delchoice').live('click', deleteChoice); $('#submit').click(submitQuestion); //from http://stackoverflow.com/questions/1149454/non-ajax-get-post-using-jquery-plugin. (function($) { $.extend({ getGo: function(url, params) { document.location = url + '?' + $.param(params); }, postGo: function(url, params) { var $form = $("<form>") .attr("method", "post") .attr("action", url); $.each(params, function(name, value) { $("<input type='hidden'>") .attr("name", name) .attr("value", value) .appendTo($form); }); $form.appendTo('#theform'); $form.submit(); } }); })(jQuery);
<span id="qtext" class="editable"> Enter your question here...</span> <ul id="choices"> <li><span class="editable">Choice...</span> <a href="#" class="delchoice">X</a></li> <li><span class="editable">Choice...</span> <a href="#" class="delchoice">X</a></li> </ul> <a href="#" id="addchoice">+</a><br/> <input type="button" value="Submit" id="submit"/> <div id="theform"></div>
.editable:hover { background-color: yellow;} ul { list-style: decimal } #addchoice, .delchoice { text-decoration: none; }