I am looking to loop through all inputs on my page and declare a variable for each using the the id as name. This is what i have tried without success
$('input').each(function(){
eval( 'var'+$(this).attr('id')+'='+$(this).val());
});
3 Answers
Try this see if this works :
$('input').each(function(){
window[this.id] = this.value;
});
3 Comments
lonesomeday
If you must do this, please do
window[this.id] = this.value;.lonesomeday
@JohannesH. More to the point, even if we are using jQuery (and it isn't inherently a bad thing), it's still always a bad idea to do
$(this).attr('id').
Johannes H.
@lonesomeday I DO consider using jQuery for tasks that are not any more complex without it a bad thing. It's awfully slow - see test case linked in my answer. But you sill got a point of course ;)
$('input').each(function(){
window[this.id]=this.value;
});
Since all variables are object of window, you can initiate variables like this
1 Comment
Johannes H.
+1 for not using jQuery for getting the ID. But there is still no reason to use it for the loop...
Here is a solution without ANY jQuery. Plain old Javascript. Way faster, easier to read, no drawbacks. Jeez, why did all people start learning jQuery before they even got the basics?
var inputs = document.getElementsByTagName('input');
for (var i = 0 ; i < inputs.length ; i++ ) {
window[inputs[i].id] = inputs[i].value;
}
In recent versions of all majot browsers, you can do the same thing using querySelectorAll(). It is more flexible, but almost as slow as jQuery.
var inputs = document.querySelectorAll('input');
for (var i = 0 ; i < inputs.length ; i++ ) {
window[inputs[i].id] = inputs[i].value;
}
4 Comments
lonesomeday
That's an interesting performance comparison, though in practical terms not overwhelming, in my opinion (unless we're doing a lot of tests on a lot of data). But I have to say, I disagree that your loops are easier to read! If I were doing this in my own code (which I wouldn't, because it's inherently stupid) I would use jQuery for the selection and loop in almost all circumstances, providing it was already loaded.
Johannes H.
@lonesomeday If you don't like the loop, use developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - it almost looks like jQUery afterwards (only the function names are a bit longer).
document.getELementsByTagName('input').forEach(function (element) { /*...*/ }); DOn'T get me wrong, I do use jQUery myself, especiall when dealing with AJAX. SO if it's loaded anyway, it's ok to be lazy and us it for simple tasks. But when I see people using jQuery for literally everything, I always get curious if they even know plain JS.lonesomeday
That won't work, though, because
getElementsByTagName doesn't return an array. But you're right that learning how to do things the DOM way is always good for JS developers, even if they always use jQuery.Johannes H.
Oh. Yes, you're right, NodeLists are not arrays. Sorry, my bad!
varand quatation marks aroudn the value.