javascript attr type IE9 - javascript

For some reason IE9 returns "text" when writing the following code
Any ideas why. Other browsers return email
HTML
<input type="email">
javascript
alert($(input).attr('type'))

That is because IE9 does not support email, thus it ignores the values and resets it to the default value it supports... text.

For some reason IE9 returns "text" when writing the following code Any
ideas why. Other browsers return email
HTML
In a browser that is conformant with W3C standards (where element is a reference to the input element), then:
// Get the value of the HTML type attribute
element.getAttribute('type') // email
// Get the value of the DOM type property
element.type // email or text, depending on whether
// type email is supported or not
getAttribute returns the literal value of the associated attribute. The DOM property returns the actual value that the DOM property is set to (they may be, and often are, different values). IE 9 conforms to the standard—it doesn't support email so the DOM property returns "text", while getAttribute returns "email".
javascript
alert($(input).attr('type')) // email in jQuery version 1.6 and higher
alert($(input).prop('type')) // text in jQuery version 1.6 and higher
According to jQuery documentation, the attr method returns the attribute value, and it does in version 1.6 and higher. To get the DOM property, use prop. Prior to that, jQuery authors tried to second guess what developers actually wanted and attr returned either the attribute or DOM property value based on some unexplained logic.

Related

Standard-compilant, compatible way to get element name

In javascript, I would like to get the name attribute of an element.
The Mozilla Developper Network says we can use e.name or e.elementName (the latter gives undefined in Chrome for me)
This StackOverflow answer says to use e.attributes["name"].value
I guess if I tried, I'd find a few more ways.
Which way is standard-compilant ?
Which way is most compatible ?
Where can I get a list of how to access each attribute (for example, id can be accessed directly by e.id, and I'm pretty sure it's a standard-compliant way to access it) ?
To some degree it depends on the element type. The name attribute isn't supported in all element types, so it would depend on if you're using it in a valid way.
To get the value in the broadest way, use .getAttribute().
element.getAttribute("name");
If you're using name on elements that support that attribute, then I'd just use the .name property.
element.name;

Different behavior for object and in explorer 9 and all other browsers and versions in Javascript

I'm trying to user a DOM element that i am saving into a JS var:
lastCheckBoxChecked = this;
"this" represents a input/checkbox DOM element.
Now, trying to get if the checkbox is checked from the element with:
if(lastCheckBoxChecked.getAttribute('checked') == true)
doesn't work.
When I checked what does lastCheckBoxChecked holds, I found out that in IE9 it holds Object and when writing
alert(lastCheckBoxChecked.getAttribute('checked'))
I am getting the correct value but in firefox and chrome it holds
object HTMLInputElement and there is no functionality (getting undefined).
I don't know if this is the reason I am not getting anything, but this is my direction.
Does any one know any thing about this?
Please, just use this:
if(lastCheckBoxChecked.checked)
...
Not:
if(lastCheckBoxChecked.getAttribute('checked') == true)
getAttribute checks for the initial state of the checkbox, or if it was changed with getAttribute only. User operations have no effect on it.
An attribute represents the value it had initially, and which does not change by user interactions. To get the current value, use its property:
lastCheckBoxChecked.checked

How to select spans that have a specific attribute in javascript

I'm trying to manipulate spans that have the "email" attribute, this is my code:
var spans = document.getElementsByTagName("span"),
index, node, emailAttr;
for (index = 0; index < spans.length; ++index) {
node = spans.item(index);
emailAttr = node.getAttribute("email");
if (emailAttr) {
// Do something with `node` and `emailAttr`
}
}
Everything goes well until the last if statement, it can find the spans but no result for spans that have the email attribute. What is wrong here?
This is part of the html code i'm trying to scan:
<span class="yP" email="nobody#mozilla.org">Mozilla Add-ons</span>
Note: i don't want to use jQuery.
There is no "email attribute". In HTML5, input elements can have an email type. However, HTML5 is not a standard, is not fully supported by any browser and most older browsers only support that part of it that is compatible with HTML 4.01 (which is the current HTML standard).
If you wish to be compliant with HTML5, then non-standard attributes should use a data- prefix so you should be using data-email.
To determine if an element has a particular attribute or not (as opposed to whether the attribute has a truthy value or not), you can consider the hasAttribute method. However, some browsers (e.g. IE < 9) don't support it and there is no viable work around (some have tried by parsing an element's outerHTML but I wouldn't suggest it). Also, you must use getAttribute to read the value because earlier versions of Firefox (and other browsers) do not create element properties for non-standard attributes.
One option for wider support is use a data-email attribute that always has a truthy value (i.e. anything other than an empty string). That way you can test with getAttribute.
An alternative is to use a class so that any element that should have the attribute also has the class, e.g.
<span class="... email ..." data-email="foo#bar.com">foo</span>

