I have a drop down on a web page which is breaking when the value string contains a quote.
The value is "asd, but in the DOM it always appears as an empty string.
I have tried every way I know to escape the string properly, but to no avail.
<option value=""asd">test</option>
<option value="\"asd">test</option>
<option value=""asd">test</option>
<option value=""asd">test</option>
How do I render this on the page so the postback message contains the correct value?
" is the correct way, the third of your tests:
<option value=""asd">test</option>
You can see this working below, or on jsFiddle.
alert($("option")[0].value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=""asd">Test</option>
</select>
Alternatively, you can delimit the attribute value with single quotes:
<option value='"asd'>test</option>
If you are using PHP, try calling htmlentities or htmlspecialchars function.
Per HTML syntax, and even HTML5, the following are all valid options:
<option value=""asd">test</option>
<option value=""asd">test</option>
<option value='"asd'>test</option>
<option value='"asd'>test</option>
<option value='"asd'>test</option>
<option value="asd>test</option>
<option value="asd>test</option>
Note that if you are using XML syntax the quotes (single or double) are required.
Here's a jsfiddle showing all of the above working.
Another option is replacing double quotes with single quotes if you don't mind whatever it is. But I don't mention this one:
<option value='"asd'>test</option>
I mention this one:
<option value="'asd">test</option>
In my case I used this solution.
If you are using JavaScript and Lodash, then you can use _.escape(), which escapes ", ', <, >, and &.
You really should only allow untrusted data into a whitelist of good attributes like: align, alink, alt, bgcolor, border, cellpadding, cellspacing, class, color, cols, colspan, coords, dir, face, height, hspace, ismap, lang, marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, rows, rowspan, scrolling, shape, span, summary, tabindex, title, usemap, valign, value, vlink, vspace, width
You really want to keep untrusted data out of javascript handlers as well as id or name attributes (they can clobber other elements in the DOM).
Also, if you are putting untrusted data into a SRC or HREF attribute, then its really a untrusted URL so you should validate the URL, make sure its NOT a javascript: URL, and then HTML entity encode.
More details on all of there here: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet
Related
Getting data from server as below
Test Your Code
New Testing Code
Opel Audi
Above data have sapace between the words. i want to show text as it
is.
I have html select dropdown where i am rendering the server data.
but i am not able to diplay data as it is coming form server, it is
showing one space in between the word. can anyone tell me how to fix
this?
<html>
<body>
<select>
<option value="volvo">Test Your Code</option>
<option value="saab">New Testing Code </option>
<option value="opel">Opel Audi</option>
</select>
</body>
</html>
check plunkr
HTML will remove any spaces following 1 space. Just replace the spaces with (non-breaking space point)
str = str.replace(/\s/gmi, ' ');
edit: forgot semicolon
you can use string replace method
str = str.replace("", ' ');
Try whitespace characters instead of spaces. In your case you need to modify text coming from server accordingly.
I'm trying to insert the select options tag into my conversation, to make it more simple to the user. I did this:
And in the index.js:
function selected(){
switch($('#selected option:selected').val()){
case 01:
alert("01");
break;
case 02:
alert("02");
break;
}
};
But it doesn't recognize the option selected. I tried without the function selected() (only with switch case), but it didn't worked.. Can somebody help me please? Thanks a lot!
I believe your HTML inside the Advanced context have something you miss.
In your HTML in onselect your typed :, but, for use onselect and call one function you have to use onselect="nameFnction()"
See one simple example inside MDN to use this tag:
<input type="text" onselect="myFunction()" value="Hello world!">
Now, see other example for works fine according the choice:
<select>
<option onclick="doSomethingA(this);">A</option>
<option onclick="doSomethingB(this);">B</option>
<option onclick="doSomethingC(this);">C</option>
</select>
And with jQuery (Your id is select and not selected):
$('#select option:selected').val()
I am having a list of stuff that the user can select. The way it's currently made, we have an integer as name, a price as value but i need to add a color. It's not unique so i cannot use ID.
example :
<option name='6' value="30.95">6 Orange(30.95$/month)</option>
<option name='6' value="33.95">6 Green(33.95$/month)</option>
<option name='10' value="32.95">10 Orange(32.95$/month)</option>
<option name='10' value="35.95">10 Green(35.95$/month)</option>
I need to combine two non-unique values and them to be accessible by jQuery / Javascript
I would like not to make two selects. I know it's straightforward the easiest solution but if i could stick to a single one that would give better results.
Is it safe to create a custom tag like "prodcolor" with any non-reserved nametag or is there a smarter way to achieve this?
Many thanks once again.
You can use HTML5 data- attributes, which is invented for this very purpose. More importantly, the values of the data- attributes can be accessed using JS.
Since you want to include colour, you can use the data-colour attribute, for example:
<option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option>
Even better: Actually, you shouldn't even use the name attribute to store your quantity. Why not use data-quantity instead? :)
<option data-quantity="6" value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option data-quantity="6" value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option data-quantity="10" value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option data-quantity="10" value="35.95" data-colour="green">10 Green(35.95$/month)</option>
Some background:
There's a nice guide published by Mozilla on how to use JS to access such attributes. Note that it is recommended to use dash (-) separated attributes, instead of any other naming convention, e.g. data-product-name instead of data-productName. This is because the .dataset method in JS converts dash-separated data attributes into camelCase. So data-product-name will be accessible via .dataset.productName, for example.
jQuery also allows you to access the values of data- attributes via the .attr() or .data() methods. The only difference is that:
.attr() is not cached, so you can use it to access dynamically-modified data- attributes, while .data only reads data attributes at runtime.
.attr() can be used to read and write data attributes, but .data() can only be used to read data attributes from the DOM. .data() is also used to access the jQuery data object that is not written to the DOM.
Usage example:
Using your code above, we can create a simple example of alerting the colour of the product upon the firing of the change event:
$(function() {
$('select').change(function() {
var $choice = $(this).find('option:selected')
alert('Colour: ' + $choice.attr('data-colour') + '\n' + 'Price: $' + $choice.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option>
<option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option>
<option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option>
<option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option>
</select>
I used $.get and received data like
'<option value=\"US-ID\" >Idaho<\/option>\n <option value=\"US-IL\" >Illinois<\/option>\n <option value=\"US-IN\" >Indiana<\/option>\n <option value=\"US-KS\" >Kansas<\/option>\n'
I want to use $(...).html(html_data) how do I make the data I get into html data that I can use?
what I'm getting when $(...).html(data)
http://jsfiddle.net/9WeUv/
Don't know if this matters, but console.log(data):
'...data...'
whereas console.log('regular_string'):
regular_string // no quotes
What's wrong with:
var html_data = '<option value=\"US-ID\" >Idaho<\/option>\n <option value=\"US-IL\" >Illinois<\/option>\n <option value=\"US-IN\" >Indiana<\/option>\n <option value=\"US-KS\" >Kansas<\/option>\n';
$('#select_element_id').html(html_data);
http://jsfiddle.net/45CYX/
After your edit:
Sorry, isn't the string you've received the one you wrote on top? In your jsFiddle you do not have any JS code, just some text in a select tag - which is not what you are saying in the question.
Assuming you grabbed the html from an ajax call and want to add it to the body.
$newSelect = $("<select></select>").html(html_data);
$(document.body).append($newSelect);
http://api.jquery.com/jQuery/#jQuery2 - Creates DOM elements on the fly from the provided string of raw HTML.
I have the following HTML:
<!--
<option value="HVAC">HVAC</option>
<option value="Cooling">|---Cooling</option>
<option value="Heating">|---Heating</option>
-->
....
I fetch this file dynamically using jQuery's get method and store it in a string variable named load_types.
How can I strip the HTML comment tags and everything outside of them? I only want the inside HTML:
<option value="HVAC">HVAC</option>
<option value="Cooling">|---Cooling</option>
<option value="Heating">|---Heating</option>
I tried to use the solutions here but nothing worked properly--I just get null as a match.
Thanks for the help!
Please never use regex to parse HTML. You can use the following instead:
var div = $("<div>").html(load_types),
comment = div.contents().filter(function() {
return this.nodeType === 8;
}).get(0);
console.log(comment.nodeValue);
DEMO: http://jsfiddle.net/HHtW7/
You can simply get the html of the parent tag where the comment is and do a .replace("<!--","").replace("-->", "") which will simply remove the comment tags and then append this markup to some other parent or replace your current markup or create a new parent for it and append it.
This will allow you to use the jQuery selectors to retrieve the required data.
var comment = '<!-- <option value="HVAC">HVAC</option> <option value="Cooling">|---Cooling</option> <option value="Heating">|---Heating</option> --> ';
jQuery("#juni").append("<select>"+comment.replace("<!--", "").replace("-->", "") + "</select>")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="juni"></div>