jquery를 사용하여 데이터베이스에 텍스트 전달

Question

화면에 텍스트를 표시하고이를 클릭하면 jquery를 사용하여 텍스트를 편집 할 수 있습니다.
하지만 편집 한 텍스트를 기본값으로 재설정하고 데이터베이스에 텍스트를 제출하는 방법을 모르겠습니다. 누군가가 저를 도우십시오 알고있는 경우에, 미리 감사하십시오.

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>

Answer 1

잘

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>