How to embed images dynamically into a table?

Question

I've searched around a lot on this but haven't found an answer that works in my case. Hope someone can help.

I have a form and I'm looking to have images displayed dynamically within the form's table using Javascript.

For instance, in the code below:

<td class='ee122'>
<img src="images/cnn.JPG">
</td>

I need "cnn" replaced with a different value based on user input elsewhere on the form, and the replacement value is based on the following code:

<input value="" name="XLEW_5_3_6" id="XLEW_5_3_6" type="text" tabindex="-1"  
readonly="readonly" style='overflow:hidden; border:0px solid #000000;
 width:100% ' class='ee102'>

Can I incorporate this into the first code somehow, either by concatenating the input id or by other means? I just need to the images to be displayed dynamically. Thanks.

Answer 1

<td class='ee122'>
<img id="tableimage" src="images/cnn.JPG">
</td>

add id for the image

<input value="" name="XLEW_5_3_6" id="XLEW_5_3_6" type="text" tabindex="-1"  
readonly="readonly" style='overflow:hidden; border:0px solid #000000;
 width:100% ' class='ee102' onchange="changeImage()">

then create javascript function to change image

function changeImage(){
    document.getElemtnById('tableimage').setAttribute('src', document.getElemtnById('XLEW_5_3_6').getAttribute('value'));
}

or you can use jQuery for easier implement

$('#XLEW_5_3_6').change(function(){
    $('#tableimage').attr('src', $(this).val());
})

Answer 2

Ok, I solved it after tweaking the code a bit. Below is future reference for anyone with a similar issue:

function changeImage() {
document.getElementById('tableImage').setAttribute('src', document.formc.XLEW_5_3_6.value);
}

Thanks to everyone!