Setting a property via property or setAttribute

Is one of these more preferable than the other? Why? How about performance--if these are being called thousands of times?
A) element.setAttribute("disabled", true);
B) element.disabled = true;
They both seem to disable an input[text] element in FF 4.
In general…
Use properties. For a long time (until version 7 or 8 IIRC) Internet Explorer had a seriously broken implementation of setAttribute that would set the property not the attribute (the classic point of failure was class since there is no class property (it is className).
In this case in particular… element.setAttribute("disabled", true); is wrong. It should be element.setAttribute("disabled", "disabled");
element.setAttribute("disabled", some_bool) doesn't work like you'd think it will. In particular, standardswise, disabled is what's known as a boolean attribute; its very presence, regardless of its value, makes it true. disabled="", disabled="disabled", disabled="true" and even disabled="false"(!!!) all mean the same thing in most browsers. (Although the last two are actually invalid HTML, most browsers will consider them equivalent to disabled="disabled" for truth purposes. Including every one of the Big Four.) You set a boolean attribute to true by setting a value -- any value, even if it's falsy -- and you set it to false by removing the attribute entirely.
If you care about the actual string value of the attribute (which in this case you shouldn't), and particularly if the attribute isn't already exposed via the DOM (that is, it doesn't have a corresponding property), then use (get/set)Attribute. In most cases (particularly if you care about how it affects the element, like in this case where you're trying to disable an element), use the DOM property.
IE needs some attributes to be set with setAttribute, but not all. I don't have a list though, you just have to check if it works or not. Also, using setAttribute will put the attribute in the DOM, so it can be shown when doing view source.
Only one tip: element.setAttribute('class',xxx) doesnt works in some versions of IE.
Prefer element.className = xxx instead

why this javascript is line is Right and the other isn't

javascript with>
var customer=document.getElementById('custList').value;
and that works...
Why does it work BUT...
var customer=(form1.custList.value);
I get an error that form1 is not defined.
Especially why would this work in IE, and Chrome but not Firefox.
It seems just as clearly stated to me, but I am not a script engine
Just trying to understand
if you want to refer to a form object in your page, you may use the 'document.forms' object, that is an array of form objects in the document. suppose we have a form like this:
<form method="post" action="somthing.php" name="myContactForm" id="contact_form">
<input type="text" name="custList" id="custListId" />
</form>
to access the value in a correct way, you might use any of these methods:
first acccess the form, then the element.
var form = document.forms['myContactForm']; // use the 'name' attribute as the array key
// or if this is the first form appeared in the page. otherwise increase the index number to match the position of your target form.
var form = document.forms[0];
// or access the form directly
var form = document.getElementById('contact_form');
// now get the element, from the form. you can access form elements, by using their name attribute as the key in the elemetns array property of the form object.
var cust = form.elements['custList'].value();
or you can access a form element directly, without any form. you can refer any element in the document by its id, directly. no form is needed here.
var cust = document.getElementById('custListId');
all these statements are valid JavaScript that run on IE, firefox, opera, chrome, etc.
however you can refer to a form object in IE, by just calling its 'name' attribute. so this line works in IE (and as you are saying, chrome. I did not know that chrome handles it):
var cust = myContactForm.custList.value();
IE tries to map unknown window level properties (like myContactForm ) to elements by matching to their 'name' attribute.
I believe IE/Chrome/Opera incorrectly interpret id="form1" as name="form1" ( or vice versa? ) to account for legacy markup.
I would not rely on dom 0 level property accessing such as form1.custList and instead use document.getElementById. If it's too long to type, define a method to do it.. eg
function getId( id ) { return document.getElementById(id) }
Because the second idiom is not standard, while getElementById is, so it has to be supported by every browser to say that is javascript compatible.
Also, the second one should be, if I'm not mistaken, document.form1.custList.value.
Internet Explorer did a lot of things in it's own way. By all means, the first way is the correct way (using getElementById).
For backward compatibility many of these "bugs" still work, but you should not use them.
There are still differences between browsers. Using a JavaScript framework (like jQuery) helps a lot here, it is written to work well cross-browser (for the record, your code will be $('#custList').val(); using jQuery)
Internet Explorer stuffs all of your form elements by name into the window object as properties, which is fragile, incompatible, difficult to use with any finesse -- and what makes your second example work. Other browsers simply take the clean route of not implementing that interface at all, leaving you with the proper DOM functions. Or a toolkit. jQuery really is quite nice. ;)

Categories

Resources