This question already has answers here:
Sanitizing user input before adding it to the DOM in Javascript
(7 answers)
Closed 5 years ago.
I am adding a option to a select that is input by a user:
function prependToSelect(userInput){
$('#x').prepend('<option>' + userInput + '</option>');
}
what is the safest and most simple way to make sure there is nothing dangerous in userInput that can break the javascript or html? It would also be good if the solution/function would be reusable in different scenarios.
My inital answer would be to create a options element and set the innerText instead of innerHTML
but since u use jQuery...
$('#x').prepend($('<option>', {text: userInput}))
Don't add it as HTML.
document.querySelector("#x")
.appendChild(document.createElement("option"))
.textContent = userInput;
This adds it as .textContent so no HTML will be parsed, so no danger.
Related
This question already has answers here:
Javascript getElementById based on a partial string
(9 answers)
Closed 3 years ago.
I just want to know to how to use custom varible with javascript.suppose we have 5 id with name zawsz,baws2,tawsx,paws4,vawsa and we want to execute single DOM command to all these element whose id is define here.
document.getElementById("-aws-").onclick=function(){}
Here -aws- define all the id define above.(-) can be replace with any char/int value;
You could use the following code:
(The following code will select all elements of which the id includes aws.
I have tested this code and it works: https://jsfiddle.net/5042woqz/)
document.querySelectorAll('*[id*="aws"]').forEach(function(item) {
item.onclick=function() {
console.log('click!');
};
});
Items will now be an array containing all your aws- items.
If you have further questions, just let me know.
P.S.: You could achieve the same thing really easily with jquery.
You can use document.querySelectorAll for this:
document.querySelectorAll('[id^="aws"]')
That will select all elements where the id attribute starts with (^=) "aws".
This question already has answers here:
jQuery how to find an element based on a data-attribute value?
(9 answers)
Closed 8 years ago.
Similar to the question here , I need to get an element based on its data-id.
The problem I encounter is that I want to retrieve a an a element with a certain data-id using a variable.
lets consider the code below:
var item_id = 12345;
if I want to get the element that has the data-id with the value of item_id, would I do the following ?
$('[data-id=item_id]')
This does not work, and I am kind of stuck on how I can get around this.
You can concatenate the variable using +:
$('[data-id=' + item_id + ']')
This question already has answers here:
How to use JavaScript variables in jQuery selectors?
(6 answers)
Closed 8 years ago.
Its a simple question, could not find an answer from google.
Code
$.click(function(){
var curID = $(this).parent()[0].id;
$("#"+curID input).attr("checked",true);
});
Onclick function is giving me the parent id, Now, using the parent id i want to find the input element and add checked attribute.
I am not sure of the syntax of querying by dynamic ID.
I want to know how can i query by dynamic variable.
Thanks in advance.
$("#"+curID).find('input').attr("checked", true);
Or
$(this).parent().find('input').attr("checked", true);
Or
$('input', $(this).parent()).find('input').attr("checked", true); // using the scope argument
The selectors are strings... So should be handled as strings by concatenating the variables: and texts
$.click(function(){
var curID = $(this).parent()[0].id;
$("#"+curID+" input").attr("checked",true);
});
Your search is probably too specific. Break tasks down into their components instead of looking for a complete solution to a very specific problem. You are just dealing with basic string concatenation here.
You want:
var selector = "#foo input";
You have foo in a variable.
var selector = "#" + foo_variable + " input";
This question already has answers here:
Strip HTML from Text JavaScript
(44 answers)
Closed 8 years ago.
Here is the code I have:
I want to make sure the user doesn't put any html tags in the "Add Responsibilities" field. So for example, if the user writes this:
<div>Test</div>
Then it would put this into the responsibility field:
Test
I think it's something to do with this command but I can't get it working within my code:
$("#resp_input").html( $("#resp_input").text() );
You may use this code:
$('#responsibilities').text($("<div>" + eachline + "</div>").text() );
see this update
This question already has answers here:
Is it possible to do ".value +=" in JQuery?
(5 answers)
Closed 8 years ago.
Since I've moved to jQuery development has sped up for a great deal, but there is one thing which has become a little more time-consuming: appending some string to an attribute/value.
For example, if you wanted to append a letter to the value of a textbox, you would normally do:
input.value += 'a';
but now using jQuery, it has become:
input.val(input.val() + 'a');
I know it wouldn't be too hard to create a function which can do this and then append that function to jQuery.fn, but I was rather wondering whether there is such a function perhaps already available. I haven't found any so far. Or is there perhaps a better technique of appending a string to a value/attribute than what I'm doing at the moment?
If you know that your element has a value attribute, there is no reason not to use
input.value += 'a';
There is nothing to stop you using plain JavaScript in your jQuery scripts.
In fact,
input.val(input.val() + 'a');
has no benefits over using plain 'js', except if your input is a jQuery object and you want to chain methods.
I'd suggest overall
var $input = $('#someInput');
$input[0].value += 'a'; //get the DOM object from your jQuery object