How to put a string in input type="text" with jQuery?

Question

I don't understand why my code doesn't work: I try to put a string into input type="text" with jQuery and it doesn't work. It separates different elements of the string when there are space in properties for the input.

My jQuery Code:

<script type="text/javascript">
    $(document).ready(function() {
        $(".btnEditSerie").click(function (e) {            
            e.preventDefault();
            var tr = $(this).closest('tr');
            var $GroupingId = tr.find('#item_GroupingId').val()
            localStorage['GroupingId'] = $GroupingId;
            var $Title = tr.find('#item_Title').val();
            var $Description = tr.find('#item_Description').val();
            var $Image = tr.find('#item_Image').val();
            $("#b").hide("slow");
            $("#btnretour").show();
            $('#SerieEdit').append("<label id=" + 'test2' + ">" + "Modification de :" + " " + $Title+ "</label>");
            $('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Title + " id=" + 'SerieNewName' + " />"
                                 + "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Description.toString() + " id=" + 'SerieNewDescription' + "/>"
                                 + "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value="+$Image.toString()+ " id=" +'SerieNewImage'+"/>");
            $("#SerieEdit").show();
            $("#TextEdit").show();   
        })

        $('#btnRet').click(function() {
            $("#b").show("slow");
            $("#SerieEdit").hide();
            $("#TextEdit").hide();
            $("#SerieEdit").empty();
            $("#TextEdit").empty();
            $("#btnretour").hide();
        })
    });   
</script>

With val(), for instance $Title must be a string, and when i put $Title in the .Append() it returns a thing like that:

My sad html code:

<h2>EditRefSerie</h2>
<div id="SerieEdit">
    <div id="TextEdit">
        <label>Titre : </label>
        <input id="SerieNewName" type="text" thrones="" of="" value="Games">
        <label>Description : </label>
        <input id="SerieNewDescription/" type="text" thrones="" of="" value="games">
        <label>Image : </label>
        <input id="SerieNewImage/" type="file" value="Dessin1.jpg">
    </div>
<div id="btnretour" style="">

For the string "Games of thrones" it returns:

<input id="SerieNewName" type="text" thrones="" of="" value="Games">

Have you ideas how to fix it? Do I use jQuery correctly?

don't build your html with string concatenation. use a templating engine or use jquery's functions to create a new dom element. — Daniel A. White
– Daniel A. White, Commented Jul 22, 2014 at 11:52
Where is your "tr" attribute in your code? do you have any error in the console? — Jean-philippe Emond
– Jean-philippe Emond, Commented Jul 22, 2014 at 11:54

ZiNNED · Accepted Answer · 2014-07-22 11:54:58Z

1

You're forgetting quotes:

Your JS:

$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Title + " id=" + 'SerieNewName' + " />" 
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value=" + $Description.toString() + " id=" + 'SerieNewDescription' + "/>" 
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value="+$Image.toString()+ " id=" +'SerieNewImage'+"/>");

Should be:

$('#TextEdit').html("<label>" + "Titre :" + " " + "</label>" + "<input type=" + 'text' + " value='" + $Title + "' id=" + 'SerieNewName' + " />" 
+ "<label>" + "Description :" + " " + "</label>" + "<input type=" + 'text' + " value='" + $Description.toString() + "' id=" + 'SerieNewDescription' + "/>" 
+ "<label>" + "Image :" + " " + "</label>" + "<input type="+'file'+" value='"+$Image.toString()+ "' id=" +'SerieNewImage'+"/>");

Note the added quotes for the value attributes. Bonus tip: there's no need to put input types in a concatenated string. It's much more readable if you do:

"<input type='text' value='" + val + "' />"

instead of:

"<input type='" + 'text' + "' value='" + val + "' />"

like you're doing.

answered Jul 22, 2014 at 11:54

ZiNNED

2,64022 silver badges32 bronze badges

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

1 Comment

Julien698 Over a year ago

Your solution works perfectly ! Thank I will spent more time the to reread the " and ' the next time thanks !!!

AGB · Accepted Answer · 2014-07-22 11:55:29Z

0

You aren't using quotes around your attributes properly e.g.

$('#SerieEdit').append("<label id='" + test2 + "'>" + "Modification de :" + " " + $Title+ "</label>");

answered Jul 22, 2014 at 11:55

AGB

2,45723 silver badges39 bronze badges

1 Comment

Julien698 Over a year ago

Thanks i don't remember that we can use '"+ var + "'

Jean-philippe Emond · Accepted Answer · 2014-07-22 12:00:41Z

0

ID is unique in HTML page. So you don't need to "find" for retrieve your value.

Also, the variable don't need a "$"

Do something like:

$(document).ready(function () {
    $(".btnEditSerie").click(function (e) {            
        e.preventDefault();
        var GroupingId = $('#item_GroupingId').val(); // not need to find if you have a id.. id is unique in the HTML page.
        localStorage['GroupingId'] = $GroupingId;
        var Title = $('#item_Title').val();
        var Description = $('#item_Description').val();
        var Image = $('#item_Image').val();
        $("#b").hide("slow");
        $("#btnretour").show();
        $('#SerieEdit').append("<label id='test2'>Modification de : " + Title + "</label>");
        $('#TextEdit').html("<label>Titre : </label> <input type='text' value=" + Title + " id='SerieNewName' /> <label> Description : </label><input type='text' value=" + Description + " id='SerieNewDescription'/><label>Image : </label><input type='file' value="+ Image + " id='SerieNewImage'/>");
        $("#SerieEdit").show();
        $("#TextEdit").show();
    });


    $('#btnRet').click(function(){
        $("#b").show("slow");
        $("#SerieEdit").hide();
        $("#TextEdit").hide();
        $("#SerieEdit").empty();
        $("#TextEdit").empty();
        $("#btnretour").hide();
    })
});

answered Jul 22, 2014 at 12:00

Jean-philippe Emond

1,6142 gold badges17 silver badges30 bronze badges

2 Comments

Casey Falk Over a year ago

"Also, the variable don't need a '$'" -- The "$" is a valid character for an identifier and often is used to differentiate between variables that are jQuery objects and those that are not. It is good practice to detail what a variable is with good names -- so why not include it?

Jean-philippe Emond Over a year ago

True but you don't need it.. it is only aestetic. so I just do a mention.

Collectives™ on Stack Overflow

How to put a string in input type="text" with jQuery?

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related