I want to change the message in a <span> using JavaScript/jQuery.
<span id="access-code-error" class="rsvp required-fields"> </span>
I am using the following code to replace the text which will be added to this <span>:
$("span:contains('I need <br>this text to be replaced')").text( "hello<br> How r u" );
But this isn't working. What do I need to do differently?
You can use the jQuery text() method like below:
$("#access-code-error").text("Your message");
Working fiddle:
https://jsfiddle.net/6wcpLpbw/
Using a html tag inside a :contains will not work properly.
.text() should be used only with plain text not with html tags inside it.
You should use .html() instead of .text().
Try something like this:
$("span:contains('I need this text to be replaced')").html("hello<br> How r u");
Note: ID should be used only once in a page.
To change the error message of your access-code-error span, you can do the following:
JavaScript:
var errormsg = document.getElementById("access-code-error");
errormsg.innerHTML = "hello<br> How r u";
jQuery:
1) You can use the html() method as shown:
$("#access-code-error").html("hello<br/> How r u");
2) You can also use the text() method in a similar way:
$("#access-code-error").text("hello<\br/> How r u");
This first html('') will remove current text from the span and the other one will add the text you want.
:)
$('#access-code-error').html('').html('hello<br> How r u');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="access-code-error" class="rsvp required-fields">This need to be Replaced </span>
Since you have provided the id of the span, you can use that as shown:
$("#access-code-error").text("Your message");
Related
I want to update the content of a span like so:
$('#myElement').text('£' + parseFloat(myPrice));
But the HTML does not render the £ correctly when updated. There are other instances where I want to use a different symbol as well.
Is there a way around this?
You need to use the html() method as text() encodes the value. Try this:
$('#myElement').html('£' + parseFloat(myPrice));
$(function(){
var myPrice = "403";
$('#price').html('£' + parseFloat(myPrice));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p id="price"></p>
In my program, I have written a script and form like this:
jQuery :
var message1 = $('#message').val();
Form :
<label>Message</label>
<textarea rows="4" name="message" id="message" class="required"></textarea>
I am getting the var message1 result is [object HTMLTextAreaElement]
Whats wrong in my code?
You are getting the textarea element itself. To get its value, add .value
You might try to use
var message1 = $('#message').html();
I'm pretty sure the .val() function gets the value attribute and the textarea doesn't use this attribute.
It may that you haven't used any jQuery library to use jQuery syntax? although this syntax
var message1 = $('#message').val();
is correct, I have checked this.
In jQuery when the content is enclosed within the tags like div, span or textarea then you have to find the value of content using .html() or .text()
Difference between these two is that .html() returns the full html content of that element whereas .text() returns the exact text value of the content excluding the html tags.
I have elements like this all over the page:
<span class="am-product-terms">$49.95 for each 3 months</span>
<span class="am-product-terms">$149.95 for each year</span>
I wanted to remove the the for... part all up to the end. So I did this:
$('.am-product-terms').replace(/for[\s\S]+/, '')
That threw an error so I tried this:
$('.am-product-terms').text().replace(/for[\s\S]+/, '')
This didn't work either.
.replace() returns modified string it doesn't update existing text. You need to use returned string and reset it to inputs text.
You can use .text(function)
$('.am-product-terms').text(function(_, text){
return text.replace(/for[\s\S]+/, '');
});
I have some code for Javascript using jQuery, and I've been wondering how to fix an element of it.
var dataGiven = +$("span.cost-in-usd:first-child").text();
However, the span tag is:
<span class="cost-in-usd" data-se="product-usd-value">42</span>
Is there a way of modifying my code in order for it to recognise data-se?
Yes, use data.
var datase = $('.cost-in-usd').data('se');
Some links;
http://api.jquery.com/jquery.data/
Here's a jsfiddle
The following will return the value of attribute
$('.cost-in-usd').attr('data-se');
JavaScript converts my < into >. I want to alert it but my message is with encoded marks like ##&*()}{>?>? - how to display it normally but prevent from executing as HTML code?
<span id="ID" onClick="alertIt(this.id);">
<p>Some string with special chars: ~!##&*()}{>?>?>|{">##$#^#$</p>
<p>Why when clicked it gives something like this:</p>
<p>'<br>
Some string with special chars: ~!##&*()}{>?>?>|... and so on
<br>'</p>
</span>
<script type="text/javascript">
function alertIt(ID)
{
var ID = ID;
var content = document.getElementById(ID).innerHTML;
alert(content);
}
</script>
Use innerText instead of innerHTML. http://jsfiddle.net/WVf95/
Your problem is that you use the wrong approach to get the text to display with alert().
Some characters are illegal in HTML text (they are used for HTML tags and entities). innerHTML will make sure that text is properly escaped (i.e. you can see tags and escaped text).
If you want to see tag and text in alert(), there is no solution.
If you want only the text, then you will have to extract it yourself. There is no built-in support for that. It's also not really trivial to implement. I suggest to include jQuery in your page; then you can get the text with:
function alertIt(ID) {
alert($(ID).text());
}
Using textContent instaed of innerHTML or innerText is a solution.