Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 1341

Aug 14th, 2007

Dynamic Javascript

Expand Post »

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

Similar Threads

Using "variable variables" in Javascript in JavaScript / DHTML / AJAX
Dynamic pull out menus in JavaScript / DHTML / AJAX
Creating Images dynamically in Javascript in ASP.NET
Making T.Greer's JavaScript-synthesised combobox dynamic in JavaScript / DHTML / AJAX
Need help in design and javascript code for Dynamic form in JavaScript / DHTML / AJAX

michael.ngobeni

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

20 posts
since Dec 2006

Permalink

Aug 14th, 2007

Re: Dynamic Javascript

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

binoj_daniel

Reputation Points: 25

Solved Threads: 18

Practically a Master Poster

Offline

645 posts
since Dec 2006

Permalink

Aug 14th, 2007

Re: Dynamic Javascript

Use ID property from html element to call from javascript

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'>

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;
  };
}

Nandem

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Aug 2007

Permalink

Aug 14th, 2007

Re: Dynamic Javascript

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

JavaScript / DHTML / AJAX Syntax (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>
<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>

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 720

Failure as a human

Offline

8,872 posts
since Jun 2006

Permalink

Aug 14th, 2007

Re: Dynamic Javascript

Click to Expand / Collapse Quote 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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
var strCommand = "document.FormName.myname" + x + ".value = 'Test';";
eval(strCommand);
var strCommand = "document.FormName.myname" + x + ".value = 'Test';";
eval(strCommand);

However the other solutions recommended are better practice.

alpha_foobar

Reputation Points: 20

Solved Threads: 5

Junior Poster

Offline

182 posts
since May 2005

Permalink

Aug 16th, 2007

Re: Dynamic Javascript

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

michael.ngobeni

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

20 posts
since Dec 2006

Permalink

Aug 16th, 2007

Re: Dynamic Javascript

Click to Expand / Collapse Quote originally posted by michael.ngobeni ...

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

replace with

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
if (document.getElementById('myname' + x)) {
   document.getElementById('myname' + x).value = 'Test';
}
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

Fungus1487

Reputation Points: 66

Solved Threads: 56

Posting Pro in Training

Offline

459 posts
since Apr 2007

Permalink

Aug 16th, 2007

Re: Dynamic Javascript

I'm surprised no-one thought of:

JavaScript / DHTML / AJAX Syntax (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";
    }
}
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

Reputation Points: 262

Solved Threads: 68

Veteran Poster

Offline

1,181 posts
since Feb 2005

Permalink

Aug 16th, 2007

Re: Dynamic Javascript

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>

michael.ngobeni

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

20 posts
since Dec 2006

Permalink

Aug 16th, 2007

Re: Dynamic Javascript

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.

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>

hollystyles

Reputation Points: 262

Solved Threads: 68

Veteran Poster

Offline

1,181 posts
since Feb 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript / Safari Problem - Please Help!!!

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Anybody have worked on a project like Google Adsense

DaniWeb Message

Cancel Changes

User Name
Password