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.
Related
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");
I have multiple <textarea>, sometime they are blank and sometime they are filled with text.
I want to insert a simple text code such as "<check>" which will automatically change to a check (\u2713).
Presently, my code is like this:
<textarea name="1-S" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-NI" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
<textarea name="1-C" onchange="check(this.value)">
<check> //an input written by a user
</textarea>
(This block of <textarea> gets repeated, but of course, with different name in each one.)
<script type="text/javascript">
function check(str){
var res = str.replace("<check>", "\u2713");
????
}
</script>
The output will then replace <check> into actual check symbol (\u2713)
The challenge is, I don't want to have to add ID to every <textarea> and then write a script for each one. So is there a way for me to use this one script to apply to all <textarea>???
Many thanks in advance!
You could use the getElementsByTagName method to create an array of your text area tags.
Since you're using jQuery:
$("textarea").each(function(index, textarea) {
// do replacement here
});
Note that you need to use HTML entities to put <check> into a textarea: <check>
Also, you can put a checkmark in without any Javascript like this: ✓
Yes. You can bind an event handler to all elements of a type using jquery.
$('textarea').on('change', function() {
var text = $(this).val();
if (text.match(/\<check\>/)) {
$(this).val(text.replace(/\<check\>/, "\u2713"));
}
});
The benefit of doing it this way is that you can remove your inline 'onchange' handlers from the html and consolidate your validation logic strictly to JavaScript.
To replace the actual textarea content you need to update the value of the textarea with the result of your String-replace regexp. var text = $(this).val() is just assigning the content of the textarea to the variable text, it's not a reference to the innerHTML portion of your textarea.
On a sidenote if you'd like to allow users to use shortcodes in a form, prefer square bracket syntax, e.g., [check].
I've got webpage with this structure:
<div id="report_content">
Some information
<textarea name="personal"></textarea>
<b>Other information</b>
<textarea name="work"></textarea>
</div>
After writing some text in the textareas, I use jquery to get the entire html. The result is that the textareas are empty, as if I hadn't written anything inside.
I'm guessing it's because they do not accept html, but I need to get the html including textarea's content.
The only solution I've found so far is to convert textareas to divs and then assign them the textarea content.
Is there any other way to avoid this conversion?
The problem is that .html() will not get the value (which is what the content people type into the textearea will go into). You can set the innerHTML to what the value is before getting the full html, like this...
JSFiddle
$('textarea').each(function () {
$(this).html($(this).val());
});
var html = $("#report_content").html();
console.log(html);
or... with less jquery wrapping...
var html = $("#report_content").find("textarea").each(function () {
this.innerHTML = this.value;
}).end().html();
console.log(html);
I am currently using a bunch of input textfields and I want to change it to a DIV, but most of my JS functions use document.getElementById("inputField1").value whenever the value of the input field is set like this:
<input contenteditable="false" id="inputField1" type="text" size="12" style="background:#09F;color:#FFF;text-align:center" value="Hello World!"/>
That would return just Hello World! if I were to display the value in an alert
How would I get the value of the text in between if I were to use DIVs?
For example <div id="inField001">Hello World</div>
Thanks!
In that case you can use:
document.getElementById('inField001').innerHTML
Or:
document.getElementById('inField001').innerText
Or:
document.getElementById('inField001').textContent
Also (if you want to use jQuery):
$('#inField001').text()
You would just do
var value = document.getElementById('inField001').innerHTML);
But if your DIV has some html this will grab that too.
.innerHTML
You can also use document.getElementById('inField001').textContent) to grab just the text nodes from the element ignoring any element wrappers.
But support for textContent is not as good as innerHTML.
See doc for info and support.
Another way is using innerText. alert(document.getElementById('inField001').innerText); but not supported in FF.
See Doc for support.
Fiddle
Use the innerHTML property.
document.getElementById("inField001").innerHTML
BTW this kind of thing is way better to do with jQuery.
For just text content:
var value = document.getElementById('inputField1').textContent;
For the more verbose version, see here.
or just do
x = document.getElementById("inField001");
alert(x);
I have a textarea within an iframe. I want to select the textarea text with an onclick event in JavaScript.
Example:
I have an iframe.
The inner content of the iframe is this:
<textarea id="textarea" disabled onclick="selectthis()">
"content of textarea"
</textarea>
I want to select the text so the user can copy it:
I put this at the head of my page:
function selectthis() {
document.getElementById('textarea').select();
}
But when I click on the textarea, it's not selected.
You typed getElementById wrong.
Change getelementById to getElementById. JavaScript is case-sensitive.
http://jsfiddle.net/DerekL/ArGhg/
Plus,
<textarea id="textarea" onclick="selectthis"> <!--Nope-->
<textarea id="textarea" onclick="selectthis();"> <!--Yup!-->
UPDATE
I see what you did there. You can not select text within a disabled <textarea>.
See http://jsfiddle.net/DerekL/ArGhg/2/
According to Francisc's comment, using readonly will solve the problem.
See http://jsfiddle.net/DerekL/ArGhg/3/
You need this:
document.getElementById('textarea').select();
Functions are case-sensitive in Javascript, so make sure you capitalize everything properly (I capitalized the e of getElementById.
The function selectthis probably generates an ecception since it can't find any element with textarea as id. The problem is that you use document.getElementById (I fixed the typo), but the textarea doesn't belong to document.
You have to access to the iframe own document object, usually with something like this:
var iframe = document.getElementsByTagName("iframe")[0];
var ifrDoc = iframe.contentDocument;
var textarea = ifrDoc.getElementById("textarea");
textarea.select();
Note: in IE8 you have to specify a doctype, while in earlier versions you can use iframe.contentWindow.document instead.