SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Closer than you think
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Auto Populate Radio Label

    There is a text field in a form that I would like to auto populate radio options.

    Image 3 Text Fields one for first name, middle name and Last name.

    There are also 3 radio group options for the person on how their name displayed

    First Middle Last
    First M. Last
    First L.

    I would like these three radio option labels to be populated as the user types in the form fields. Is this possible? If so can you point me in the right direction?

  2. #2
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like this maybe?

    Code:
    <form>
    first <input name=first onkeyup="update(this)">
    last <input name=last onkeyup="update(this)">
    middle <input name=middle onkeyup="update(this)">
    <br>
    <label id="k_first"></label><input type="radio">
    <label id="k_last"></label><input type="radio">
    <label id="k_middle"></label><input type="radio">
    </form>
    
    <script>
    function update(input) {
    	document.
    		getElementById("k_" + input.name).
    			innerHTML 
    				= input.value
    }
    </script>

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Closer than you think
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    stereofrog,

    Thanks that seems to work but I need some slight adjustments. Like the Last name needs to be one String long in certain label regardless of how long the actual last name is. I also have a default value loading from a database (PHP MySQL) which doesn't populate the field until they type something. Is there any help for that?

  4. #4
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, of course. For the first one, replace "= input.value" with e.g. "= input.value.substr(0, 99)" or any other number of choice. For the second, insert default value <label>here</label>. This will be removed as the user starts typing.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Closer than you think
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I did some reading and figured out how to do the if statement but I couldn't figure out how to bring it all together. Thank you for your help thus far.

    PHP Code:
    function update(input) {
        if (
    input.name == "lastname")
        {
        
    document.
            
    getElementById("k_" input.name).
                
    innerHTML 
                    
    input.value.substr(01)
        } else
        {
            
    document.
            
    getElementById("k_" input.name).
                
    innerHTML 
                    
    input.value
        
    }

    Now I got just the initial for the Last Name. Say my name is Johann Sebastian Bach.
    I would have 3 Ways to Display my name.

    Johann Sebastian Bach
    Johann S. Bach
    Johann B.

    How could I bring the three seperate names together? I did get the default labels working thank you! (The Form Fields are auto-populated as well)

  6. #6
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use string concatenation (+) and charAt function:
    Code:
    var first="Johann"
    var middle="Sebastian"
    var last="Bach"
    
    alert(first + " " + middle + " " + last)
    alert(first + " " + middle.charAt(0) + ". " + last)
    alert(first + " " + last.charAt(0) + ".")

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Closer than you think
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great that helps me greatly. I have a question though how do I set the variables from the form?

    Code:
    var first= k_first
    Thank you again for all your help Stereofrog

  8. #8
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var first = document.forms.YOUR_FORM_NAME.INPUT_NAME.value
    INPUT_NAME is first, last etc, not k_first etc which are label ids.

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Closer than you think
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're good! I think I got it all together now. Please let me know if this is the best way to peice it all together. I did change the label to better represent what they were.

    So now I have
    PHP Code:
    function update(input) {
        
            var 
    first document.forms.Profile.firstname.value
            
    var last document.forms.Profile.lastname.value
            
    var middle document.forms.Profile.middlename.value

            document
    .
            
    getElementById("FirstMiddleLast").
                
    innerHTML 
                    
    first " " middle " " last
            document
    .
            
    getElementById("FirstMiddleiLast").
                
    innerHTML 
                    
    first " " middle.substr(01) + ". " last
            document
    .
            
    getElementById("FirstLasti").
                
    innerHTML 
                    
    first " " last.substr(01) + "."

    So the labels should be named

    FirstMiddleLast
    FirstMiddleiLast
    FirstLasti

    Please evaluate this code.


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
  •