November 16, 2010

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

Question by Andy

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 by Starx

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!