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

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, '<')
}

Related

How to put a degree symbol in an html input field through javascript

I have a text box as
HTML
<input type="text" id="lat" placeholder="Latitude" ng-lat value="9°">
which works fine as it displays the degree sign perfectly, but when I try to set the value through jquery like
Jquery
$("#lat").val("9°")
Its displaying the entire text instead of the degree symbol.
You can target the value attribute:
$("#lat").attr('value',"101"+String.fromCharCode(176))
it is also better to use .text() to set the text because .val() is used to retrieve the value of an element
You can use HEXCode,
e.g
<a href id="my">Here</a>
<script>
$('#my').click(function()
{
alert('9\xB0');
});
</script>
Also go through this link
$("#test").click(function(){
$("#lat").val("29" + ascii(176))
});
function ascii (a) { return String.fromCharCode(a); }
Updated JSFiddle for further help: http://jsfiddle.net/zkh2of12/1/
Use the special tag besides the input field, it will be clear for the user:
<input type="text" id="lat" placeholder="Latitude °" value=""> °
What about just setting the symbol directly in JavaScript instead of the HTML code?
$(function(){
$("#set").click(function(){
$("#lat").val("°");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="lat" placeholder="Latitude" ng-lat value="9°">
<button id="set">set</button>
If you want to improve those just make a hidden <span> with the html code you like inside and then just pick the html with JavaScript. This will work even for symbols you cannot post in JS
Try this:
$("#lat").attr("val","9"+ascii(176));

How to get attr value in jquery

I am trying to get value of attr " _last_val " from my input but unable to produce it.
Below is ? i have tried demo
//below is HTML
<form method="post" action="" id="feedback_form">
<input type="text" value="2014-08-11" class="date" name="add_by_datetime" _last_val="2014-08-14" >
<input type="button" name="submit_now" value="Submit" />
</form>
// below is script
jQuery(function($) {
$("form#feedback_form input[name='submit_now']").on("click",function() {
var actualadddate = $("form#feedback_form input[name='add_by_datetime']").attr('_last_val');
alert(+actualadddate+'aaaaaaaaa');
});
});
please let me know where i am wrong.
Thanks
Remove the preceded + from alert and try,
alert(actualadddate + 'aaaaaaaaa');
Live working demo
Note that, in your example you are using .date class to access the attribute if your page has more than 1 element having same class then it will not give you the accurate date. So, be carefull in that case or use unique id to get the attribute.
Remove + operator from beginning. Use:
alert(actualadddate+"aaaaaaaaa");
Demo
because of the + before actualadddate its converted to a number, that results in NaN (Not a Number)
so, remove it
alert(actualadddate+'aaaaaaaaa');
http://jsfiddle.net/59o60g7e/10/
Since, actualadddate is not a number, it thows NaN i.e. not a number. Remove + from the alert which you used to typecast.
Use this instead,
alert(actualadddate+"aaaaaaaaa");
Also, instead of using user defined attributes. Use data attribute to store your custom values.
The only thing wrong in your code is the alert call. http://jsfiddle.net/rcnw1op0/

Javascript select element with complicated ID

need some help! am trying to get the value of the below input id "j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" and have tried jquery and javascript such as: document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63") but keep getting a null result. ID can't be changed either, any help appreciated
<td class="sf42_cell_bottom_light"><span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61"><input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417"></span></td>
Use this:
$("[id='j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61']")
By the way, since you are apperently using JSF, this is a good practice to set id to each component to avoid such horrible ids (who can changes if you add/remove components).
See more information in this thread:
Handling colon in element ID with jQuery
Do you have any control of the element? Can you add a class to it?
var val= document.getElementsByClassName("TheClassName");
Or you can get the TD with class sf42_cell_bottom_light (if it is unique) then get its INPUT elements by:
var theTd= document.getElementsByClassName("sf42_cell_bottom_light");
var val = theTD.getElementsByTagName("INPUT");
I need to see more of the HTML to give you an better answer.
You may need to escape colon in your id .So
try this
function RemoveInvalidCharacter(myid) {
return '#' + myid.replace(/(:|\.|\[|\])/g, "\\$1");
}
And call like this
$(RemoveInvalidCharacter('j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61'));
Have a look at How do I select an element by an ID that has characters used in CSS notation
I have tested this code:
<td class="sf42_cell_bottom_light">
<span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61">
<input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417">
</span>
</td>
<script type="text/javascript">
document.write(document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63").value);
</script>
in FF, IE, Chrome (the latest versions)... and seems to work ok... ar you sure it is about this id?
Replace:
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63")
with
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63")
The id is different.
http://jsfiddle.net/wNePW/

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.

How can I find a space character in an <input> using CSS3 selectors?

My way: code
<form>
<input type="text" value="">
<input type="submit" value="submit"> type a space and press Submit
</form>
$('form').submit(function(){
if($('input').val() == ' ') {
alert($('input').val().length);
}
return false;
});
But I'd like to solve this problem using CSS3 selectors like $('input[value*=" "]')
If you are asking to use CSS3 selector through jquery then $(':input[value*=" "]') should do it.
example: http://www.jsfiddle.net/gaby/cruRd/
If you want to create an actual CSS3 rule in your stylesheet then input[value*=' ']{..} will work, but only for values in the actual attribute (in the source code) and not the value as modified inside the browser..
example: http://www.jsfiddle.net/gaby/VzE9T/
As far as I know, you cannot manipulate data with CSS; it's a formatting language. You don't have variables or functions which help you find something in a string. Use JS instead.

Categories

Resources