Question

var text = $(this).text();
    alert(text);
    Afterdata = "<div><span><input type=text class=inputtext value="+text+">"+
    "</span>" +
    "<span class=save><input type=button value=Save></span>" +
    "<span class=cancel><input type=button value=Cancel></span></div>"
    $(this).parent().html(Afterdata);
    //$(".inputtext").val(text);

What is here is a fragment of my code, the var text is the data that is retrieved from the span, say text = "how you doing". Basically what my code is doing is that after I click on the span text field, it transforms into a input text field along with two buttons as shown above, where the text field keeps the text from the span, ("how you doing"). It is supposed to display a input box that is pre-filled with "how you doing" but it only fills with "how" without the following "you doing" part. The weird thing is that the alert function display "how you doing" successfully and commented bottoms line displays "how you doing" as well. However, the weirdest one is that my another function works like a charm:

var text = $(this).text();
$(this).parent().html("<span class=sample>"+text+"</span>" +
            "<span><input type=button value=Delete class=delete></span>");

which is the same idea. The only difference is that the substituted part in the later one is in span instead of the value of input. see the difference? I have no clue; any help?

Answer 1

The html you generate is something like this:

<div><span><input type=text class=inputtext value=how you doing></span>...

(the rest is not important)

As you can see, the value property needs quotes. Also, you should consider the case where the text contains quotes, so those need to be escaped.

EDIT: you can do it like this:

Afterdata = "<div><span><input type=text class=inputtext value=\"" + text.replace(/"/g, '&quot;') + "\">" + "</span>" + "<span class=save><input type=button value=Save></span>" + "<span class=cancel><input type=button value=Cancel></span></div>"

See it working here.