I have an input form, nested within a div, defined like this:
<div class="login-input">
<input type="text" name="userId">
</div>
I’ve added a button below, and inside the click event for that button, I have code like this:
click: function(){
var user = document.getElementsByName(inputTitle)[0].value;
var myRequest = new Request({
url: '/Context/servletName',
method: 'post',
data: {'user': user},
onRequest: function(){
$('container').setStyle('cursor', 'progress');
},
onSuccess: function(responseText){
$('container').setStyle('cursor', 'auto');
window.location = responseText;
},
onFailure: function(){
$('container').setStyle('cursor', 'auto');
}
});
myRequest.send();
}
This works fine in all of the browsers I’ve tested so far (Chrome, FF, Safari) but in IE8, the following line of code is causing problems:
var user = document.getElementsByName(inputTitle)[0].value;
I verified in IE dev tools that inputTitle has a value of “userId”. The problem is that
document.getElementsByName(inputTitle)[0];
Is undefined.
I also did a little bit of playing around. Adding this to watch returns what looks like a valid object:
// Returns valid object
document.getElementsByName(inputTitle);
// Returns null
document.getElementsByName(inputTitle).item(0);
document.getElementsByName(inputTitle).value;
As always, thanks in advance…
EDIT: Proof I’m not crazy….



I did a quick test-case to prove that the code works – http://jsfiddle.net/DmmcE/ (tested on IE8).
Doing a:
Returns
[object HTMLInputElement].Which means, the
inputTitleyou’re passing is not passing the correct thing.That said, since you’re using MooTools, why not doing it the MooTools way:
Example: http://jsfiddle.net/UZTK4/