CODEWITHSUNDEEP
jqueryhtml
user254153
user254153

Reputation: 1883

Convert span tag to textbox with value inside it

I am going to make the editing the fields. When user click on edit i want information to converted into textbox with the value that was previously but i am getting problem. Below codes are what i have tried. It gives HTML tags instead of displaying the textbox. How can i achieve this. Thank you.

Jquery

  $(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
    var x = '<input type="text" value="' + name + '">';
   $("#name").text(x);
   $("#city").text("<input type='text' value='" + city + "'>");
   $("#mob").text("<input type='text' value='" + mob + "'>");
});

HTML

 <li class="list-group-item"> <b>Name:</b> <span class="inf" id="name">Some name</span> <span class="label label-info edit">Edit</span> </li>
    <li class="list-group-item"> <b>Current City:</b> <span class="inf" id="city"> City name</span>  </li>
    <li class="list-group-item"> <b>Mobile Number:</b> <span class="inf" id="mob"> mobile number </span> </li>

Upvotes: 1

Views: 3650

Answers (3)

vengatesh rkv
vengatesh rkv

Reputation: 327

Try this code:

HTML:

<li class="list-group-item"> <b>Name:</b> <br/><span class="inf" id="name"><?php echo $uinfo->name; ?></span>  </li>
<li class="list-group-item"> <b>Current City:</b><br/> <span class="inf" id="city"><?php echo $uinfo->current_city; ?></span>  </li>
<li class="list-group-item"> <b>Mobile Number:</b><br/> <span class="inf" id="mob"><?php echo $uinfo->m_number; ?></span> </li><br/>
<span class="label label-info edit">Edit</span>

JS:

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
   $("#name").html("<input type='text' value='" + name + "'>");
   $("#city").html("<input type='text' value='" + city + "'>");
   $("#mob").html("<input type='text' value='" + mob + "'>");
});

Here the live DEMO for your reference

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

use replaceWith() in jquery ,and change attribute ,values,id 

$(".edit").on('click', function () {
    $(".inf").each(function () {
        $(this).replaceWith(function (i, text) {
            return $("<input>", { // change the type
                type: "text",
                value: text, // getting span text 
                id: this.id // getting span id
            })
        });
    });
});

DEMO

Upvotes: 0

roullie
roullie

Reputation: 2820

use .html() not .text()

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
    var x = '<input type="text" value="' + name + '">';
    $("#name").html(x);
    $("#city").html("<input type='text' value='" + city + "'>");
    $("#mob").html("<input type='text' value='" + mob + "'>");
});

since you want an html element to be seen on a specific element use .html()

Upvotes: 1

Related Questions