Results 1 to 6 of 6

Thread: Using Buttons to Populate Form Fields

  1. #1
    Join Date
    Mar 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Using Buttons to Populate Form Fields

    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>

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

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

    Migey (03-26-2011)

  4. #3
    Join Date
    Mar 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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>
    Last edited by Migey; 03-26-2011 at 08:54 AM.

  5. #4
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #5
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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
    Last edited by shellong; 09-20-2012 at 02:59 PM.

  7. #6
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,734
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    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.
    To choose the lesser of two evils is still to choose evil. My personal site

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •