Edit This

Toggle between display value and edit form, with Ajax form submit

Basic Example

mbira

marimba mbira ngoma hosho

This is a cat

        
<div class="bse-edit-this" data-form_id="SeletInstrumentForm" data-action="#">
    <span class="bse-edit-this-content">mbira</span>
</div>

<!-- Editing 'form' may be presented anywhere else in the markup, may be hidden -->
<!-- If it is an actual form element, it can supply the method and action attributes -->
<div id="SeletInstrumentForm">
    <select name="instrument" class="bse-edit-this-control">
        <option value="xylophone">marimba</option>
        <option value="thumbPiano" selected="">mbira</option>
        <option value="drums">ngoma</option>
        <option value="shakers">hosho</option>
    </select>
</div>

<div class="bse-edit-this" data-form_id="CaptionForm">
    <span class="bse-edit-this-content">This is a cat</span>
</div>

<form id="CaptionForm" method="POST" action="#">
    <input class="bse-edit-this-control" type="text" value="This is a cat" name="caption">
    <input type="submit" value="Save" name="submit">
</form>