View Full Version : Help with FORM selection

05-09-2009, 04:00 AM
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:

<img src="/images/file.png" name="image" onClick="sendText(document.search.q, 'FOO BAR')">

Thanks in advance =]

05-09-2009, 04:55 AM
Any ideas?

05-09-2009, 05:11 AM
<img src="/images/file.png" name="image" onClick="sendText(document.search.q, 'FOO')">

at a guess, maybe change it as shown above?


05-09-2009, 05:16 AM
Hahahah =p

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

05-09-2009, 05:20 AM

05-09-2009, 05:24 AM
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?

05-09-2009, 06:33 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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.moveStart("character", start);
selRange.moveEnd("character", newend);

/* For the other browsers */

else if( field.setSelectionRange ){

field.setSelectionRange(start, end);


function sendText(field, text, selection)
var start = text.indexOf(selection);
var end = start + selection.length;
field.value = text;
createSelection(start, end, field);

<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" />

Credit Webcloud if you use this.

05-09-2009, 07:01 AM
Ahhh, you're awesome. lol@ the picture too btw.

Thanks for your help, and ill credit Webcloud.