調用JS素文字運行PHP文件，然後上傳HTML到相對行

Question

如果你能遵循這個...

基本上我有一個訂單（其中有一行開始）。

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

注意ID爲「add」的鏈接。選中時，這會向具有相同ID的表添加新行。使用下面的代碼。

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 for image preview 
    $("#prodcode").blur(function() { 
     var $this = $(this); 
     $this 
      .closest('tr') // find the parent tr 
      .find('td.imgsample') // find the imgsample in the row 
      .html($(this).attr('id')) // update the contents 
      //.animate({'opacity':1},200); 

     var imgsample = $this.closest('tr').find('td.imgsample') 

     $.post('/public/themes/lbd/js/searchimage.php', //this page reads the image code and gives you the image location 
       { action: 'searchimage', imgreference: $(this).val() }, 
       function(data) {imgsample.html(data);} 
       ); 
    }); 

我在searchimage PHP ...

當我目前輸入產品代碼，如果它是無效的，只把產品ID在td.imsample，我想它說無效代碼

//Find image based on Product Code 
function findimage($imageToFind) { 

    require '../../../../config.php'; 
    $dbh = new PDO(DB_DSN, DB_USER, DB_PASS); 

    $sql = "SELECT * FROM isproducts WHERE prodCode = ".strtoupper($imageToFind).""; 
    $stmt = $dbh->query($sql); 
    $obj = $stmt->fetch(PDO::FETCH_OBJ); 
    $count = $stmt->rowCount(); 
    if($count > 0) { 
     $sql2 = "SELECT * FROM imageindex WHERE filename LIKE '".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']); 

Answer 1

試試這個，可以有代碼錯誤，因爲我不能在所有的測試：

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 for image preview 
    var blur_event = function(ev) { 

     var 
      self = $(this), 
      imgsample = $("#ordertable tfoot .imgsample"); 

     $(imgsample).html($(this).class()); // update the contents 


     $.post('/public/themes/lbd/js/searchimage.php', //this page reads the image code and gives you the 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; 

    }); 

}); 

Answer 2

你的問題很可能是由於重複的ID。這使得你的HTML文件無效。看到我的解釋here。