Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    65
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Auto-typing from another field

    Hello yet again:

    I am working on a script involving autotyping and I am not sure how to develop the functionality properly. I have an idea but I can't seem to formulate the logic.

    I would like - when a user is typing his/her name in the "first name" field - to also have it populate (in real time) the "mailing salutation" field and the "label preview" area. Then, when they fill in the "last name" field it appends the last name to the first name in the "mailing salutation" area and also populates the "label preview" area.

    However, if the user decides to enter a different "mailing salutation" I would like only the "mailing salutation" and "label preview" area to change. The "first name" and "last name" fields should remain the same.

    How would I go about doing this, based on my current script:
    Code:
    <html>
    <head>
    
    <script src="jquery-1.9.1.min.js"></script>
    
        <script>
    
            $(document).ready(function() {
    
                var $letterSalutation = $("#letter-salutation");
                var $mailingSalutation = $("#mailing-salutation");
                var $labelPreviewFirstName = $("#label-preview-first-name");
    
                var $labelPreviewLastName = $("#label-preview-last-name");
    
                $("#first-name").keyup(function() {
                    $letterSalutation.val( this.value );
    
    				$mailingSalutation.val( this.value );
    
                    $labelPreviewFirstName.text( this.value );
                });
    
                $("#last-name").keyup(function() {
                    $labelPreviewLastName.text( this.value );
                });
    
            });
    
        </script>
    
    </head>
    
    <body>
    
    <div id="right">
    
    <form>
    
    <label for="first-name">First Name</label><br /> <input id="first-name" name="first-name" type="text" /><br /><br />
    
    <label for="last-name">Last Name</label><br /> <input id="last-name" name="last-name" type="text" /><br /><br />
    
    <label for="mailing-salutation">Mailing Salutation</label><br /> <input id="mailing-salutation" name="mailing-salutation" type="text" />
    
    </form>
    
    </div>
    
    
    <div id="left">
    
    <p>
    
    <span id="label-preview-first-name"></span> 
    
    <span id="label-preview-last-name"></span>
    
    </p>
    
    
    
    </div>
    
    </body>
    
    </html>
    Thanks!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,486
    Thanks
    23
    Thanked 636 Times in 635 Posts
    Code:
    <script>
        $(document).ready(function() {
            var $letterSalutation = $("#letter-salutation");
            var $mailingSalutation = $("#mailing-salutation");
            var $labelPreviewFirstName = $("#label-preview-first-name");
            var $labelPreviewLastName = $("#label-preview-last-name");
    		
            $("#first-name, #last-name").keyup(function() {
    			Up = $("#first-name").val()+ " "+$("#last-name").val();
                //$letterSalutation.val( this.value );
    			$mailingSalutation.val(Up);
                $labelPreviewFirstName.text(Up);
            });
    
        });
    </script>

  • Users who have thanked sunfighter for this post:

    spacepoet (03-26-2013)

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    65
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks! This worked like a charm! I had to revise it to also type from the "mailing-salutation" to the "label-preview" area only, but your code helped very much.

    Thanks!


  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    65
    Thanks
    7
    Thanked 0 Times in 0 Posts
    How do I mark a post as "Resolved" .. ??

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,486
    Thanks
    23
    Thanked 636 Times in 635 Posts
    Next to the title input box on left is a dropdown to do that. And thanks for your kind words.


  •  

    Posting Permissions

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