How can I use JavaScript to populate a form input on the fly?

Forum Moderators: open

Message Too Old, No Replies

How can I use JavaScript to populate a form input on the fly?

DigitalSky

5:16 am on Jun 1, 2010 (gmt 0)

Okay so I can't seem to find a way to do this for the life of me.

What I want to happen here is I want to use JavaScript to take the contents of one form input field and use it to fill another field. The thing is that I don't want to do this using a variable, I want to do it on the fly so that the moment someone is done typing in one input field it automatically copies the EXACT SAME CONTENT from that form field to one below it without even having to press any submit buttons or anything.

Can anyone show me how to do this? I've search and searched but found nothing.

daveVk

5:50 am on Jun 1, 2010 (gmt 0)

<INPUT type="text" onchange="document.getElementById('copy2').value = this.value;">
<INPUT type="text" id='copy2' ">

not exactly "the moment someone is done typing" but maybe close enough.

lavazza

5:51 am on Jun 1, 2010 (gmt 0)

the moment someone is done typing

You'll want to attach an onBlur() event to the '1st' field

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en-GB"> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>hello whirled</title> 
 <script type="text/javascript"> 
 function populateTheOtherInputField() { 
  document.myFormName.myNumber2.value = document.myFormName.myNumber1.value; 
  } 
 </script> 
</head> 
<body onLoad="myOnloadEvent();"> 
 <h1> 
 Lorem ipsum dolor sit amet 
 </h1> 
 <form name="myFormName" method="get" action=" "> 
 <p> 
  Consectetuer adipiscing elit. Donec  
  in purus a dui venenatis laoreet. Integer faucibus convallis  
  urna. Maecenas iaculis justo non leo. Duis eget tortor eu dui  
  dapibus sagittis. Integer nec diam. Maecenas tristique auctor  
  ligula. In egestas. Nunc interdum magna id felis.  
 </p> 
 <p> 
  Type or paste stuff in here: 
  <br> 
  <textarea rows="5"  
   cols="50"  
   id="myNumber1" 
   onBlur="populateTheOtherInputField()";></textarea> 
 </p> 
 <p> 
  It will appear here when you move the focus out of the box above 
  <br> 
  <textarea rows="5"  
   cols="50"  
   id="myNumber2"></textarea> 
 </p> 
 <noscript>  
  <div> 
  If you can see this then SCRIPTS are turned OFF on your machine and it won't work 
  </div>   
 </noscript> 
 </form> 
 </body> 
</html>

DigitalSky

6:14 am on Jun 1, 2010 (gmt 0)

Brilliant, it works perfectly! Thank you so much.

While I'm here I may as will ask this simple question since I'm new to JavaScript.

In the head of my document I have this code...


<script language="javascript" type="text/javascript">
function removeSpaces(string) {
 return string.split(' ').join('');
}
</script>

Basically what it does is remove spaces in one of my form input fields.

This is the code I have on that particular input field...

<input name="teamTableName" type="text" onblur="this.value=removeSpaces(this.value);" />

The code works great, as soon as someone clicks away from that form field after having filled it out, it removes the spaces right there. The issue I'm having is that I don't want that to happen right when they click away from the field, I want it to happen when the submit button is pressed and the form is submitted.

I tried applying it to the submit button with an 'onclick' event but it doesn't seem to work. This is the code I used...

<input name="submit" type="submit" value="Submit" onclick="removeSpaces(teamTableName);" />

Can anyone tell me what I'm doing wrong here?

lavazza

7:04 am on Jun 1, 2010 (gmt 0)

The SUBMIT is being implemented before the onClick event has a chance to fire, let alone run

Instead of using a SUBMIT, as in:
<input name="submit" type="submit" value="Submit" onclick="removeSpaces(teamTableName);" />

Try using a plain old BUTTON, as in:
<input name="mySubmit" type="button" value="Submit" onclick="myFinalFunction();" />

