Jquery, how to escape quotes

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

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.

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".

You can HTML encode the values with this function:

function htmlEncode(str) {
    var div = document.createElement('div');
    var txt = document.createTextNode(str);
    div.appendChild(txt);
    return div.innerHTML;
}

and then encode any values that can contain quotes:

span_name = htmlEncode(tr.find("span.name_cat").html());

A better alternative might be to build the inputs with jQuery and set the values with the val() method and then append to the form:

var $form = $('<form action="/admin/controllers/edit_cat.php" method="post" />');
var $id_cat_input = $('<input type="hidden" name="id_cat" />');
$id_cat_input.val(id_cat);
$id_cat_input.appendTo($form);

I converted user113716's answer into a jQuery plugin and cleaned it up a bit.

(function($) {
  $.fn.escapeQuotes = function() {
    return this.html().replace(/"/g, '"');
  }
})(jQuery);

var spanValue = $('span').escapeQuotes();
var formTemplate = [
  '<form action="/admin/controllers/edit_cat.php" method="post" >',
    '<input type="text" name="name_cat" value="' + spanValue + '" />',
    '<input type="submit" value="save" />',
  '</form>'
].join('');

$(formTemplate).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="name_cat">It&#039;s a &quot;test&quot; </span> (5)

You should convert them to html entities or skip them. A quote as a html entity looks like this: " Do it with your programming language. Not with js.