SO - 22549623

by Arun P Johny

HTML

<div id="case-name">Case Name:&nbsp;In the Matter of
    <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50" />and
    <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50" />&nbsp;
    <button id="case-name-submit" type="button" value="none">Submit</button>
</div>

JavaScript

$(document).ready(function () {
    //EVENT TRIGGERS AND ACTIONS
    $('#case-name').on('click', '#case-name-submit', function () {
        $('#case-name').fadeOut('fast', function () {
            $(this).html(
                'Case Name:&nbsp;In the Matter of <span class="petitioner">' + $('#input-petitioner').val() + '</span> and <span class="respondent">' + $('#input-respondent').val() + '</span>&nbsp;<button id="case-name-change" type="button" value="none">Change</button>').fadeIn('fast')
        });
    }).on('click', '#case-name-change', function () {
        $('#case-name').fadeOut('fast', function () {
            var petitioner = $(this).find('.petitioner').text();
            var respondent = $(this).find('.respondent').text();
            $(this).html(
                'Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button>').fadeIn('fast');
            $('#input-petitioner').val(petitioner);
            $('#input-respondent').val(respondent);
        });
    });
});