Sanitizing input to stick into a hidden input value with jQuery

Question

Maybe I am confusing this a bit, but I have a piece of code that works like the following:

$("#myButton").on('click', function(){
    var myValue = $('#myInput').val();
    listSize++;

    var listItem = "<li>" + myValue + "<input type='hidden' name='foo" +
        listSize + "' value='" + myValue + "' /></li>";
    $("ol.myList").append(listItem);
});

If the text input value contains for example, a ', then this code breaks in terms of correctly adding the hidden input value.

I was thinking that using encodeURIComponent would do the trick, but it does not.

What's the proper way to handle this?

What if you add the list item first and then set the value using $(elem).val(); ? — Gerrit Luimstra
– Gerrit Luimstra, Commented Dec 28, 2017 at 20:00

charlietfl · Accepted Answer · 2017-12-28 20:33:10Z

1

Instead of doing this with html strings, create an actual element and set it's value property using val().

You can sanitize any possible html out of it by first inserting the string into a content element as text and retrieving it as text.

Note that the value property does not get rendered in the html the same as value attribute does so quotes are not an issue

$("#myButton").on('click', function(){
    // sanitize any html in the existing input
    var myValue = $('<div>', {text:$('#myInput').val())).text();
    listSize++;    
    // create new elements
    var $listItem = $("<li>",{text: myValue});
    // set value of input after creating the element
    var $input = $('<input>',{ type:'hidden', name:'foo'+listSize}).val(myValue);
    //append input to list item
    $listItem.append($input);
    // append in dom
    $("ol.myList").append($listItem);
});

edited Dec 28, 2017 at 20:33

answered Dec 28, 2017 at 20:27

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

space_food_ Over a year ago

I was going to add my own answer for the sake of keeping the initial code close to what already exists and simply adding the .append before setting the val, however this answer is a bit of a different way of approaching it and works, so will mark it as correct

Gerrit Luimstra · Accepted Answer · 2017-12-28 20:04:40Z

0

I think this is what you are looking for:

$("#myButton").on('click', function(){
    var myValue = $('#myInput').val();
    listSize++;


    var listItemHTML = "<li>" + myValue + "<input type='hidden' name='foo'></li>";
    $(listItemHTML).appendTo('ol.myList').find('input[type=hidden]').val(myValue);
});

The appendTo function returns a reference to the just appended element. Calling the val() function on the element will render the inserting of a quote useless since it will be interpreted as an actual value.

answered Dec 28, 2017 at 20:04

Gerrit Luimstra

5526 silver badges24 bronze badges

2 Comments

Gerrit Luimstra Over a year ago

Makes sense. Didn't see that as being in the scope of the question.

Gerrit Luimstra Over a year ago

I misread your question the first go. Indeed the fiddle I sent didn't answer your question.

Ruben Benjamin · Accepted Answer · 2017-12-28 20:16:55Z

0

Safest way would be to write a wrapper

function addslashes (str) {
     return (str + '')
    .replace(/[\\"']/g, '\\$&')
    .replace(/\u0000/g, '\\0')
}

var test= "Mr. Jone's car";

console.log(addslashes(test));
//"Mr. Jone\'s car"

answered Dec 28, 2017 at 20:16

Ruben Benjamin

7979 silver badges10 bronze badges

Collectives™ on Stack Overflow

Sanitizing input to stick into a hidden input value with jQuery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related