How to get TextArea contents without error in IE? - javascript

I am using jQuery, and I get the contents of a TextArea as follows:
// get the SQL from the text area at the top:
//sql = $("#sql").val();
//sql = $("#sql").text();
sql = $("#sql").attr("value");
<textarea id="sql" rows="9" cols="99"></textarea>
This works fine in all browsers except IE
I have tried several ways, but nothing works in IE
It gives me the message: "Object doesn't support this property or method".
There must be a simple way to do this that works in all browsers, right?

I see you commented out:
sql = $("#sql").val();
That actually is the correct way to get the text in a TextArea. It works in all browsers.
Make sure that you don't have another HTML element with the same id as the textarea. This could be the source of the error.

I don't think textarea has a value attribute. I think using .val() should work though.

Related

onChange is not working IE8

I am dynamically creating a text area, based on the number of each user, comment for each user.
i am using the below code to do the same, it works fine in all the browser except IE8.
$(template1).find('textarea').attr({"id":'selfasgn'+aud.ASGN_ID,"onchange":'captureSelfComments('+aud.ASGN_ID+')'})
note that $(template1) is clone of one of the element in node.
template1 = reviewTemplate.clone(true);
function captureSelfComments(p_asgnid){
alert('caling captureSelfComments');
}
I tried below code, but its getting called when this element gets constructed or appened to the DOM. so i removed it.
$(template1).find('textarea').live('change',captureSelfComments(aud.ASGN_ID))
am I doing anything wrong here ?
For IE, try propertychange() as described here since IE may not always support the change event.
var lowIE = /msie (6|7|8)/gi.test(window.navigator.userAgent);
$(template1).find('textarea').live(lowIE ? 'propertychange' : 'change',captureSelfComments(aud.ASGN_ID));
Generally, it is not a good idea to do user agent sniffing but we are talking about IE... which is basically also not a good idea, generally :)

JavaScript: Selecting a part of a text field's content (it must work with older Explorer versions)

I need some help to write some JS code. I want to select a substring in a standard HTML input text field. I know the Firefox code, it is really easy, it works fine, look at this:
var_control.selectionStart = var_searchtext.length;
var_control.selectionEnd = var_control.value.length;
"var_control" is the text field, I defined the variable in the text field by giving "this" to the JS function. As I said it works fine. But ... !!! ... I need the code for older versions of Microsoft Explorer too :-(
I know how I select the whole content of a text field:
var_control.select();
But how do I select a part of the field's content?
Tommy
you can substring the value to extract to desired value.
var str = var_control.select();
str = str.substring(n); // what ever you need
Hope this will help you
For the best browser support I suggest you to use a JS framework like JQuery. If you use JQuery 1.x, it supports IE from IE6. http://jquery.com/browser-support/

Adding Values to a DOM element after the element has been created

I'm looking over some pretty extensive code for a web page that is generated from XML/XSL and then has Javascript generate the layout on the fly. What I am having troubles with is that it seems IE (v.10 specifically) is showing that elements are Empty Text Nodes if there is no value, and then regular text (no editable field) if there is a value.
This seems to change the behavior of to be just straight un-editable text.
From what I can see, the first step is for the Javascript to generate elements via the DOM
input = document.createElement("input");
input.setAttribute("id", "blah");
input.setAttribute("type", "text");
Then it will append it to the parent.
Then what seems to happen is that a function is executed that runs through the page again and inserts any values that these fields have.
input.value = "Hello World";
Chrome and Firefox will display the input fields properly with their fields populated, but IE10 will only show the value as if it was just plain text.
I've never worked with this sort of web page generation and hoping someone might be able to help me figure this out so I can troubleshoot this. Changing the way this works (at the time) is not an option so I'm trying to correct it so that IE is happy too.
Thanks
This specific code sequence works in all browsers I've tried it in (Chrome, IE, Firefox):
var elem = document.createElement("input");
elem.type = "text";
elem.id = "test";
document.body.appendChild(elem);
elem.value = "This is some text";
If your exact code is deviating from this, then you should examine the differences or post your exact sequence of code that demonstrates the problem in IE so we have a better idea how to debug or advise.
You can see a working demo of this in any browser you want to try it in here: http://jsfiddle.net/jfriend00/z2FpP/
Things to watch out for in your code:
Is any code setting .innerHTML of a parent which could be wiping out or resetting the child elements.
Is any code setting .innerHTML of the input field itself. This should not be done. Code should use .value to set the text of the input field.
Are there any code errors when the code runs in IE? Check the error console or debug console (hit F12 in IE to get to the debugger where you can see the error console).
Are there any other attributes being set in the input field that might make it read-only instead of editable?

jQuery .after() not working in IE

I am trying to add a table row to a table using .after() but it's not working in any IE, I keep getting this error "Object required" and the error seems to be coming from line 5151 in my jQuery library.
Here is my code:
$('#view').live('click',function(){
var parent = $(this).parent();
parent.after("<tr><td>Test</td></tr>");
});
Any ideas?
A likely reason is that the HTML code isn't valid without a table tag.
Create the elements as separate elements instead:
parent.after($('<tr/>').append($('<td/>').text('Test')));
I would definitely validate your HTML first; this kind of thing often fails beacuse IE is less "generous" when things aren't valid.
Do you know what parent is? is it definitely a tr?
Works fine for me in IE, FF and Chrome: demo.

get textarea value using javascript in opera

I am trying to get the value of a textarea, to check if it's empty, using Javascript and it doesn't work in Opera. In IE, FF and Chrome it works fine, but in Opera 11 and 10 it reports the value to be the empty string, even if it has text.
Here's my code:
if (document.getElementById('mytextareaid').value.replace(/(^\s+|\s+$)/, '') == '') {
alert('empty textarea');
}
Using document.getElementById('mytextareaid').innerHTML instead, doesn't work, either. What am I missing?
Replace with this and try
if (document.getElementById('mytextareaid').innerHTML.replace(/(^\s+|\s+$)/, '') == '') {
alert('empty textarea');
}
Thank you all for your help. It turns out that it works with a simple page that only has a textarea, but in my particular HTML document it didn't. I finally found a workaround here:
JQuery val() does not work for textarea in Opera
I don't know what exactly caused the strange behavior, but I do know that the piece of
Quoting myself from
JQuery val() does not work for textarea in Opera :
You may have come across a very obscure bug referred to in a blog post on the Opera sitepatching blog ( http://my.opera.com/sitepatching/blog/facebook-and-some-core-patches ) as "PATCH-287, Hack to make script see typed value in TEXTAREA on blog.ebuddy.com. Opera fails to read correct value from a previously hidden textarea".
I'm a little bit reluctant to recomment workarounds without seeing the full code.
However, when I was looking at this I noticed that setting textarea.contentEditable to something seemed to let me read the value afterwards..it's a weird hack though, and it might cause problems for other browsers.

Categories

Resources