JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<form id="ck_new_page" class="fleft">
    <ul>
        <fieldset>
            <li><label for="page_title">Page Title</label><input id="page_title" type="text" autofocus placeholder="Page Title" name="page_title" style="width:500px">
                <input id="page_url" type="text" disabled="disabled" class="fleft" style="width:400px"><input id="page_url_button" type="button" value="Submit" class="fright" style="width:60px">
            </li>
        </fieldset>
    </ul>
</form>

CSS

.fleft{ float:left;}
.fright{ float:right;}
label{ display:block; margin-bottom:10px;}
input{ margin-bottom:10px; padding:5px;}
form{ width:500px;}

JavaScript

$("input#page_url_button").click(function() {
    // Display entered text in URL field on submit
    var text = $("input#page_title").val();
    $("input#page_url").val(text);
    if ($(this).hasClass('edit_url_button')) {
        $(this).removeClass("edit_url_button");
        $(this).addClass("save_url_button");
        alert('Saved!');
        $(this).val("Submit");
        $("input#page_url").val('').attr('disabled', 'dsabled');
    }
    else if ($("input#page_url").val().length > 0) {
        $('input#page_title').val("Edit URL");
        $(this).addClass("edit_url_button");
        $(this).val("Save");
        $("input#page_url").removeAttr("disabled");
    }
});