Andy Andy - 5 months ago 6
jQuery Question

Create a link on the fly when a user enters a code in a form box

I have a form....

<form id="orderform" method="post" orderform="" name="">
<table width="533" cellspacing="0" cellpadding="2" border="0" id="ordertable">
<tbody>
<tr>
<td>Product Code</td>
<td>Meterage</td>
<td>Sample Img</td>
</tr>
<tr class="item">
<td class="prodcode">
<input type="text" id="prodcode" name="prodcode">
</td>
<td class="meterage">
<input type="text" id="meterage" name="meterage">
</td>
<td class="imgsample"></td>
</tr>
</tbody>
</table>
</form>


What i would like is when a user clicks out of the box on the prodcode it searches a folder for the image reference...creates a link on under the imgsample header for that particular item using the prodCode they entered...

http://www.mylink.com/images/folder/sub-folder/imageref.jpg

Is this an impossible task, any ideas?

Answer

I hope this is what you are asking for.

$("#prodcode").blur(function() {
  $.post(
         'yourpage.php', //this page reads the image code and gives you the image location
         { action: 'searchimage', imgreference: $('#prodcode').val() },
         function(data) { 
             //export the link as data            
             $("td.imgsample").html('<img src="'+data+'"/>');
         }
        );
});