Basic Set Form Data using a variable

JavaScript
1

I am working on my first JavaScript and have fun most of the time but could use some basic help. I have tried the search function on this site but it is returning a blank page for me?

I am working towards my first loop and testing how to set some form data using JavaScript and a variable.

So I can set some form data using:

document.timesheetForm.Total_D1.value = “TEST”;

But I would like to change which form element is set using a variable and then move to setting multiple form values in a loop.

So I am testing something like:

var objN = 1;
document.timesheetForm.(“Total_D”+objN).value = “TEST”;

I have tried lots of variations but can’t figure out the right combination of quotes and brackets to get my variable recognized and set form item “Total_D1” to “TEST” using the variable objN.

This is probably pretty basic but thanks for any help.

2

There are several different problems that can get in your way, so here is a starter.

A simple form:


<form id="personalInfo" method="get">
    <p>First name: <input type="text" name="firstname" value="John"></p>
    <p>Last name: <input type="text" name="lastname" value="Smith"></p>
    <input type="submit" value="Send info">
</form>

It’s most convenient to place your script at the end of the body, just before the </body> tag. This allows your script to directly interact with the rest of the page.

Your script can easily gain access to the form by its identifier attribute:


var form = document.getElementById('personalInfo');

Your script can gain access to all of the named form elements, by using the elements collection.


alert(form.elements.firstname);

You can also use the form.elements collection to change the form values.


form.elements.firstname.value = 'Jane';

If you’re still stuck after this, more specific help relating to your problem can be provided.

3

Thanks for the quick reply.

I have the JavaScript in a separate file and I am able to set the form Total_D1 value when I hard code it using:

document.timesheetForm.Total_D1.value = “TEST”;

What I am working towards is will be a loop that can work with multiple values:
Total_D1
Total_D2
Total_D3
Total_D4
Total_D5

So I am trying to figure out how to swap in a variable for the last number and then I will figure out how to do my loop. So I have been trying to test setting the Total_D1 value by swapping in a variable something like this:

var objN = 1;
document.timesheetForm.(“Total_D”+objN).value = “TEST”;

In your example I would want:
myVar = “firstname”
form.elements.myVar.value = ‘Jane’;

Does that make sense?

4

document.timesheetForm only gives you the form.

To obtain easy access to the form elements, you’ll be wanting to use instead:
document.timesheetForm.elements

Also, the parenthesis are used to invoke functions. You’ll want to use square brackets instead to access the array-like structure of form names.


var form = document.timesheetForm;
form.elements["Total_D"+objN].value = "TEST";
5

Thank you, this makes it fun again!

Now I am heading onto loops.

6

You won’t want to miss this thread about them then.