Welcome to WebmasterWorld Guest from 23.22.140.143

Forum Moderators: open

Message Too Old, No Replies

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

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

Junior Member

5+ Year Member

joined:Mar 19, 2010
posts: 51
votes: 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.
5:50 am on June 1, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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.
5:51 am on June 1, 2010 (gmt 0)

Preferred Member

5+ Year Member

joined:May 29, 2007
posts: 578
votes: 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>
6:14 am on June 1, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 19, 2010
posts: 51
votes: 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?
7:04 am on June 1, 2010 (gmt 0)

Preferred Member

5+ Year Member

joined:May 29, 2007
posts: 578
votes: 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>
7:21 am on June 1, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 19, 2010
posts: 51
votes: 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...
7:35 am on June 1, 2010 (gmt 0)

Preferred Member

5+ Year Member

joined:May 29, 2007
posts:578
votes: 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>
7:49 am on June 1, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 19, 2010
posts: 51
votes: 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.
7:55 am on June 1, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


Try

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

that should catch the submit regardless of how its done
8:01 am on June 1, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 19, 2010
posts:51
votes: 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.
10:11 am on June 1, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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');">
9:17 pm on June 1, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 9, 2003
posts:3416
votes: 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.