SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Id to Name

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Id to Name

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

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

    I tried using...

    Code JavaScript:
    function selectall(name)
    {
        document.getElementsByName(name).focus();
        document.getElementsByName(name).select();
    }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Typically name is handled differently, being retrieved from the form.elements collection.

    If you have:

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

    Here is how you might typically access the username field.

    Code javascript:
    var form = document.getElementById('login');
    var username = form.elements.username;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Typically name is handled differently, being retrieved from the form.elements collection.

    If you have:

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

    Here is how you might typically access the username field.

    Code javascript:
    var form = document.getElementById('login');
    var username = form.elements.username;
    Would it be best to just select getElementsByTag? Not all of the textareas are in the form.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unemployment View Post
    Would it be best to just select getElementsByTag? Not all of the textareas are in the form.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    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?

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

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

    Would something like this work?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by unemployment View Post
    Would something like this work?
    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.

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

    Code JavaScript:
    function selectall(el) {
        el.focus();
        el.select();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    An alternative that gets rid of the awful HTML inline events, is to run this script from the bottom of the page.

    Code javascript:
    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.

    Code html4strict:
    <textarea></textarea>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    An alternative that gets rid of the awful HTML inline events, is to run this script from the bottom of the page.

    Code javascript:
    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.

    Code html4strict:
    <textarea></textarea>
    Ok..i'm slowly learning, but this doesn't work for me.

    Code JavaScript:
    <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. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Whoops sorry, the selectAll function will now accept the textarea element as the this keyword, and the loop counter should be there too.

    Code javascript:
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Whoops sorry, the selectAll function will now accept the textarea element as the this keyword, and the loop counter should be there too.

    Code javascript:
    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
    Thanks... that works


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •