Generate variables for elements dynamically

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,078 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,355 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 755 | Replies: 5

•

Join Date: Feb 2007

Posts: 56

Reputation: adaykin is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Generate variables for elements dynamically

Jul 5th, 2008

Hello, I was wondering if there would be a way I could generate elements dynamically using something like this, where qtyElements is an array of all the elements that start with qty.

Help with Code Tags

(Toggle Plain Text)

var qtyElements = document.getElementsByName('qty*');
for(var i = 1; i < qtyElements.length + 1; i++)
{
   // var name is cqty + whatever number at i is
   var cqty + i = qtyElements[i - 1];
}

Last edited by adaykin : Jul 5th, 2008 at 1:03 pm. Reason: wrong comment

My Website <-- check out my site!

•

Join Date: Jun 2008

Posts: 5

Reputation: JDOMPer is an unknown quantity at this point

Rep Power: 0

Solved Threads: 1

JDOMPer

Offline

Newbie Poster

Re: Generate variables for elements dynamically

Jul 5th, 2008

See the JDOMP thread for a simple way using the DOM

•

Join Date: Feb 2007

Posts: 56

Reputation: adaykin is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Re: Generate variables for elements dynamically

Jul 5th, 2008

well for what I'm doing I don't want take time to learn your jdomp you are promoting.

My Website <-- check out my site!

•

Join Date: Jun 2006

Location: India

Posts: 6,851

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 344

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: Generate variables for elements dynamically

Jul 6th, 2008

Maybe something like this snippet will help you getting started. Ensure that the elements you are trying to access are form fields enclosed in the form tag.

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <script type="text/javascript">
    /**
     * A placeholder function which will be called on the button click which
     * in turn invokes the function which contains the core logic.
     *
     * @param frm The reference to the form element
     * @param pattern THe pattern to be used for matching.
     */
    function calculateForPattern(frm, pattern) {
      var sum = calculate(frm, pattern);
      alert("The sum of all elements whose names start with *" +
        pattern + "* is " + sum);      
    }
    
    /**
     * Calculate the sum of values of the text fields on the 
     * document whose name start with "qty"
     *
     * @param frm The reference to the form element
     * @param pattern THe pattern to be used for matching.
     * @returns The sum of the values of all the form fields
     *  whose name match the given pattern.
     */
    function calculate(frm, pattern) {
      // Duck out if no proper form reference / pattern supplied.
      if(!frm || !pattern) {
        return(0);
      }
      // Assumption: Only text fields have names starting with the given
      // pattern. For other form fields (drop downs, radio buttons) add
      // the required handling.
      var elems = frm.elements, sum = 0;
      for(var i = 0, maxI = elems.length; i < maxI; ++i) {
        var val = elems[i].value ? elems[i].value : null;        
        if(val) {
          // Do away with inputs of the form 3E4 which are valid JS
          // numbers. Allow only digits and dots and if proper input
          // is supplied, try to parse the number out of the value.
          var num = /^[0-9.]+$/.test(val) && Number(val);
          // Don't perform the addition if num evaluates to NaN.
          sum = sum + (num ? num : 0);
        }
      }
      return(sum);
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <div id="qtyElems">
      <span>First: </span><input id="qtyOne" name="qtyOne" value="5">
      <br>
      <span>Second: </span><input id="qtyTwo" name="qtyTwo" value="5">
      <br>
      <input type="button" 
        onclick="calculateForPattern(this.form, 'qty');" value="Calculate!">
    </div>
  </form>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <script type="text/javascript">
    /**
     * A placeholder function which will be called on the button click which
     * in turn invokes the function which contains the core logic.
     *
     * @param frm The reference to the form element
     * @param pattern THe pattern to be used for matching.
     */
    function calculateForPattern(frm, pattern) {
      var sum = calculate(frm, pattern);
      alert("The sum of all elements whose names start with *" +
        pattern + "* is " + sum);      
    }
    
    /**
     * Calculate the sum of values of the text fields on the 
     * document whose name start with "qty"
     *
     * @param frm The reference to the form element
     * @param pattern THe pattern to be used for matching.
     * @returns The sum of the values of all the form fields
     *  whose name match the given pattern.
     */
    function calculate(frm, pattern) {
      // Duck out if no proper form reference / pattern supplied.
      if(!frm || !pattern) {
        return(0);
      }
      // Assumption: Only text fields have names starting with the given
      // pattern. For other form fields (drop downs, radio buttons) add
      // the required handling.
      var elems = frm.elements, sum = 0;
      for(var i = 0, maxI = elems.length; i < maxI; ++i) {
        var val = elems[i].value ? elems[i].value : null;        
        if(val) {
          // Do away with inputs of the form 3E4 which are valid JS
          // numbers. Allow only digits and dots and if proper input
          // is supplied, try to parse the number out of the value.
          var num = /^[0-9.]+$/.test(val) && Number(val);
          // Don't perform the addition if num evaluates to NaN.
          sum = sum + (num ? num : 0);
        }
      }
      return(sum);
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <div id="qtyElems">
      <span>First: </span><input id="qtyOne" name="qtyOne" value="5">
      <br>
      <span>Second: </span><input id="qtyTwo" name="qtyTwo" value="5">
      <br>
      <input type="button" 
        onclick="calculateForPattern(this.form, 'qty');" value="Calculate!">
    </div>
  </form>
</body>
</html>

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.

•

Join Date: Feb 2007

Posts: 56

Reputation: adaykin is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

adaykin

Offline

Junior Poster in Training

Re: Generate variables for elements dynamically

Jul 6th, 2008

so would a regex work to get the pattern out so we get the ones that start with qty?

My Website <-- check out my site!

•

Join Date: Jun 2006

Location: India

Posts: 6,851

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 344

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: Generate variables for elements dynamically

Jul 7th, 2008

Certainly, a regular expression can be very well used for filtering out elements based on the pattern which can then be used to do additional processing.

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.