当用户在表单框中输入代码时，动态创建链接

问题描述：

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?

答

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);
});

当用户在表单框中输入代码时，动态创建链接

相关推荐