Id to Name

JavaScript
1

How do I make this function use name instead of id?


function selectall(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}

I tried using…


function selectall(name)
{
    document.getElementsByName(name).focus();
    document.getElementsByName(name).select();
}
2

Typically name is handled differently, being retrieved from the form.elements collection.

If you have:


<form id="login">
    <input name="username">
    ...
</form>

Here is how you might typically access the username field.


var form = document.getElementById('login');
var username = form.elements.username;
3

Would it be best to just select getElementsByTag? Not all of the textareas are in the form.

4

Those text areas won’t be submitted with the form, so the name attribute should not be used on them.

You should instead use some other technique to access those text areas, by using an id attribute on either the text areas, or on a suitable wrapper around several of them.

5

Placing it on a wrapper would work but I have no idea how to do that. Am I supposed to just use the wrapper id with the code?


function selectall(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}



<div id="wrapper">
     <textarea onclick="selectall('wrapper');"></textarea>
</div>

Would something like this work?

6

You don’t even need a wrapper for what you’re wanting to achieve there. You can pass the this keyword to the function, which will refer directly to the textarea element itself.


<textarea onclick="selectall(this);"></textarea>



function selectall(el) {
    el.focus();
    el.select();
}
7

An alternative that gets rid of the awful HTML inline events, is to run this script from the bottom of the page.


var selectAll = function (el) {
    el.focus();
    el.select();
};
var textareas = document.getElementsByTagName('textarea'),
    i;
for (i = 0; i < textareas.length; i += 1) {
    textareas.onclick = selectAll;
}

That script will automatically add the onclick event to each and every text area on the page, removing the need for horrible inline event attributes. Your HTML code can now be entirely HTML code.


<textarea></textarea>
8

Ok…i’m slowly learning, but this doesn’t work for me.


<script type="text/javascript" language="javascript">
	var selectAll = function (document.getElementById('jt_cte_area')) {
		document.getElementById('jt_cte_area').focus();
		document.getElementById('jt_cte_area').select();
	};
	var textareas = document.getElementsByTagName('textarea'),
		i;
	for (i = 0; i < textareas.length; i += 1) {
		textareas.onclick = selectAll;
	}
</script>
9

Whoops sorry, the selectAll function will now accept the textarea element as the this keyword, and the loop counter should be there too.


var selectAll = function () {
    this.focus();
    this.select();
};
var textareas = document.getElementsByTagName('textarea'),
    i;
for (i = 0; i < textareas.length; i += 1) {
    textareas[i].onclick = selectAll;
}

Test -> Working

10

Thanks… that works