3

I have an image button and when I click it I want an specific field to go from text to an editable textfield, kinda like a dynamic edit button.

So I have the plain text with certain id (ie. id="text1") and when I click the button, the text changes to an editable field, maybe something like $("#text1").hide(); and then $("#field1").show(); but in between I need to give the field the value of the text, and then when I click the button save I should hide the input field and just show the text with the new value.

Any help will be greatly appreciated.

Thanks :D

Improve this question

3 Answers 3

Reset to default
5

Given an input field, a paragraph with id="text1" and a button.

<input type="text" /> <p id="text1">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p> <button>Copy</button>

This simple jQuery will copy the text from the paragraph, hide it and show the input with the text from the paragraph.

$("button").click(function() { $("input").val( $("#text1").hide().text() ).show(); });

Here's a sample.

Just for fun, I've written a small script that enables <editable> functionality for paragraphs. Just add a class of .editable to any paragraph and jQuery takes care of the rest. I haven't extended it to allow multiple edits and I almost started writing AJAX calls that save to the database because I'm bored. But since the sun is shining I thought I'd rather go to the beach. Here's my code and a sample.

$(".editable").each(function(i) { var $this = $(this); $this.attr("id", "orig-" + i); var $edit = $("<button />") .text("edit") .attr("id", "update-" + i) .click(function() { var $input = $('<input type="text" />') .attr("id", "edit" + i) .val($this.text()); var $save = $('<button>Save</button>') .click(function() { var $new = $("<p />").text($input.val()); $input.replaceWith($new); $(this).hide(); }); $(this).replaceWith($save); $this.replaceWith($input); }); $(this).after($edit) });

SAMPLE

You really don't need all the ID's but if you're gonna do a POST with new values, you can easily refer to the elements.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I get the impression that the OP wants to change from a text-node (say a p) to a textarea, rather than from an <input type="text" />.
@David - You're right I completely misunderstood that. Have modified slightly to suit.
@Marko, so I saw. +1 for the edit, and the lorem ipsum from the 'hood =)
@Marko - the code is almost perfect, but I should be able to edit it multiple times, not just one time
also, I just noticed that the id changes, it should not change at all.
|
0

Not too bad. The text goes into the value area of the text field. So get it from the text area, save it in a temp variable, and put it in the textfield.

Actually, you don't even need the temp I don't think, it should look something like

$('#field1').val($('#text1').text)

Note this is untested. You might find this SO article to be of value as well.

Improve this answer

Comments

0 

$(document).ready(function(){ $('#mod').click(function(){ $('#text1').html('<input id="no" size="'+$(this).text().length+'" type="text" value="'+ $('#text1').text() + '">'); $('#mod').hide(); $('#sav').show(); }); $('#sav').click(function(){ // here code to save data in database }); }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <td id="text1"> text </td> <input type="button" id="mod" name="modify" value="modify" /> <input type="submit" name="submit" id="sav" value="save" /> </table>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.