how to change/edit value of label with jquery/javascript?

Question

i have a standart html label with value:

<label id="telefon" value="101"></label>

i like to edit this value by clicking on the label and enter on the appeared textbox new value (like value="202").

how can i do such a tricky thing?

i tried it with JQuery function, but it really dont wont to work:

$(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();
  });

});

Could you please provide the full HTML markup, like the edit anchor, input type text, etc.?? — palaѕн
– palaѕн, Commented Oct 7, 2013 at 9:26
Hey, it would be simple, can you please post your tried code in jsfiddle, — RONE
– RONE, Commented Oct 7, 2013 at 9:27
You should use innerHTML not value like <label id="telephon">101</label> and then you can change label innerHTML with .html or .text — Sina R.
– Sina R., Commented Oct 7, 2013 at 9:28
or just use a data-attribute - <label id="telephon" data-value="101"></label> - value is got using lbl.data("value") — Pete
– Pete, Commented Oct 7, 2013 at 9:37

user2587132 · Accepted Answer · 2013-10-07 10:00:58Z

8

http://jsfiddle.net/jasuC/ , Since you didnt provide the markup, take a look into this working example

$(document).on("click", "label.mytxt", function () {
    var txt = $(".mytxt").text();
    $(".mytxt").replaceWith("<input class='mytxt'/>");
    $(".mytxt").val(txt);
});

$(document).on("blur", "input.mytxt", function () {
    var txt = $(this).val();
    $(this).replaceWith("<label class='mytxt'></label>");
    $(".mytxt").text(txt);
});

answered Oct 7, 2013 at 10:00

user2587132

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

1 Comment

Prateek Gupta Over a year ago

This work even better if we set an 'id' in the 'input' type, like <input id=" + some_id + " type='text' />"

Claudio Santos · Accepted Answer · 2013-10-07 10:01:58Z

1

You don't need the jquery.

To made almost all tag elements editable set the contentEditable to true.

So, you can change using the default features of a HTML.

answered Oct 7, 2013 at 10:01

Claudio Santos

1,31713 silver badges22 bronze badges

Comments

Stphane · Accepted Answer · 2013-10-07 10:45:39Z

// You can add an event listener to your form tag and code the handler which will be common to all your labels (Fiddle HERE)

// HTML

<form id="myform">
    <label style="background-color:#eee" title="101">Value is 101<label>
</form>

// JS

$(function(){
    $('#myform').on('click',function(e){
        var $label = $(e.target), $form = $(this), $editorInput = $('#editorInput'), offset = $label.offset();
        if($label.is('label')){
            if( !$editorInput.length){
                $editorInput = $('<input id="editorInput" type="text" value="" style="" />').insertAfter($label);
            }
            $editorInput.css('display','inline-block')
                .data('editingLabel', $label.get(0))
                .focus()
                .keydown(function(e){
                    var $l = $($(this).data('editingLabel')), $t = $(this);
                    if(e.which == 13){
                        $l  .attr('title', $t.val().replace(/(^\s+)|(\s+$)/g,''))
                            .text('value is now ' + $l.attr('title'));

                        // UPDATE YOUR DATABASE HERE

                        $t.off('keydown').css('display','none');
                        return false;
                    }
                });
        }
    });
});

// A bit of CSS

#editorInput{display:none;padding:2px;border:1px solid #eee;margin-left:5px}

Collectives™ on Stack Overflow

how to change/edit value of label with jquery/javascript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related