JQuery change text to input

Question

I have a table setup like below:

<table>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page1.html" />
    </td>
  </tr>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page2.html" />
    </td>
  </tr>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page3.html" />
    </td>
  </tr>
</table>

I basically want the anchor to change to a text box containing the href when the link is click, below are example results:

<table>
  <tr>
    <td class="url">
       <input type="text" value="http://www.domainname.com/page1.html" />
    </td>
  </tr>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page2.html" />
    </td>
  </tr>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page3.html" />
    </td>
  </tr>
</table>

When another anchor tag is click or the text box is unfocused, any text boxes go back to being a anchor and the clicked one changes to a text box.

lode · Accepted Answer · 2014-05-09 00:13:37Z

13

This is a start. Add a click event to the links and a blur event to the inputs using live().

$(function() {
  $("td.url a").live("click", function() {
    var parent = $(this).parent();
    $(this).replaceWith("<input type='text' value='" + $(this).attr("href") + "'>"); //closing angle bracket added
    parent.children(":text").focus();
    return false;
  });
  $("td.url :text").live("blur", function() {
    $(this).replaceWith("<a href='" + $(this).val() + "'>");
  });
});

That being said, for this kind of thing I prefer not to delete elements from the DOM like this. Instead I prefer to just hide/show elements as appropriate. For example:

<table>
  <tr>
    <td class="url">
       <a href="http://www.domainname.com/page1.html" />
       <input type="text">
    </td>
  </tr>
</table>

with:

td.url input { display: none; }
td.edit a { display: none; }
td.edit input { display: block; }

and

$(function() {
  $("td.url a").click(function() {
    var a = $(this);
    a.next().val(a.attr("href")).focus();
    a.parent().addClass("edit");
    return false;
  });
  $("td.url :text").blur(function() {
    var txt = $(this);
    txt.prev().attr("href", txt.val());
    txt.parent().removeClass("edit");
  });
});

edited May 9, 2014 at 0:13

lode

5747 silver badges22 bronze badges

answered Oct 22, 2009 at 12:37

cletus

627k169 gold badges922 silver badges945 bronze badges

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

4 Comments

Alex H Over a year ago

this is a more graceful solution

peirix Over a year ago

Won't it be necessary to focus the input field when it's clicked? So that it will force the blur method to be called if something else is clicked...

lode Over a year ago

add the closing bracket in code ( $(this).replaceWith("<input type='text' value='" + $(this).attr("href") + "'>"); //closing angle bracket added) line 4

Memet Olsen Over a year ago

FYI: The jQuery live() function is deprecated. Use the on() function instead.

Alex H · Accepted Answer · 2009-10-22 12:36:59Z

2

$(".url").click(function()
{
var link = $(this).find("a");
link.hide();
$(this).append("<input id'txtUrl' value" + link.attr("href") + " />");
});

answered Oct 22, 2009 at 12:36

Alex H

7184 silver badges8 bronze badges

1 Comment

shgnInc Over a year ago

Doesn't It append that input to all the ".url"?

Victor · Accepted Answer · 2009-10-22 12:47:30Z

0

Something like:

$("td.url a").bind("click", function(){
    var clickevent = arguments.callee;
    $("td.url input").trigger("blur");
    $(this).replaceWith("<input type='text' value='"+$(this).attr("href")+"'/>");
    $("td.url input").bind("blur", function(){
        $(this).replaceWith("<a href='"+$(this).val()+"' />");
        $("td.url a").bind("click", clickevent);
    });
});

totally untested, of course

edited Oct 22, 2009 at 12:47

answered Oct 22, 2009 at 12:38

Victor

9,2793 gold badges29 silver badges40 bronze badges

Collectives™ on Stack Overflow

JQuery change text to input

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related