Develop Reference

Are angle brackets allowed in html 5 data attribute? If so how to find it with jQuery?

I wondered whether it is allowed to store angle brackets inside a html 5 data attribute. In my example I need to store email addresses inside this attribute. This looks like:
<input class="email" data-email="Name <a#z.com>">
<input class="email" data-email="Name <b#z.com>">
There was no problem in the browser until I tried to find the element with a certain email address with jQuery.
$('.email[data-email="Name <a#z.com>"]')
This didn't work. So I asked myself whether it is allowed and if so how to select it with jQuery. If not - is there another way how to solve this problem?

You need to do
$('.email[data-email*="a#z.com"]')
Here * is a wildcard saying that select element whose atttibute contains a#z.com

I don't know what is wrong with jQuery, but pure JS seems to be working:
document.querySelector('.email[data-email="Name <a#z.com>"]');

If you are not matching the full value of the field, you can't use the = operator; *= is substring comparison:
$('.email[data-email*="<a#z.com>"]').val("This one is a#z.com");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="email" data-email="Name <a#z.com>">
<input class="email" data-email="Name <b#z.com>">

JQuery: Append/After difficulties

I have a simple input line and want to append whatever has been entered each time somebody pushes the OK button. Sounds simple so far, still I am unable to get it working
HTML:
<p>
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<p id="status">Ok</p>
<br>
JQuery:
$(document).ready(function(){
$('#status').on('click', function(){
var input = $('input[name=todo]').val();
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').after('#status');
});
});
I also tried my luck with append or appendTo, but both times unsuccessfully.
Just in case here is the JSFiddle: http://jsfiddle.net/NRWzE/

.after() works, but you need to set it up correctly, according to documentation it should be:
.after( content [, content ] )
So the right way is:
$("#status").after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');

Try use jquery insertAfter:
$(document).ready(function () {
$('#status').on('click', function () {
var input = $('input[name=todo]').val();
$('<br><b id="taskz">' + input + '</b> - <b id="statusz">Ok</b>').insertAfter('#status');
});
});

It looks like you meant to use:
$('#status').after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
(see after docs)
or, alternatively insertAfter:
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').insertAfter('#status');