And put something like the following before the </head> tag:


 <script type="text/javascript"> 
 function myFinalFunction() { 
  removeSpaces(document.myFormName.teamTableName); 
  submit(); 
 } 
 </script>

DigitalSky

7:21 am on Jun 1, 2010 (gmt 0)

I just used that exact code but now since the button type is 'button' and not 'submit' it won't even submit the form. When you click it nothing happens...

lavazza

7:35 am on Jun 1, 2010 (gmt 0)

You DO have all your relevant code nested within <form> tags, right?
----
ETA: and an appropriate ACTION attribute in the opening form tag
----

If so, note that the 'code' I have written is specifically for a form named "myFormName"

Anyhoo...

The failure to submit might be a consequence of my shoddy code - something that happens when I write from memory and don't check it first :(

Whoops!

Instead of what I wrote above, try something like the following before the </head>


 <script type="text/javascript"> 
 function myFinalFunction() { 
 removeSpaces(document.myFormName.teamTableName); 
 // submit();  
 document.myFormName.submit(); 
 } 
 </script>

DigitalSky

7:49 am on Jun 1, 2010 (gmt 0)

Nope, still doesn't work.

Just to make sure I'm doing this right here is my code...

The head sectionof my document looks like this...


<script language="javascript" type="text/javascript">

<!-- Begin
function stringFilter (input) {
s = input.value;
filteredValues = "',.-:;&!"; // Characters stripped out
var i;
var returnString = "";
for (i = 0; i < s.length; i++) { // Search through string and append to unfiltered values to returnString.
var c = s.charAt(i);
if (filteredValues.indexOf(c) == -1) returnString += c;
}
input.value = returnString;
}
// End -->
</script>

<script language="javascript" type="text/javascript">
function removeSpaces(string) {
 return string.split(' ').join('');
}
</script>

<script type="text/javascript"> 
 function populateField() { 
 document.register.teamTableName.value = document.register.teamName.value; 
 } 
</script>

Basically that code does three things. The first function strips any special characters from the 'teamTableName' form field. The second function removes any spaces from the 'teamTableName' field as well, and the third function is the one you showed me that takes the contents of the 'teamName' field and uses it to populate the 'teamTableName' field.

Now here is what my form looks like...


<form action="success.php" method="post" name="register">

<input name="name" type="text" class="form-fields" />

<input name="email" type="text" class="form-fields" />

<input name="phone" type="text" class="form-fields" />

<input name="teamName" id="teamName" onblur="populateField();" type="text" />

<input name="teamTableName" id="teamTableName" type="text" onblur="this.value=removeSpaces(this.value);" />

<input name="submit" type="submit" value="Submit" onclick="stringFilter(teamTableName);" />
</form>

Now keep in mind that this is what my code looks like BEFORE I add the new function you gave me (myFinalFunction). As it stands right now in it's current form it works, when I edit it to allow that new function it won't work at all and the submit button still won't function.

daveVk

7:55 am on Jun 1, 2010 (gmt 0)

Try

<form action="success.php" method="post" name="register" onsubmit="removeSpaces('fred');">

that should catch the submit regardless of how its done

DigitalSky

8:01 am on Jun 1, 2010 (gmt 0)

When I do as you said and change the code to this...

<form action="success.php" method="post" name="register" onsubmit="removeSpaces('teamTableName');">

It still doesn't work. I mean the form submits fine but it doesn't invoke the 'removeSpaces' function for some reason.

daveVk

10:11 am on Jun 1, 2010 (gmt 0)

try

function removeSpacesById(id) {
var el=document.getElementById(id);
el.value = el.value.split(' ').join('');
}

<form action="success.php" method="post" name="register" onsubmit="removeSpacesById('teamTableName');">

whoisgregg

9:17 pm on Jun 1, 2010 (gmt 0)

If you are submitting the form to your own processing script, it would far more secure to strip the spaces in the script then depend on JavaScript to do so for you.