changing elements in a list

Question

I would like to have the text after the "Question:" and "Answer:" change into text input upon clicking the Edit_Question button. I don't know a good way to make this work. Here is the code I have:

<script type="text/javascript">
<!--
$("li div").hide();
$("li h3").click(function(){
    $(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
})

//-->
</script>
<ul class="Question_List">

<?php foreach($FAQS as $FAQ) { ?>

    <li>
    <h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
            <div>
            <h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
            <table style='max-width: 250px;'>
                <tbody>
                        <tr>

    <td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
        <td><input type='button' class="Edit_Question" value='edit'/></td>
        <td><input type='button' class="Delete_Question" value='delete'/></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </li>

<?php } ?>  

<li><br><input type="button" class="New_Question" value="NEW"/></li>
</ul>

Answer 1

First of all, you are missing a closing </td> tag after your page <select>. If you want to make it easy to select the text of your questions and answers, wrap them in an element. In my example, I wrapped them in a <span> element and gave them question and answer classes respectively.

Try a demo: http://jsfiddle.net/v3yN7/

HTML:

<li>
    <h3><u><strong><i>Question:</i></strong><span class="question">What should I ask?</span></u></h3>
    <div>
        <h4><strong><i>Answer:</i></strong><span class="answer">This is a rather short answer</span></h4>
        <table style='max-width: 250px;'>
            <tbody>
                <tr>

                    <td><strong>Pages:</strong><select><option>1</option><option>2</option></select></td>
                    <td><input type='button' class="Edit_Question" value='edit'/></td>
                    <td><input type='button' class="Delete_Question" value='delete'/></td>
                </tr>
            </tbody>
        </table>
    </div>
</li>

Javascript:

$('.Edit_Question').click(function() {
    // Find the <li> element the whole clicked thing is wrapped in
    var $item = $(this).closest('li');

    // Select all question and answer wrappers
    $item.find('.question,.answer').each(function() {
        var $this = $(this);

        // Get the question/answer text
        var txt = $this.text();

        // Empty the wrapper and replace them with an input box
        $this.empty().append($('<input type="text" />').val(txt));
    });
});

I assumed you just want a simple input box for editing, but it can be easily changed to a <textarea> if needed.

As to what happens next, I'll leave it up to you. :)

Answer 2

just copy this code to your page without damading your script.

<script type="text/javascript">
<!--

var editBox = false;

$("li div").hide();
$("li h3").click(function(){
$(this).next("div").slideToggle("fast").siblings("div").slideUp("fast");
});

$('.Edit_Question').click(function() {
if(editBox) 
{
   $('.edit_area').css({'display':''});
   editBox = true;
} else {
   $('.edit_area').css({'display':'none'});
   editBox = false;
}
});

//-->
</script>
<ul class="Question_List">

<?php foreach($FAQS as $i => $FAQ) { ?>

    <li>
       <h3><u><strong><i>Question:</i></strong><?php echo $FAQ['question'];?></u></h3>
        <div>
          <h4><strong><i>Answer:</i></strong><?php echo$FAQ['answer'];?></h4>
            <table style='max-width: 250px;'>
                <tbody>
                    <tr id="edit_area" style="display:none;">   
                        <td colspan=3><textarea cols=20 rows=5 name="editTextBox"></textarea></td>
                    </tr>
                    <tr>
                        <td><strong>Pages:</strong><select><option>1</option><option>2</option></select>
                        <td><input type='button' class="Edit_Question" value='edit'/></td>
                        <td><input type='button' class="Delete_Question" value='delete'/></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </li>

<?php } ?>  

<li><br><input type="button" class="New_Question" value="NEW"/></li>

Answer 3

Just disable/enable the textbox and style the disabled version: HTML:

<button id="edit">Edit</button>
<input id="myinput" type="text" disabled="disabled" value="My Value"/>

CSS:

input:disabled {
    background-color:#fff;
    border:none;
}

JavaScript:

document.getElementById("edit").onclick = function() {
  document.getElementById("myinput").disabled = "";
};