CODEWITHSUNDEEP
javascriptjquery
Qiu Xue
Qiu Xue

Reputation: 163

pass text to database using jquery

I'm display a text on screen and when I click it,I can edit the text using jquery.
But I dunno how to reset the text that I edited to default and submit the text to database. If anyone know it please help me,thank 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>

Upvotes: 3

Views: 192

Answers (1)

prasanth
prasanth

Reputation: 22500

Try this store the previous value with some variable .Then reset click add that 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>

Upvotes: 2

Related Questions