Dynamic Javascript

Hi guys,

I have a form with many text fields that are created from another program (java)

.
.
.
.
.

and I have a javascript that loops through these text fields

for (var x = 1; x <= numberoftextfields; x++)
{
document.FormName.myname+x+.value = 'Test';

}

This javascript does not work.
Can somebody assist me on this.

Thanks in advance

michael.ngobeni

Newbie Poster

20 posts since Dec 2006

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

What script error do you receive? Try placing the myname variable names in another variable before setting the value.

binoj_daniel

Practically a Master Poster

645 posts since Dec 2006

Reputation Points: 25

Solved Threads: 18

4 Years Ago

0

Use ID property from html element to call from javascript

<input type=text name = 'myname1' id='myname1'>
<input type=text name = 'myname2' id='myname2'>
<input type=text name = 'myname3' id='myname3'>

window.onload = function() {
  for (var i = 1; i < 4; i++) {
    document.getElementById('myname' + i).value = 'hi from for number ' + i;
  };
}

Nandem

Newbie Poster

3 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

Or something like this. Works in IE, FF and Opera.

<html>
<head>
    <script type='text/javascript'>
    var CONST = 'myname';
    function doSomething(frm)
    {
        for(var i = 1; i < 4; ++i)
        {
            var txt = CONST + i;
            document.frm[txt].value = 'Test';
        }
    }
    </script>
</head>
<body>
    <form name="frm">
        <input type = 'text' name = 'myname1' />
        <input type = 'text' name = 'myname2' />
        <input type = 'text' name = 'myname3' />
        <input type = 'button' onclick = 'doSomething(this.form);' value = 'Do' />
    </form>
</body>
</html>

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

4 Years Ago

0

Hi guys, document.FormName.myname+x+.value = 'Test';

The reason your code didn't work is that you were trying to construct the element variable as if it were a string... If you wanted to to it like this, you would need to construct the javascript you wanted to execute as a string and then execute it in an eval function...

i.e.

var strCommand = "document.FormName.myname" + x + ".value = 'Test';";
eval(strCommand);

However the other solutions recommended are better practice.

alpha_foobar

Junior Poster

182 posts since May 2005

Reputation Points: 20

Solved Threads: 5

4 Years Ago

0

I was off sick yesterday and I got to use your suggestions and they work perfect.
Thank you very much.

michael.ngobeni

Newbie Poster

20 posts since Dec 2006

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

document.FormName.myname+x+.value = 'Test';

replace with

if (document.getElementById('myname' + x)) {
   document.getElementById('myname' + x).value = 'Test';
}

HMM WHY DID I NOT SEE EVERYONES POSTS 2 MINS AGO ?
DANIWEB THREW A BRAIN FART OR I AM A LEPER

Fungus1487

Posting Pro in Training

459 posts since Apr 2007

Reputation Points: 66

Solved Threads: 56

4 Years Ago

0

I'm surprised no-one thought of:

var textBoxArray = document.getElementsByTagName("input");

for(var i = 0; i < textBoxArray.length; ++i)
{
    if(textBoxArray[i].type == "text")
    {
        textBoxArray[i].value = "test";
    }
}

All previous solutions rely on:
a. Knowing how many inputs there are.
b. Knowing the naming convention.

Shoot me down if you like but to me they are code smells.

hollystyles

Veteran Poster

1,182 posts since Feb 2005

Reputation Points: 262

Solved Threads: 68

4 Years Ago

0

The previous ones are perfect because I have other input textboxes with names like myusname, mypassword, and so on.
So I only wanted textboxes with myname1, myneme2.......

These textboxes are created from an xml file

....................
.
.
.
.
.

michael.ngobeni

Newbie Poster

20 posts since Dec 2006

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

Then that is best passed as a parameter IMO.

Just offering a more loosley coupled solution for the benefit of the thread that's all.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        function setText(txtID, txtValue)
        {
            var textBoxArray = document.getElementsByTagName("input");

            for(var i = 0; i < textBoxArray.length; ++i)
            {
                if(textBoxArray[i].type == "text" && textBoxArray[i].id.substring(0, txtID.length) == txtID)
                {
                    textBoxArray[i].value = txtValue;
                }
            }
        }
    </script>
</head>
<body>
        <input type="text" id="myname1" />
        <input type="text" id="myname2" />
        <input type="text" id="myname3" />
        <input type="button" onclick="setText('myname', 'test');" value = 'Go' />
</body>
</html>

hollystyles

Veteran Poster

1,182 posts since Feb 2005

Reputation Points: 262

Solved Threads: 68

Dynamic Javascript

This article has been dead for over three months