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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts

    Help with FORM selection

    Im working on a script where, when you click an image, it automatically enters the text "FOO BAR" into a form field. How can I make it so just "FOO" is highlighted when this text is entered? Here's my current code:

    Code:
    <div>
    <img src="/images/file.png" name="image" onClick="sendText(document.search.q, 'FOO BAR')">
    </div>
    Thanks in advance =]

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Any ideas?

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by jrp1 View Post
    Code:
    <div>
    <img src="/images/file.png" name="image" onClick="sendText(document.search.q, 'FOO')">
    </div>
    at a guess, maybe change it as shown above?

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Hahahah =p

    No, I need both words to be inserted into the form via Javascript, but only the word "FOO" to be highlighted.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Ahhh, yes, thats exactly what im looking for.

    How do I make this work in my script though? I'm new to Javascript. Any help is appreciated, thanks =]

    [EDIT] I tried implementing it into the script, but instead of sending the text to the form and highlighting "FOO", it submitted both words, "FOO BAR". How do I implement this into the sendText script above?
    Last edited by jrp1; 05-09-2009 at 05:00 AM.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <script type="text/javascript">
    
    function createSelection(start, end, field) {
    
        if ( field.createTextRange ) {
    
            /* 
            IE calculates the end of selection range based from the starting point.
            Other browsers will calculate end of selection from the beginning
            of given text node.
            */
    
            var newend = end - start;
            var selRange = field.createTextRange();
            selRange.collapse(true);
            selRange.moveStart("character", start);
            selRange.moveEnd("character", newend);
            selRange.select();
        } 
    
        /* For the other browsers */
    
        else if( field.setSelectionRange ){
    
            field.setSelectionRange(start, end);
        } 
    
        field.focus();
    }
    
    function sendText(field, text, selection)
    {
       var start = text.indexOf(selection);
       var end = start + selection.length;
       field.value = text;
       createSelection(start, end, field);
    }
    
    
    </script>
    </head>
    <body>
    <img src="http://www.drinkprices.com/users/3/photos/466.jpg" width="200" 
    style="cursor:pointer;margin-bottom:12px;" onclick="sendText(document.search.q, 'FOO BAR', 'FOO')">
    <form name="search">
    <input name="q" type="text" />
    </form>
    </body>
    </html>
    Credit Webcloud if you use this.

  • Users who have thanked adios for this post:

    jrp1 (05-09-2009)

  • #8
    New Coder
    Join Date
    Jul 2008
    Posts
    55
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Ahhh, you're awesome. lol@ the picture too btw.

    Thanks for your help, and ill credit Webcloud.


  •  

    Posting Permissions

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