SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic variable names

    I was wondering if it is possible to have dynamic variable names that would change according to the elements in a form for example. Here is some code I am playing with to accomplish this task. I've heard that I may be able to use the eval() function to accomplish this but am not exactly sure of the route to go, if this is possible at all.

    Code:
    var myForm = document.getElementById('myForm');
    
    function getFormElements() {
         for (var i = 0; i < myForm.elements.length; i++) {
              var myForm.elements[i].id = document.getElementById(myForm.elements[i].value;
         }
    }
    Essentially what I would like to accomplish is calling a function that would scan the form for elements with ID's. For each ID found it would create a variable with an identifier of that ID and a value of the element's input.

    Thanks for any suggestions

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Malzahar View Post
    I've heard that I may be able to use the eval() function to accomplish this but am not exactly sure of the route to go, if this is possible at all.
    No, eval is evil. Do not use eval. Unless you're someone like Douglas Crockford, there is always a better way than using eval.

    Quote Originally Posted by Malzahar View Post
    Essentially what I would like to accomplish is calling a function that would scan the form for elements with ID's. For each ID found it would create a variable with an identifier of that ID and a value of the element's input.
    Let's use a simple form, as it's always easier with an example.

    Code javascript:
    <form id="personalInfo">
        <p><label for="firstname">First name: <input id="firstname" name="firstname" value="John"></label></p>
        <p><label for="lastname">Last name: <input id="lastname" name="lastname" value = "Hancock"></label></p>
    </form>

    My first comment for you is: why do you seem to want to duplicate the value within the form, when the id and form names are commonly the same?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    My first comment for you is: why do you seem to want to duplicate the value within the form, when the id and form names are commonly the same?
    Based on your example what I would like the function to do is create javascript variables for me called firstname and lastname and assign the user's input as their values.

    In other words I'd be trying to do something like this:

    Code:
    var firstname = document.getElementById('firstname').value;
    var lastname = document.getElementById('lastname').value;
    But rather than having the variables explicitly created I would like to have a generic function that can be used to accomplish the same task regardless of the inputs (firstname and lastname) so that it may be used in various scenarios without hardcoding the specific variables for each implementation.

    Also, whats so evil about the eval() function?

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    http://blogs.msdn.com/b/ericlippert/.../01/53329.aspx
    http://blogs.msdn.com/b/ericlippert/.../04/53335.aspx

    I didn't know it but eval() is considered evil in Ruby as well. Now the first link calls eval() slow, but I've heard from people who use it that it's actually sometimes faster... so, faster than what? I guess if you're writing a bunch of code to avoid eval() that ends up being molasses then maybe it's worth looking into.

    Based on your example what I would like the function to do is create javascript variables for me called firstname and lastname and assign the user's input as their values.
    You could use an associative array (not a real array).

    var inputs = {
    firstname : 'Joe';
    lastname: 'Smith';
    etc...
    };

    You'd start out with an empty object:
    var inputs = {};

    Here's where I get stuck, I don't know how to assign keys. I mean, you could type them yourself but it would be nice to have code that could go though any form, grab the input id's and set them as keys, and then later loop through them and assign values the user filled in.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    You could use an associative array (not a real array).

    var inputs = {
    firstname : 'Joe';
    lastname: 'Smith';
    etc...
    };
    Here's an idea: Doesn't form.elements return an array-like collection similar to the above associative array?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Here's an idea: Doesn't form.elements return an array-like collection similar to the above associative array?
    Hm I dunno, using .prototype property?

    var formInputs = document.forms['someform'].elements; <--HtmlCollection but can it be like any Object?

    for (i=0;i<formInputs.length; i++) {
    formInputs.prototype.element[i].id=element[i].value;
    }

    dunno, that's my guess until I'm behind my work computer.


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
  •