Using Buttons to Populate Form Fields

**Migey** · 03-25-2011, 10:24 PM

I've seen various ways to populate form fields using javascript and radio button, text fields, and text areas but thus far i've been unable to do it via input buttons. Any help would be appreciated. I'm no javascript guru.

What I've tried in various forms is the following which produced an undefined output.

Code:

<!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.groovyform.serviceField.value = document.groovyform.service.value; 
  } 
</script>
</head> 
<body onLoad="myOnloadEvent();"> 
 <form name="groovyform">
<input type="button" onclick="populateTheOtherInputField()" value="Test" name="service">
<input type="button" onclick="populateTheOtherInputField()" value="Run" name="service">
<input type="text" id="serviceField" name="serviceField">
</form>


 </body> 
</html>

**djr33** · 03-25-2011, 11:28 PM

There are a few problems. First, it's better to use document.getElementById('elementID') and use ID instead of name.

Second, document.groovyform.service.value; is ambiguous between the two buttons since they have the same name.

Have you seen the method using this?
Try something along the lines of:
onclick="populateTheOtherInputField(this.value);"
Then in your function:

Code:

function populateTheOtherInputField(someval) { 
  document.groovyform.serviceField.value = someval; 
}

(Note that I'm just basing that on your example, so you should still fix it to use ID as above.)

That should get you started, since you're just trying to play with this and see how it works. If you have a specific question, feel free to reply and also explain your goal, such as how you want the user experience to work-- there are technical methods to do this sort of thing, but often it's important to understand the practical reasons as well because there might be another different approach that's just better overall.

**Migey** · 03-26-2011, 08:47 AM

Wow! That worked perfectly. The changes also allowed me to separate the button inputs from the target form which would have been the next step. Thank you for the help.

The working code follows:

Code:

<!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>Button Form Populate</title> 
 <script type="text/javascript">
function transferField(someval) { 
  document.groovyform.simba.value = someval; 
  } 
</script>
</head> 
<body> 
 <form name="groovyform">
<input type="text" id="simba" value="">
<input type="reset" value="Reset">
</form>

<input type="button" onclick="transferField(this.value)" value="Test">
<input type="button" onclick="transferField(this.value)" value="Run">

 </body> 
</html>

**Rkayd** · 11-12-2011, 03:48 PM

I am just getting ideas together and I think this thread should help. I am quite new to JavaScript but will need to use it in this project.

I am putting together a timesheet database where the employees enter in/out times by pressing a button. First of all, would it be possible to use one button to fill 2 fields. The above sample shows 2 buttons filling one field but could the code be modified to do what I want to do? I would like 2 fields (In Time & Out Time) and one button (In/Out). If both fields are empty then the button would populate the In Time field but if there is already an entry in that field then it would populate the Out Time field instead. If that is too difficult I suppose I could use 2 different buttons but I would like to make it as simple as possible for the user. I suppose I could also deactivate the Out button if the In Time field was blank and deactivate the In button if there was already data in the In Time field. Or, if I remember right, I could have just one of the buttons visible, depending on which information is required?

**shellong** · 09-20-2012, 02:37 PM

Wow! This is awesome! Can it be done with image buttons?

Yep it can be done with buttons... My test is working but not in my actual page.

www.bspgc.com/customize3.html

**james438** · 09-20-2012, 03:11 PM

That is an interesting page shellong. I'm not sure if it matters to you, but I am unable to get the buttons for the artwork, accessories, print, or request a code to work in Opera. This may well be a browser specific issue. I am not so sure that is the case though since some buttons work in the Opera browser and others do not.

Thread: Using Buttons to Populate Form Fields

Thread Tools

Search Thread

Using Buttons to Populate Form Fields

The Following User Says Thank You to djr33 For This Useful Post:

Wow! This is awesome! Can it be done with image buttons?

Bookmarks

Bookmarks

Posting Permissions