Question

The following code is supposed to, on click of <span class="edit_submit"></span>, get the contents of the textarea and send it, via POST, to edited_page.php, and then display the contents of edited_page.php. At the moment, I don’t believe the function is even running. Any ideas?

Fiddle is here.

$('.edit_submit').on('click', function () {
                $parent = $(this).parent()
                $textarea = $(this).siblings(".el-rte").child(".workzone").child("textarea");
                $text = $textarea.val();
                $id = $textarea.attr('id');
                $parent.html("images/load.jpg").load("edited_page.php", {location: $id, content: $text, page: "<?php echo $page; ?>"});
            });

HTML:

<div id="main">
    <div class="el-rte">
        <div class="workzone" style="height: 400px;">
            <textarea id="main" class="edit_area" style="display: none; height: 400px;" name="main">
                &lt;b&gt;Hello. &lt;/b&gt;&lt;i&gt;This is sam &lt;/i&gt;&lt;u&gt;Testing this website&nbsp;&lt;/u&gt;
            </textarea>
        </div>
    </div>
    <span class="edit_submit" style="background:black;">Save Edit</span></div>
</div>

Answer 1

here is the working fiddle… there is no child() method in jquery i used children()… and fixed issues that was there in your fiddle

$('.edit_submit').on('click', function () {
           $parent = $(this).parent()
           $textarea = $(this).siblings(".el-rte").children(".workzone").children("textarea");
           $text = $textarea.val();
           $id = $textarea.attr('id');
           alert($id);
           $parent.html("images/load.jpg").load("edited_page.php", {location: $id, content: $text, page: "<?php echo $page; ?>"});
        });

AND INSTEAD OF GOING THROUGH CHILDREN AND SIBLINGS..you can just use find()

$textarea = $parent.find('textarea');

updated

fiddle