Try this:
$('#status').click(function(){
var input = $('input[name=todo]').val();
$('#status').append('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
});

There are a few things going on, but the big thing is that you need to research more how after, append and appendTo work. Here's the basic syntax difference in the methods that share a name but one has To on the end:
Newcontent.appendTo(existingElement) returns newElements.
existingElement.append(newContent) returns existingElement.
Additionally, after puts the new element as a sibling of the reference element, whereas append puts the new element as a child. This is an important difference.
So, try this script then:
var taskid = 1;
$('#valueform').on('submit', function(){
var input = $('#todo').val();
$('<br><span id="task' + taskid.toString() + '">' + input
+ '</span> - <span id="status' + taskid.toString()
+ '">Ok</span>').appendTo('#status');
taskid += 1;
$('#todo').focus().select();
return false;
});
$('#todo').focus().select();
See a Live Demo at JSFiddle
Here's the supporting HTML:
<form id="valueform">
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<input type="submit" value="OK" id="okbutton">
</form>
<p id="status"></p>
There are some other concerns:
I recommend you study which HTML elements are allowed within which HTML elements.
Instead of putting a <b> tag on each item, use CSS. Additionally, if there is semantic importance for the bolding, then use <strong> instead. <b> also should probably not take an id because it is a presentation tag, not a content tag. When thinking of presentation vs. semantics, one must consider screen readers or browsers that cannot render bold text--in that case, <strong> will allow them to emphasize the text in another way if needed.
Get familiar with the jQuery documentation. Careful reading of what exactly each function does, the object it works on, the parameters expected, and the values returned will enable you to get past barriers in the future without having to ask here.
It looked to me like you wanted to put the new content inside of the #status paragraph, not after it. So I wrote my script that way. If you put it after the way you wrote it, then the most recent status will be on top--but then you have non block-level content (starting with your <br>) outside of any block-level element. So you should be appending <p> elements, or you should put your content inside the existing <p>.
Note: I added a form and made the button type submit instead of button to get easy Enter-key handling. It doesn't have to be this way.

ASP: Get the value from javascript using getElementbyId

I am trying to get value from javascript using getElementbyId but i am not getting it.
If i put,
<input type="text" id="disprice<% =pID %>" value="<%=disprice%>" name="Price" />
like this then i am getting value from java script in my text box.
But if i try to get that same thing like this,
<span class="productListPrice" id="disprice<% =pID %>">
then i am not getting the value..
Please help me if possible.
Mitesh

Your texbox needs an id.
More details http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementbyid

#mitesh: Here's some sample code that should help --
JavaScript:
var price = document.getElementById('Price');
ASP:
Dim iPrice
iPrice = Request.Form("Price")
HTML:
<input type="text" id="Price" name="Price" value="<%=iPrice %>">

Only input values are transmitted back to the server on a postback and the name is used (not the id). The id is primarily for doing things in JavaScript client-side.
Also, in both cases, getElementById will return the element with the given id. However, the element itself is different (a span as no inherent value). This step may require some more troubleshooting to determine "what" isn't working.

Get escaped html from td and put it into input as value

I have html
<table>
<tr><td id="cell"><a href="">Google.com</a></td></tr>
</table>
<div id="to"></div>
And I have javascript
$(document).ready(function() {
var html = '<input type="text" value="'+$("#cell").html()+'" />'
$("#to").append(html);
});
I don't know why, but when executing this code I'm getting only <a href= in input. In firebug's inspector input html appears as <input type="text" a>="" >google.com<="" value="<a href=" > As you can see, $quot; are replaced with " - this is the problem.
I've tried using .text() instead of .html() - almost the same situation.
What is my mistake?
Thank you.

You need to encode the value (set via .val() in this case), not use it directly in a string, like this:
$(document).ready(function() {
var html = $('<input type="text" />').val($("#cell").html());
$("#to").append(html);
});
You can see it in a demo here. The problem is the &quote; gets decoded to " which is making your HTML look like this:
<input type="text" value="<a href="">Google.com</a>" />
You can see how that makes the browser a little crazy :)

Try this:
$(document).ready(function() {
$('<input type="text">').val($("#cell").html()).appendTo("#to");
});
Avoid building HTML from strings and variables, use the functions jQuery and the DOM give to you to assign values to attributes or change an element's text. It's safer this way, and IMHO it's more readable as well.

Try to write customize function to unescape the string
function unescape(html) {
return html.
replace(/&/gmi, '&').
replace(/"/gmi, '"').
replace(/>/gmi, '>').
replace(/</gmi, '<')
}

Prototype - Element with styleclass in element with an id?

First of all: I'm new to Prototype JS Framework!
Until now I worked with jQuery.
In jQuery I am able to get an element by coding:
$('#myitemid .myitemclass').val()
html:
<div id="myitemid">
<input type="text" class="notmyclass" />
<input type="text" class="myitemclass" />
<input type="text" class="notmyclass" />
</div>
But how to do this in prototype?
I tried to code:
$('myitemid .myitemclass').value
but this won't work.
Can U help me plz?

Use $$ which returns all elements in the document that match the provided CSS selectors.
var elemValue = $$('#myitemid input.myitemclass')[0].getValue();
Also input.myitemclass is better than .myitemclass because it restricts search to input elements with class name .myitemclass.

If you want to get the named element myitemid, simply use $('myitemid'). This is equivalent to $('#myitemid') or document.getElementById('myitemid'). Your case is more complex, since you want to select a child of a named element. In that case you want to first find the named element, then use a selector on it's children.
$('myitemid').select('input.myitemclass')
Then, to access it's value (since it's a form element), you can add .getValue().
$('myitemid').select('input.myitemclass').getValue()

Should be faster
$("myitemid").down("input[class~=myitemclass]").value