Dynamic Javascript

•

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 456,476 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 2,780 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: 784 | Replies: 9

•

Join Date: Dec 2006

Posts: 20

Reputation: michael.ngobeni is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

michael.ngobeni michael.ngobeni is offline

Offline

Newbie Poster

Dynamic Javascript

Aug 14th, 2007

Hi guys,

I have a form with many text fields that are created from another program (java)
<input type=text name = 'myname1'>
<input type=text name = 'myname2'>
<input type=text name = 'myname3'>
.
.
.
.
.

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

•

Join Date: Dec 2006

Location: United States

Posts: 613

Reputation: binoj_daniel is an unknown quantity at this point

Rep Power: 3

Solved Threads: 15

binoj_daniel binoj_daniel is offline

Offline

DaniWeb Expert

Re: Dynamic Javascript

Aug 14th, 2007

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

Binoj Daniel
Best Place to hunt for Code | Quality Web Designing | Custom Software

•

Join Date: Aug 2007

Posts: 3

Reputation: Nandem is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Nandem

Offline

Newbie Poster

Re: Dynamic Javascript

Aug 14th, 2007

Use ID property from html element to call from javascript

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<input type=text name = 'myname1' id='myname1'>
<input type=text name = 'myname2' id='myname2'>
<input type=text name = 'myname3' id='myname3'>
<input type=text name = 'myname1' id='myname1'>
<input type=text name = 'myname2' id='myname2'>
<input type=text name = 'myname3' id='myname3'>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
window.onload = function() {
  for (var i = 1; i < 4; i++) {
    document.getElementById('myname' + i).value = 'hi from for number ' + i;
  };
}
window.onload = function() {
  for (var i = 1; i < 4; i++) {
    document.getElementById('myname' + i).value = 'hi from for number ' + i;
  };
}

•

Join Date: Jun 2006

Location: India

Posts: 7,012

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

Rep Power: 25

Solved Threads: 368

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: Dynamic Javascript

Aug 14th, 2007

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

Help with Code Tags

(Toggle Plain Text)

<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' /><br />
        <input type = 'text' name = 'myname2' /><br />
        <input type = 'text' name = 'myname3' /><br />
        <input type = 'button' onclick = 'doSomething(this.form);' value = 'Do' />
    </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: May 2005

Location: Wellington, New Zealand

Posts: 182

Reputation: alpha_foobar is an unknown quantity at this point

Rep Power: 4

Solved Threads: 3

alpha_foobar alpha_foobar is offline

Offline

Junior Poster

Re: Dynamic Javascript

Aug 14th, 2007

•

Originally Posted by michael.ngobeni

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.

Help with Code Tags

(Toggle Plain Text)

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

However the other solutions recommended are better practice.

alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur

•

Join Date: Dec 2006

Posts: 20

Reputation: michael.ngobeni is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

michael.ngobeni michael.ngobeni is offline

Offline

Newbie Poster

Re: Dynamic Javascript

Aug 16th, 2007

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

•

Join Date: Apr 2007

Location: Birmingham

Posts: 378

Reputation: Fungus1487 is an unknown quantity at this point

Rep Power: 2

Solved Threads: 38

Fungus1487 Fungus1487 is offline

Offline

Posting Whiz

Re: Dynamic Javascript

Aug 16th, 2007

•

Originally Posted by michael.ngobeni

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

replace with

Help with Code Tags

(Toggle Plain Text)

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

Last edited by Fungus1487 : Aug 16th, 2007 at 10:26 am. Reason: LEPRACY

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design

•

Join Date: Feb 2005

Location: Braintree, UK

Posts: 1,166

Reputation: hollystyles will become famous soon enough

Rep Power: 7

Solved Threads: 59

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: Dynamic Javascript

Aug 16th, 2007

I'm surprised no-one thought of:

Help with Code Tags

(Toggle Plain Text)

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.

==========================================
Yadda yadda yadda...
Web junky, fevered monkey

•

Join Date: Dec 2006

Posts: 20

Reputation: michael.ngobeni is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

michael.ngobeni michael.ngobeni is offline

Offline

Newbie Poster

Re: Dynamic Javascript

Aug 16th, 2007

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

<person>
<myusername>....</myusername>
<mypassword>....</mypassword>
<myname1>....</myname1>
<myname2>....</myname2>
<myname3>....</myname3>
.
.
.
.
.
</person>

•

Join Date: Feb 2005

Location: Braintree, UK

Posts: 1,166

Reputation: hollystyles will become famous soon enough

Rep Power: 7

Solved Threads: 59

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: Dynamic Javascript

#10

Aug 16th, 2007

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.

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!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" /><br />
        <input type="text" id="myname2" /><br />
        <input type="text" id="myname3" /><br />
        <input type="button" onclick="setText('myname', 'test');" value = 'Go' />
</body>
</html>
<!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" /><br />
        <input type="text" id="myname2" /><br />
        <input type="text" id="myname3" /><br />
        <input type="button" onclick="setText('myname', 'test');" value = 'Go' />
</body>
</html>