Form field values automatically

@bryanasFeb 26.2008

I wanted to know how to make the values in “Set #1″ below pass automatically over to another Set #2” which is within the same form. For example:

<form action=”login.php” id=”thisform” name=”thisform” method=”post” onsubmit=”if (this.checker.checked) toMem(this)”>
<fieldset>
<legend>Set #1</legend>
<label>Username:</label>
<input type=”text” name=”username” size=”25″ tabindex=”1″ id=”login-name” value=”” /><br />
<label>Password:</label>
<input type=”password” name=”password” id=”login-password” size=”25″ tabindex=”2″/>
<label>Remember: <input type=”checkbox” name=”persistent” id=”remember” tabindex=”3″/></label>

<p>
<input type=”submit” value=”Login” class=”log2″ tabindex=”4″ />
<input type=”hidden” name=”processlogin” value=”1″/>
</p>
<p> </p>
<table border=”0″ cellpadding=”0″ cellspacing=”3″ align=”center” width=”460″>
<tr>
<td width=”170″ align=”right”> Set #2</td>
<td width=”290″>  </td>
</tr><tr>
<td width=”170″ align=”right”> Password: </td>
<td width=”290″> <input size=”30″ name=”name” id=”name”> </td>
</tr>
<tr>
<td width=”170″ align=”right”> E-mail: </td>
<td width=”290″> <input size=”30″ name=”email” id=”email”> </td>
</tr>
<tr>
<td colspan=”2″ align=”center”>  </td>
</tr>
</table>
</fieldset>
</form>

to post a comment

JavaScript

13 Comments(s) _↴

@A1ien51Feb 26.2008 — #set the value

document.formName.elementName.value = document.formName.elementName2.value;

Eric

@bryanasauthorFeb 26.2008 — #Do you mean put it in the javascript as you had it? I am not sure what you meant.

@toicontienFeb 26.2008 — #document.[I]formName[/I].[I]elementName[/I].value = document.[I]formName[/I].[I]elementName2[/I].value;

formName = The value of the name attribute you gave your FORM tag.

elementName = The name of the form field you want to copy from

elementName2 = the name of the form field you want to copy to

@bryanasauthorFeb 26.2008 — #I tried that earlier and it did not work. Am I missing something?

<script>

document.thisform.username.value = document.thisform.email.value;

document.thisform.password.value = document.thisform.name.value;

</script>

@toicontienFeb 26.2008 — #

<i>
 </i>document.[B]forms[/B].thisform.username.value = document.[B]forms[/B].thisform.email.value;
 document.[B]forms[/B].thisform.password.value = document.[B]forms[/B].thisform.name.value;

Also, ensure you don't have more than one form on the page with "thisform" for a name.

In fact, to be even more sure you don't get node references mixed up:

var form = document.getElementById("thisform");
 form.elements.username.value = form.elements.email.value;
 form.elements.password.value = form.elements.name.value;

Using document.getElementById to grab a reference to form ensures you get that [B]exact[/B] form, and nothing else. Using document.forms.[I]form_name[/I] can be inconsistent if you give more than one form on your page with the same name. For this reason I always recommend assigning an Id to your form and using document.getElementById to get a reference to it.

Then I use the .elements property of the form to gain references to the form fields. You have a form field named "name". That overwrites the .name property of the form with a reference to the name field. The form.name property is an INPUT instead of a string representing the name attribute for the FORM tag. For this reason always use the .elements property of a FORM tag to gain references to the fields within.

Resource: JavaScript, DOM, and the Humble FORM

@bryanasauthorFeb 26.2008 — #LOL. I must be missing something. Here is the code complete with your script in it:

<script type="text/javascript" src="rememberMe.js">

</script>

<script>

var form = document.getElementById("thisform");

form.elements.username.value = form.elements.email.value;

form.elements.password.value = form.elements.name.value;

</script>

<form action="login.php" id="thisform" name="thisform" method="post" onsubmit="if (this.checker.checked) toMem(this)">

<fieldset>

<legend>Set #1</legend>

<label>Username:</label>

<input type="text" name="username" size="25" tabindex="1" id="login-name" value="" /><br />

<label>Password:</label>

<input type="password" name="password" id="login-password" size="25" tabindex="2"/>

<label>Remember: <input type="checkbox" name="persistent" id="remember" tabindex="3"/></label>

<p>

<input type="submit" value="Login" class="log2" tabindex="4" />

<input type="hidden" name="processlogin" value="1"/>

</p>

<p> </p>

<table border="0" cellpadding="0" cellspacing="3" align="center" width="460">

<tr>

<td width="170" align="right"> Set #2</td>

<td width="290">  </td>

</tr><tr>

<td width="170" align="right"> Password: </td>

<td width="290"> <input size="30" name="name" id="name"> </td>

</tr>

<tr>

<td width="170" align="right"> E-mail: </td>

<td width="290"> <input size="30" name="email" id="email"> </td>

</tr>

<tr>

<td colspan="2" align="center">  </td>

</tr>

</table>

</fieldset>

</form>

@toicontienFeb 26.2008 — #The script will be run as the browser renders the page. Since the script appears before the FORM, the script will fail. When do you want the form field values to be copied? When the form submits? Automatically when the page loads? When the user finishes filling out a form field? You need some sort of event that will trigger the values being copied.

@bryanasauthorFeb 26.2008 — #The script would work when the user finishes filling out a form field?

@toicontienFeb 26.2008 — #Ok. I think I know what you're getting at.

&lt;input type="password" name="password" id="login-password" size="25" tabindex="2" [B]onblur="copyVals(this.form);"[/B] /&gt;

Now change your JavaScript to this:

function copyVals(form) {
 form.elements.username.value = form.elements.email.value;
 form.elements.password.value = form.elements.name.value;
 }

Note that due to browser security checks, you might not be able to copy a value from a password box to a normal text box. But give it a shot.

When the user moves focus away from the password field, the values are copied. The copyVals function is passed "this.form" which is a reference to the FORM tag.

@bryanasauthorFeb 26.2008 — #That actually worked well but is there a way to do it without clicking on the field to pass the values over? So in other words it instantly inserts the values in the field?

@toicontienFeb 26.2008 — #It can't instantly insert the values unless the values already exist. But to accomplish that:

function copyVals() {
 var form = documentElementById("thisform"):
 form.elements.username.value = form.elements.email.value;
 form.elements.password.value = form.elements.name.value;
 }
 copyVals();

Remove the SCRIPT tags from above your FORM. Put SCRIPT tags below the FORM, an put the code above inside the script tags. Now as the page renders, it copies the values over. Is that what you mean?

You need to better define "instantly copies over".

@bryanasauthorFeb 26.2008 — #I mean when someone types in the field it is simultaneously inserting the information in the other field.

@toicontienFeb 26.2008 — #Use the code from post #10 and instead of using onblur only on the password field, use onkeypress on both the password and username fields.

Also in #JavaScript _↴

Facebook Game Knighthood window open /opener/ parent - not working Form Calculator

Success!

Help @bryanas spread the word by sharing this article on Twitter...

Tweet This

Form field values automatically

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Form field values automatically

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