homepage Welcome to WebmasterWorld Guest from 54.211.157.103
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




msg:4144694
 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




msg:4144705
 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




msg:4144706
 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




msg:4144711
 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




msg:4144720
 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




msg:4144726
 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




msg:4144739
 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




msg:4144751
 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




msg:4144755
 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




msg:4144761
 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




msg:4144810
 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




msg:4145208
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved