CODEWITHSUNDEEP
jqueryasp.nettextboxlabel
user998405
user998405

Reputation: 1339

change label to a textbox by using jQuery?

How can i make a label change to a text box by using jQuery?For example i got 2 button , one is edit ,another one is view. When user clicks the edit button, all label control will turns into a textbox.On the other hand , when use click the view button , all textbox will change to label. I know that i can use "Visible" property to visible certain control. But there are too many control in my page. It spend me a lot of time to code .Can anyone help me?

Upvotes: 1

Views: 9154

Answers (2)

kasdega
kasdega

Reputation: 18776

I think what you want is to be able to change the text on a button when a user clicks on it.

If that is the case then try this: http://jsfiddle.net/kasdega/MGCVW/

$(document).ready(function() {
    $(".textButton").click(function() {
        var me = $(this);

        me.hide();
        me.after("<input id='tmpInput'/>");
        $("#tmpInput").focus();
        $("#tmpInput").bind("keyup", function(e) {
            e.preventDefault();
            if (e.keyCode == '13') {
                var value = $(this).val();
                $(this).remove();
                if(me.is("input")) {
                    me.val(value);
                } else if(me.is("button")) {
                    me.text(value);
                }
                me.show();
            }
            return false;
        });
    });
});

Upvotes: 0

Will
Will

Reputation: 20235

You can use jQuery's replaceWith function.

$( "label" ).replaceWith( function() {
    return "<input type=\"text\" value=\"" + $( this ).html() + "\" />";
});

Demo: http://jsfiddle.net/eqne2/1/

Upvotes: 10

Related Questions