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 cl开发者_开发百科ass="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?

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+'"/>');
         }
        );
});

bind to the blur event of the prodcode input,
when it blurs issue an ajax call to the server to get the right Url
and at the callback just build the link and set it as the html of .imgsample

If you want a link and you need to ensure it isd the closest table cell that gets it and you have latest jquery you could try something like

$("#prodcode").bind("blur", function() {
    var linkStr = "<a href="http://www.mylink.com/images/folder/sub-folder/"+ $("#prodcode").val()+".jpg";
    $("#prodcode").closest("td.imgsample").html(linkStr);
});