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