Jquery, how to escape quotes

Question

I'm using a simple jquery code that grabs html code form a tag and then puts this content into a form input

<td class="name_cat" ><span class="name_cat">It&#039;s a &quot;test&quot; </span> (5)</td>

jquery gets the content into span.name_catand returns it as It's a "test". So when I print this into an input it becomes

<input value="It's a "test"" />

which as you can imagine will only show as It's a , the following double quote will close the value tag. What's the trick here to keep the original string while not showing utf8 code in the input?

Jquery code

            $(".edit_cat").click(function(){

            tr = $(this).parents("tr:first");
            id_cat = $(this).attr("id");
            td_name = tr.find(".name_cat");
            span_name = tr.find("span.name_cat").html();
            form = '<form action="/admin/controllers/edit_cat.php" method="post" >'+
                            '<input type="hidden" name="id_cat" value="'+id_cat+'" />'+
                            '<input type="text" name="name_cat" value="'+span_name+'" />'+
                            '<input type="submit" value="save" />'+
                            '</form>';
            td_name.html(form);

            console.log(span_name);


        }
        );

I basically need html() not to decode Utf8

Answer 1

I believe this should take care of it for you.

var span_name = tr.find("span.name_cat").html().replace(/"/g, """);

Example: http://jsfiddle.net/yzthA/

Also, don't forget to declare your variables with var if you haven't.

Answer 2

You can build the form the way you are now, but traverse the form object using jQuery's context

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>

<script type="text/javascript">
$(function() {
    $('#go').click(function() { 
        var tester = $('<div></div>').html('It&#039;s a &quot;test&quot;');
        var form = $('<form action="/admin/controllers/edit_cat.php" method="post" >' +
                    '<input type="hidden" name="id_cat" />' +
                    '<input type="text" name="name_cat" />' +
                    '<input type="submit" value="save" />' +
                    '</form>');
        $(':hidden:first', form).attr('value', tester.text());
        $(':text:first', form).attr('value', "Some attribute");

        $('#output').append(form);
    });
});
</script>
<input id="go" type="submit" value="click"/>
<div id="output">
</div>

What I've done here is wrapped your form html input in a jQuery object as form. Then, you can query items within that object's context using the little-used jQuery form of:

jQuery( selector, [context] )
selector: string containing a selector expression
context: DOM Element, Document, or jQuery to use as context

edit: I created a tester object and set the content to your html example. Then, when I set the value in the hidden input, I call .text() to get the non-html representation. The value is the same as you'd expect.

<form action="/admin/controllers/edit_cat.php" method="post">
    <input type="hidden" name="id_cat" value="It's a &quot;test&quot;">
    <input type="text" name="name_cat" value="Some attribute">
    <input type="submit" value="save">
</form>

You'd have to decode this html on the backend, though. This is probably the best you'd be able to do because XML doesn't allow 'escaping' quotes like "\"this\"". The specification requires quotes to be escaped like "this".