Replacewith – Editable Textbox and Save Button

18th April 2014

Jquery - Strings

Turns a variable into an editable piece of text in a text box and a save button, when clicked displays the new amount back in a nice box without a refresh.


<div class='changeme' >1000</div> <!-- variable -->


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>        

 $(document).delegate('.done', 'click', function() {
    $('#txtname').replaceWith(function() {
$(".done").hide();


// add to api to change budget


        return '<div class="done">' + $(this).val() + ' -  Saved...</div>';
    });
}); 

$(".changeme").click(function() {
var thevalue = $( this ).text();
$(this).replaceWith($('<form action="replacewith.php" method="get"><input id="txtname" value=' + $(this).text() + '> <input class="done" type="button" value="Save Budget"></form>'));
});



</script>
<style>

#txtname {
color: red;
border: 2px solid blue;
width: 110px;
text-align: center;
}

div {
color: red;
border: 2px solid blue;
width: 110px;
margin: 3px;
text-align: center;
}
</style>

$(document).delegate('.done', 'click', function() {

$('#txtname').replaceWith(function() {

$(".done").hide();

// add to api to change budget

return '<div class="done">' + $(this).val() + ' - Saved...</div>';

});

$(".changeme").click(function() {

var thevalue = $( this ).text();

$(this).replaceWith($('<form action="replacewith.php" method="get"><input id="txtname" value=' + $(this).text() + '> <input class="done" type="button" value="Save Budget"></form>'));

});

</script>

<style>

#txtname {

color: red;

border: 2px solid blue;

width: 110px;

text-align: center;

}

div {

color: red;

border: 2px solid blue;