how to edit label value after clicking on a href with javascript?

Question

i have:

                    <tr>
                        <td align="left">Phonenr:</td>
                        <td align="left"><b>
                            <label style="color: #662819;" id="phone">911</label>
                        </b></td>
                        <td><a href="#">Change phone</a></td>
                    </tr>

how can i edit phonenumber after clicking on a href="#" and changing(which way?) label into textfield/box?

possible duplicate of [Change Label to Textbox on edit hyperlink click](http://stackoverflow.com/questions/16792502/change-label-to-textbox-on-edit-hyperlink-click) — mplungjan, Sep 20 '13 at 20:53
@mplungjan why in this solutions from you, name will be not changed after removing mouse from field or clicking enter??? — r.r, Sep 20 '13 at 20:59

score 1 · Accepted Answer · edited May 23 '17 at 11:50

Based on Change Label to Textbox on edit hyperlink click

Live Demo

$(function() {
  $('a.edit').on("click",function(e) {
    e.preventDefault();
    var dad = $(this).parent().parent();
    var lbl = dad.find('label'); 
    lbl.hide();
    dad.find('input[type="text"]').val(lbl.text()).show().focus();
  });

  $('input[type=text]').focusout(function() {
      var dad = $(this).parent();
      $(this).hide();
      dad.find('label').text(this.value).show();
  });
});

score 0 · Answer 2 · answered Sep 20 '13 at 20:50

0

Try:

$('tr a').click(function() {
    var label = $(this).parent().prev().find('label');
    label.replaceWith('<input type="text" value="211"/>');
    return false;
});

if more then one tr have a tag then you should put id on a or on tr.

answered Sep 20 '13 at 20:50

jcubic

61,973
54
229
402

but i want to edit text freely.. not just 211... everything!! SEE UPDATED QUESTION! – r.r Sep 20 '13 at 20:51
If you want to switch back to label then you should keep original label in variable and mabye use detach and append input. – jcubic Sep 20 '13 at 20:54

how to edit label value after clicking on a href with javascript?

2 Answers2