I have a simple layout with a textblock and one <a>, like:
text1 edit
When I click on the <a>, I want this textblock to bee text input. How is that possible with jQuery?
I have a simple layout with a textblock and one <a>, like:
text1 edit
When I click on the <a>, I want this textblock to bee text input. How is that possible with jQuery?
- I have answered a similar question, take a look to: stackoverflow./a/28360984/442883 – rsa Commented Feb 6, 2015 at 7:57
- I have answered a similar question, take a look to: stackoverflow./a/28360984/442883 – rsa Commented Feb 6, 2015 at 7:58
4 Answers
Reset to default 3Use jQuery replaceWith():
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
$(this).parent().replaceWith("<input />");
});
});
http://jsfiddle/Dqkyg/1/
Furthermore, you can fill the textbox with the text outside the link like so:
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var txt = $(".text").html();
$(".text").replaceWith("<input value='" + txt + "' />");
});
});
http://jsfiddle/Dqkyg/5/
The following will replace the edit with Save & Cancel options:
<div>
<span class="text">testing</span> <a href='#'>test</a>
</div>
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var txt = $(".text").html();
$(".text").replaceWith("<input value='" + txt + "' />");
$(this).replaceWith("<a href='#'>Save</a> | <a href='#'>Cancel</a>");
});
});
http://jsfiddle/Dqkyg/6/
There are plenty of plugins that you can use... No need to reinvent the wheel
http://www.appelsiini/projects/jeditable
Hmm ... ur a bit unclear... but http://jsfiddle/mMYrf/4/
<div class="dataGrid">
<span>test</span>
<a href="#">edit</a>
</div>
And
$('.dataGrid a').click( function(e) {
e.preventDefault();
var EditGrid = $(this).parent().children('span');
var DataTxt = EditGrid.text();
var InputHtml = '<input type=text" value="'+DataTxt +'" />';
$(this).text('Save?');
EditGrid.html(InputHtml);
});
<div class="editable">This is the content.</div>
<script type="text/javascript">
$(function() {
$('.editable').each(function() {
var a = $('<a href="#">edit</a>');
(function(link, parent) {
link.click(function() {
link.remove();
var textField = $('<textarea/>').val(parent.html());
parent.replaceWith(textField);
delete parent, link;
});
})(a, $(this));
$(this).append(" ").append(a);
});
});
</script>
Working example: http://jsfiddle/BnH29/