javascriptjqueryformsjquery-eventsjeditable

jQuery edit in place - update/pre-fill field every time the content has been edited

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?

Solution

  • Use the callback

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