Question

I am using the jQuery Jeditable (amazing script btw) to create an edit-in-place form. So, on top of the form, I load the script. Then, the form consists of several hidden fields, which pre-populate themselves with the text from the relevant < p> tags.

With the help of you all here, this is an example of how the field is pre populated:

Text from edit-in-place page:

<p class="autogrow" style="width: 300px" id="title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

Javascript script which does the business:

<script type="text/javascript" charset="utf-8">
$(function() {
  $("#input_3_2").val($("#title").text());
});
</script> 

The problem that I have, is that at the moment, field with ID ‘input_3_2’ is pre-populated with the text from paragraph with ID ‘title’ when the page loads.

Is it possible to re-fill/ or re-populate the field every time the paragraph is changed?

Answer 1

Use the callback

$("#title").editable('http://www.example.com/save.php', { 
    type     : 'textarea',
    submit   : 'OK',
    callback : function(value, settings) {
        $("#input_3_2").val( value );     
    }
});