Pass text to database using jquery
I am displaying text on screen and when I click it I can edit the text using jquery.
But I don't know how to reset the text that I edited to the default and send the text to the database. If anyone knows this please help me, thanks in advance.
jQuery.fn.extend({
live: function (event, callback) {
if (this.selector) {
jQuery(document).on(event, this.selector, callback);
}
}
});
$(document).on('click', '.cmtedit', function (e) {
console.log(this);
TBox(this);
});
$("input").live('blur', function (e) {
RBox(this);
});
function TBox(obj) {
var id = $(obj).attr("id");
var tid = id.replace("cmt_edit_", "cmt_tedit_");
var input = $('<input />', { 'type': 'text', 'name': 'n' + tid, 'id': tid, 'class': 'text_box', 'value': $(obj).html() });
$(obj).parent().append(input);
$(obj).remove();
input.focus();
}
function RBox(obj) {
var id = $(obj).attr("id");
var tid = id.replace("cmt_tedit_", "cmt_edit_");
var input = $('<p />', { 'id': tid, 'class': 'cmtedit', 'html': $(obj).val() });
$(obj).parent().append(input);
$(obj).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="sample">
<p id="cmt_edit_323" class="cmtedit">Sample Text</p>
</div>
<div>
<button type="reset" class="btn btn-primary">Reset</button>
<button type="submit" class="btn btn-success" name="subtn">Submit</button>
</div>
</form>
+3
source to share
1 answer
Try to keep the previous value with some variable. Then reset click add previous value to function
var before;
jQuery.fn.extend({
live: function(event, callback) {
if (this.selector) {
jQuery(document).on(event, this.selector, callback);
}
}
});
$(document).on('click', '.cmtedit', function(e) {
TBox(this);
});
$("input").live('blur', function(e) {
RBox(this);
});
$('.btn-primary').click(function() {
$("input").trigger('blur')
console.log(before)
$('.cmtedit').text(before)
})
function TBox(obj) {
before = $(obj).text()
console.log(before)
var id = $(obj).attr("id");
var tid = id.replace("cmt_edit_", "cmt_tedit_");
var input = $('<input />', {
'type': 'text',
'name': 'n' + tid,
'id': tid,
'class': 'text_box',
'value': $(obj).html()
});
$(obj).parent().append(input);
$(obj).remove();
input.focus();
}
function RBox(obj) {
var id = $(obj).attr("id");
var tid = id.replace("cmt_tedit_", "cmt_edit_");
var input = $('<p />', {
'id': tid,
'class': 'cmtedit',
'html': $(obj).val()
});
$(obj).parent().append(input);
$(obj).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="sample">
<p id="cmt_edit_323" class="cmtedit">Sample Text</p>
</div>
<div>
<button type="reset" class="btn btn-primary">Reset</button>
<button type="submit" class="btn btn-success" name="subtn">Submit</button>
</div>
</form>
+2
source to share