How to add values to a textbox by clicking on images?

[ronnie98]

Hi all,
i have these images in table's cells:

<table>
  <tr>
    <td>
    <img src="image1.gif" />
    </td>
    <td>
    <img src="image2.gif" />
    </td>
    <td>
    <img src="image3.gif" />
    </td>
  </tr>
</table>

and this form below:

<form id="myform" name="myform">
<input name="mytextbox" value="mytextbox">
</form>

The textbox value will be obtained by clicking
on the images above so:

image1 will add "text1" (without quotes) to the textbox
 image2 will add "text2" (without quotes) to the textbox
 and so on...

the final value of the textbox should be:

text1,text2,tex3,....

Hope you can help me.
Thanks in advance,ronnie.

 

[cLFlaVA]

function should look something like this:

function addValueToTextBox( val ) {
    var tb = document.forms['myform'].elements['mytextbox'];
    if ( tb.value.indexOf( val ) == -1 ) {
        if ( tb.value.length > 0 ) tb.value += ", ";
        tb.value += val;
    }
}

calls to function should look something like this:

<table>
  <tr>
    <td>
    <img src="image1.gif" onclick="addValueToTextBox('text1');" />
    </td>
    <td>
    <img src="image2.gif" onclick="addValueToTextBox('text2');" />
    </td>
    <td>
    <img src="image3.gif" onclick="addValueToTextBox('text3');" />
    </td>
  </tr>
</table>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ronnie98]

Thank you cLFlaVA,
it works fine but it misses 2 things:
1)it actually doesn't allow multiple insertions
for the same text so you cannot have:

text1,text2,text3,text2,text1,text1,....

but only

text1,text2,text3,text4,....

2)Is it possible to have text insertions on the exact point where the cursor stands in the textbox?
It actually adds insertions consecutively
It would be better to have them mixed.

I apologize for my non-perfect english.
ATB,ronnie.

 

[cLFlaVA]

Your English is fine. Your functional requirements, on the other hand, will be somewhat difficult. To add multiple instances, simply change your function to this:

function addValueToTextBox( val ) {
    var tb = document.forms['myform'].elements['mytextbox'];
    if ( tb.value.length > 0 ) tb.value += ", ";
    tb.value += val;
}

The exact entry point, however, would take some work, and even if I could get it to work, it would only function correctly in IE.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ronnie98]

Thank you again,
this 2nd version of your code works fine;
the entry point issue doesn't really matters,in the end.
ATB,ronnie.