jquery - Calling a JS scipt to run a php file and then post html to the relative row -

follow if can...

basically have order form (which begins 1 row).

<form id="orderform" name"orderform" action="/secure/delivery-details.html" method="post"> <a  id="add">+</a>  <table id="ordertable" width="533" border="0" cellspacing="0" cellpadding="2">   <tbody>     <tr>       <td width="33%">product code (e.g 66203)</td>       <td width="33%">mtrs required (e.g 10)</td>       <td width="33%">preview image</td>     </tr>     <tr class="item">       <td class="prodcode"><input type="text" name="prodcode[]" id="prodcode" /></td>       <td class="meterage"><input type="text" name="meterage[]" id="meterage" /></td>       <td class="imgsample"></td>     </tr>     </tbody>   </table>   <button>submit</button> </form> 

notice link id of "add". when checked adds new row table same id. using code below.

    var counter = 0;     //order form     $("#add").click(function() {         counter++;         var cln = $('#ordertable tbody>tr:last').clone(true); //        cln.find("[id^='prodcode']").each(function(i, val) { //          val.id = val.id.match(/^([^0-9]+)[0-9]*$/)[1] + "" + counter; //      });         cln.insertafter('#ordertable tbody>tr:last');         $('#ordertable tbody>tr:last input').val('');         $('td.imgsample:last a').remove();         return false;     });      //check image preview     $("#prodcode").blur(function() {         var $this = $(this);         $this             .closest('tr') // find parent tr             .find('td.imgsample') // find imgsample in row             .html( $(this).attr('id')) // update contents             //.animate({'opacity':1},200);          var imgsample = $this.closest('tr').find('td.imgsample')          $.post('/public/themes/lbd/js/searchimage.php', //this page reads image code , gives image location                  { action: 'searchimage', imgreference: $(this).val() },                 function(data) {imgsample.html(data);}                 );     }); 

my php in searchimage...

when enter product code if invalid puts productid in td.imsample , want invalid code

//find image based on product code function findimage($imagetofind) {     require '../../../../config.php';   $dbh = new pdo(db_dsn, db_user, db_pass);    $sql = "select * isproducts prodcode = ".strtoupper($imagetofind)."";    $stmt = $dbh->query($sql);   $obj = $stmt->fetch(pdo::fetch_obj);   $count = $stmt->rowcount();   if($count > 0) {       $sql2 = "select * imageindex filename '".strtoupper($imagetofind)."-%'";        $stmt2 = $dbh->query($sql2);       $obj2 = $stmt2->fetch(pdo::fetch_obj);       echo ($stmt2->rowcount() == 1 ? '<a href="'.url_public.$obj2->path.'/'.$obj2->filename.'" class="customgal imgfound"><span>'.$obj2->path.'/'.$obj2->filename.'</span></a>&nbsp;<a href="#" class="del">-</a>' : 'no image available');       } else {      echo 'invalid code';   }  }  //call function findimage($_post['imgreference']); 

try this, can have code errors since not test @ all:

jquery template

html:

<script id="template-item" type="text/x-jquery-tmpl">   <tr class="item" id="${id}">     <td class="prodcode"><input type="text" name="prodcode[]" class="prodcode-input" data="${id}" val="" /></td>     <td class="meterage"><input type="text" name="meterage[]" class="meterage-input" val="" /></td>   </tr> </script>  <form id="orderform" name"orderform" action="/secure/delivery-details.html" method="post">  <a href="#" id="add">+</a>  <table id="ordertable" width="533" border="0" cellspacing="0" cellpadding="2">     <thead>       <tr>         <th width="33%">product code (e.g 66203)</th>         <th width="33%">mtrs required (e.g 10)</th>         <th width="33%">preview image</th>       </tr>     </thead>     <tbody>     </tbody>     <tfoot>        <td class="imgsample"></td>     </tfoot>   </table>   <button>submit</button> </form> 

js:

$(function() {      var counter = 0;      //check image preview     var blur_event = function(ev) {          var            self = $(this),           imgsample = $("#ordertable tfoot .imgsample");          $(imgsample).html( $(this).class() ); // update contents           $.post('/public/themes/lbd/js/searchimage.php', //this page reads image code , gives image location             { action: 'searchimage', imgreference: $(self).val() },             function(data) {                $(imgsample).html(data);             }         );          return false;      };      //order form     $("#add").bind("click", function(ev) {          counter++;          var cln = $('#template-item').tmpl({id:"item-"+counter);  //      cln.find("[id^='prodcode']").each(function(i, val) { //          val.id = val.id.match(/^([^0-9]+)[0-9]*$/)[1] + "" + counter; //      });          $(cln).find(".prodcode-input").bind("blur", blur_event);          $(cln).appendto('#ordertable tbody');          return false;      });  });