I am having a problem I want to attach the registered trademark symbol a button and I want it to be done with jquery because there are lots and lots of buttons that require the sign when I used it with html for example(below) it worked.
<input type="button" class="button_a" value="Value ®" />
But when I used jquery as below it returns as plain text:
$('.button_a').each(function(){
$(this).attr("value",$(this).attr("value")+" ®");
});
I don't want to waste my time and space by putting ® in all the button's values so I want it to be done in jquery but what am I doing incorrect.
I know it's a sluggish question but please someone help out me in this question
Javascript may be also used.
For more info please comment and ask
Thanks....
® is being rendered as a text string, but you can use unicode \u00AE
$('.button_a').each(function(){
this.value = this.value +" \u00AE";
});
http://jsfiddle.net/fbuohvm1/
or just ®:
$('.button_a').each(function(){
this.value = this.value +" ®";
});
http://jsfiddle.net/fbuohvm1/1/
Because, while the DOM you are manipulating was initialised from an HTML document, you are now dealing with DOM and not HTML. You are writing the value as text not as HTML.
You need to use either a literal character ("®") or a JavaScript escape sequence ("\u00AE").
You have to encode it first before setting the value of textbox.
$('.button_a').each(function () {
$(this).val("value " + $("<div/>").html('®').text());
});
$("<div/>").html('®').text() will return the encoded value.
Demo: https://jsfiddle.net/tusharj/t2gwptys/
you need to process content by html(), because html entities is manipulate by html() function, try this code.
$('.button_a').each(function(){
$(this).val($("<p/>").html($(this).val()+" ®").html());
});
Use a hidden div.
$('.button_a').each(function(){
var decoded = $('<div/>').html('®').text();
$(this).val($(this).val() + ' ' + decoded);
});
See Sample
In your case plain js is more straightforward:
$('.button_a').each(function(){
this.value += " ®";
});
-- EDIT --
Unfortunately this is still escaped, in fact you need
this.value += " \u00AE";
Related
I'm trying to create a tool that allows me to insert different Spanish characters into a text box such as the inverted question mark. I've currently got the following, but this returns:
function (e){var n,r,i,o=this[0];{if(arguments.length)return i=x.isFunction(e),this.each(function(n){var o;1===this.nodeType&&(o=i?e.call(this,n,x(this).val()):e,null==o?o="":"number"==typeof o?o+="":x.isArray(o)&&(o=x.map(o,function(e){return null==e?"":e+""})),r=x.valHooks[this.type]||x.valHooks[this.nodeName.toLowerCase()],r&&"set"in r&&r.set(this,o,"value")!==t||(this.value=o))});if(o)return r=x.valHooks[o.type]||x.valHooks[o.nodeName.toLowerCase()],r&&"get"in r&&(n=r.get(o,"value"))!==t?n:(n=o.value,"string"==typeof n?n.replace(V,""):null==n?"":n)}}¿
HTML
<div class="container">
<textarea id="text"></textarea>
<div id="one">¿</div>
JS
$('document').ready(function() {
$('#one').click(function() {
$('#text').val($('#text').val + '¿');
});
});
Any ideas on why I'm receiving this output? Also do HTML entities work within textboxes, if not how would I do so? No errors appear in the console.
JSFiddle
$("#text").val is a function, which you are supposed to call.
That said, jQuery is massive overkill for such a trivial task:
document.getElementById('one').onclick = function() {
document.getElementById('text').value += "\u00bf";
}
Note that \u00bf is the appropriate JavaScript escape sequence for ¿ - bf being 191 in hexadecimal.
EDIT: Alternatively, just hold Alt and type 0191 on your keypad. This will produce ¿ directly where you are typing, instead of at the end of the input which is what your JS does.
Try this one. Worked in your fiddle.
$(function() {
$('#one').on('click', function() {
$('#text').val($('#text').val() + "¿");
});
});
Update: I posted spanish sign of question instead of its ASCII, changed $(document).ready to a shorter way $(function(), and added brackets after val().
I have a var that gets the HTML of a div. I want to use that var in a hidden form field so I can save the HTML to a database.
I am just having difficulty converting the HTML or the var to a string. Currently, adding the var to my input as is disrupts the code.
I have tried using .wrap('<pre />'); in a few different ways but it doesnt help and I dont think it is right.
Can anyone point me in the right direction? Thanks!
var code = $('#container').html();
code = code.wrap('<pre />')
document.write('<input type="hidden" name="html" value="' + code + '">');
You're better off using the helper methods over a direct document.write as (because it's HTML) you'll need to escape it (ensure no quotation marks are witin the code). Long story short, maybe use something like:
$('<input>',{
'type':'hidden',
'name':'html'
}) // create element
.val(code) // use helper to insert HTML (auto-excapes)
.appendTo('body'); // insert it where ever you need it
Further explanation: Say, for example, code had the following:
<div class="foo">bar</div>
By using a document write (and not escaping it) you're writing:
<input type="hidden" name="html" value="<div class="foo">bar</div>">
The class="foo" (and its quotes) interfere with the original hidden element's value="" attribute. using .val() avoids this because it makes sure the value is safely inserted in to the element.
Using jQuery, this is probably the best way to do it...
jQuery(document).ready(
function (){
var code = jQuery.trim(jQuery('#container').html());
jQuery("form").append('<input type="hidden" name="html" value="' + code + '">');
});
I'm having a problem trying to escape some code... Basically, I want to escape "<" and ">" but I want them to APPEAR in my #output div as "<" and ">". Currently, they appear as as "<" and ">" on the page.
This is obviously to prevent anyone exploiting / injecting scripts on the page. This is my code:
var textval = $("#textarea").val(); //textarea
filtered = textval.replace(/</gi,"<"); //replace "<"
$("#output").html(filtered); //insert textarea data into div
Can anybody spot what I am doing wrong, or are there any better ways of doing this?
Many thanks
EDIT: I do want SOME html tags (like <b> to work, so I can't use $.text(); unfortunately..)
Try this:
var textval = $("#textarea").val();
$("#output").text(textval);
jQuery offers two methods - $.text() and $.html() where the method names speak for themselves :)
A little different replace, but works for me (even with .html()).
Demo
var str = $('#textarea').val();
$('#result').html(str.replace(/<|>/ig,function(m){
return '&'+(m=='>'?'g':'l')+'t;';
}));
<textarea id="textarea">
Hello, <b>World</b>!
</textarea>
<div id="result"></div>
(This is just to verify it can be done, .text() is the better approach)
I'm adding options to a select box as follows:
x.append("<option value="+option_to_add+">"+option_to_add+"</option>");
where "option_to_add" can be any value a user has entered.
Of course, a problem arises when adding options that have single or double quotes in them.
Is there a way to escape these values correctly before appending them to a select list
e.g. this will be a problem
user types: he"llo
my code will try to append this as : <option value="he"llo"/> which crashes the html/js
I found a native jQuery way to handle this correctly:
.append($("<option></option>").attr("value",option_to_add).text(option_to_add));
You could you the Javascript replace function to escape or remove the quotes...
http://www.w3schools.com/jsref/jsref_replace.asp
You’ll need to escape the " characters, like this: \"
This can be automated as follows:
'foo"bar"baz'.replace(/"/g, '\\"'); // 'foo\"bar\"baz'
You’ll only need to do this for the value attribute of the <option> element, so the full code snippet would be:
x.append('<option value="' + option_to_add.replace(/"/g, '\\"') + '">' + option_to_add + '</option>');
I am looking around on the web but I am not finding anything useful. :(
I am having a problem that I don't understand. I am sure that I am doing something wrong, but I don't know well the syntax of jQuery to understand what is that I am not doing right.
I am using animations with JS and CSS 3, and I am having troubles with empty spaces between the words, and to solve this problems I have to find a way to substitute chars inside a string of text with something else. Like an empty space with a , or as a test that I was trying to do a "n" with a "xxxxx".
What I think that I am doing is:
when the page is loaded
Modify the string of any paragraph with the class .fancy-title that contains "n" with a text "xxxxx"
So:
$(document).ready(function(){
for(i=0; i< myLength+1; i++){
var charCheck = $(".fancy-title").text()[i];
if(charCheck == "n"){
charCheck.replace("n", "xxxxxxxx");
}
}
});
But I receive an error that it said:
charCheck.replace("n", "xxxxxxxx"); it is not a function
I am using jquery
and other scripts that are based on jquery to make animations, rotation and scaling... and they are all in the HEAD with jquery first to load.
What am I doing wrong? Manipulation in jQuery does it need a specific .js extension? I understood that was in the basic capability of jQuery, and looking at other examples all creates me the same kind of error.
I even tried
if(charCheck == "n"){
$(".fancy-title").text()[i] == " "
}
But simply the modification it is not applied on the page. I tried with innerHTML as well :(
I feel so incompetent...
Thank you in advance for any help.
$(document).ready(function(){
$(".fancy-title").each(function(i){
var text = $(this).html();
$(this).html(text.replace(/ /g, " "));
})
});
You have no problem with the replace part :).
$(document).ready(function(){
$(".fancy-title").each(function () { //for all the elements with class 'fancy-title'
var s=$(this).text(); //get text
$(this).text(s.replace(/n/g, 'xxxxxxxx')); //set text to the replaced version
});
});
Just a quick example, hope it works.
Have you tried the css style white-space:pre instead of replacing ' ' with ' '?
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space
It seems you are trying to replace a single character with a new string.
You might be able to get the right result by dropping the iteration and simply call .replace on the jQuery-object.