I'm a newbie in programming. I have a select element populated by php. I have a function to append this select tag inside a div.
what I want to do is whenever the onchange event is triggered on the select element, it will display the database record inside each textbox.
I already did this using single id attribute. but how do I do it on the other appended element using the class attribute?
below is my code.
HTML CODE:
<input type='button' value='Add Another Product' id='aprod'>
<table id='page3_inside'>
<tr id='ln1'>
<td>
<label for="product_name">Product Name</label><br>
<select class='input' style='width:150px; height:34px;' id='name_of_product' name="name_of_product[]">
<option value="">Select from List</option>
<?php
$qry = $handler->prepare('SELECT * FROM product_list WHERE plist_compid = ?');
$qry->execute(array($id));
while($row = $qry->fetch(PDO::FETCH_ASSOC)){
$pname = $row['plist_name'];
echo "<option value='$pname'>$pname</option>";
}
?>
</select>
</td>
<td>
<label for="product_cat">Product Category</label><br>
<select class="input" id="product_category" name="product_category[]" style="font-family:verdana; width:150px; height:34px; border: 1px solid #000000;">
<optgroup label="Apparel">
<option value="Footwear">Footwear</option>
<option value="Underwear">Underwear</option>
<option value="Outerwear">Outerwear</option>
<option value="Cloth">Cloth</option>
<option value="Jewelry">Jewelry</option>
<option value="Headwear">Headwear</option>
<option value="Eyewear">Eyewear</option>
<option value="Legwear">Legwear</option>
<option value="Blanket">Blanket</option>
<option value="Carpet">Carpet</option>
<option value="Sport Series">Sport Series</option>
</optgroup>
</select>
</td>
<td>
<label for="qty">Qty</label><br>
<input type="text" value="" class="input" style="width:100px;" id="qty" name="qty[]" placeholder="Qty" onkeypress="return isNumberKey(event)"/>
</td>
<td>
<label for="unit">Unit</label><br>
<select class="input" style="width:100px;height:34px;" id="unit" name="unit[]">
<option value="Piece/s" disabled>Piece/s</option>
<option value="Roll/s" disabled>Roll/s</option>
<option value="Set/s" disabled>Set/s</option>
<option value="Pair/s" disabled>Pair/s</option>
<option value="Box/es" disabled>Box/es</option>
</select>
</td>
<td>
<label for="brand">PO Number</label><br>
<input type="text" value="" class="input" id="po" name="po[]" placeholder="PO Number" style='width:150px; height:28px;'/>
</td>
<td>
<img src='htm_files/del.png' class='del' width='30px' style='cursor:hand;cursor:pointer;'>
</td>
</tr>
</table>
JQUERY CODE
$('#name_of_product').on('change', function(event){
event.preventDefault();
var prodname = $(this).val();
var cid = $('#compid').val();
$.ajax({
url : 'ajaxrequests.php',
type : 'POST',
datatype : 'JSON',
data : {
psearch : 1,
product : prodname,
compid : cid
},
success : function(show){
$('#name_of_product').val(show.plist_name);
$('#product_category').val(show.plist_category);
$('#Category_of_the_Product').val(show.plist_category);
$('#PO').val(show.plist_po);
$('#brand').val(show.plist_brand);
}
});
});
$('#aprod').on('click', function() {
$('#ln1').clone().appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
ajaxrequests.php
if (isset($_POST['psearch'])) {
if (!empty($_POST['product']) && !empty($_POST['compid'])) {
$showprod = $_POST['product'];
$showid = $_POST['compid'];
$qry = $handler->prepare("SELECT * FROM product_list WHERE plist_name = ? AND plist_compid = ?");
$qry->execute(array($showprod,$showid));
$rows = $qry->fetch(PDO::FETCH_ASSOC);
header("Content-type: text/x-json");
echo json_encode($rows);
exit();
}
}
thanks..
答案 0 :(得分：1)
然后你需要复制id名称定义并粘贴到类似html的类定义中（参见class attribute）：
<input type='button' value='Add Another Product' id='aprod'>
<table id='page3_inside'>
<tr id='ln1'>
<td>
<label for="product_name">Product Name</label><br>
<select class='input name_of_product' style='width:150px; height:34px;' id='name_of_product' name="name_of_product[]">
<option value="">Select from List</option>
<?php
$qry = $handler->prepare('SELECT * FROM product_list WHERE plist_compid = ?');
$qry->execute(array($id));
while($row = $qry->fetch(PDO::FETCH_ASSOC)){
$pname = $row['plist_name'];
echo "<option value='$pname'>$pname</option>";
}
?>
</select>
</td>
<td>
<label for="product_cat">Product Category</label><br>
<select class="input product_category" id="product_category" name="product_category[]" style="font-family:verdana; width:150px; height:34px; border: 1px solid #000000;">
<optgroup label="Apparel">
<option value="Footwear">Footwear</option>
<option value="Underwear">Underwear</option>
<option value="Outerwear">Outerwear</option>
<option value="Cloth">Cloth</option>
<option value="Jewelry">Jewelry</option>
<option value="Headwear">Headwear</option>
<option value="Eyewear">Eyewear</option>
<option value="Legwear">Legwear</option>
<option value="Blanket">Blanket</option>
<option value="Carpet">Carpet</option>
<option value="Sport Series">Sport Series</option>
</optgroup>
</select>
</td>
<td>
<label for="qty">Qty</label><br>
<input type="text" value="" class="input qty" style="width:100px;" id="qty" name="qty[]" placeholder="Qty" onkeypress="return isNumberKey(event)"/>
</td>
<td>
<label for="unit">Unit</label><br>
<select class="input unit" style="width:100px;height:34px;" id="unit" name="unit[]">
<option value="Piece/s" disabled>Piece/s</option>
<option value="Roll/s" disabled>Roll/s</option>
<option value="Set/s" disabled>Set/s</option>
<option value="Pair/s" disabled>Pair/s</option>
<option value="Box/es" disabled>Box/es</option>
</select>
</td>
<td>
<label for="brand">PO Number</label><br>
<input type="text" value="" class="input po" id="po" name="po[]" placeholder="PO Number" style='width:150px; height:28px;'/>
</td>
<td>
<img src='htm_files/del.png' class='del' width='30px' style='cursor:hand;cursor:pointer;'>
</td>
</tr>
</table>
JS功能应该是：
// this selector should change into event delegation dynamically added element
$('#page3_inside').on('change','.name_of_product', function(event){
event.preventDefault();
var prodname = $(this).val();
var cid = $('#compid').val(); // not found this in html
// should use this to find parent for current element,
// and this is the main part(to find only current match element)
var $this = $(this).closest('tr');
$.ajax({
url : 'ajaxrequests.php',
type : 'POST',
datatype : 'JSON',
data : {
psearch : 1,
product : prodname,
compid : cid
},
success : function(show){
// using $this as this would refer to previous context,
// and find the sibling element only
// Here you need to find element to attach the data
// i could't find the match id in your html snippet
// try this first
$this.find('.name_of_product').val(show.plist_name);
$this.find('.product_category').val(show.plist_category);
$this.find('.Category_of_the_Product').val(show.plist_category);
$this.find('.PO').val(show.plist_po);
$this.find('.brand').val(show.plist_brand);
}
});
});
$('#aprod').on('click', function() {
// Better use .first() to copy the first tr element
// $('#ln1').first().clone().appendTo('#page3_inside');
// change if you want
$('#ln1').clone().appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});