PHP "Add More"

21/Şub/16 13:20

Kısayol

Şikayet

Özel Mesaj

Zande

Kayıt Tarihi: 16/Mayıs/2012

Hocam,

Basit bir fatura modülü tasarlıyorum, kendi kullanımım için. Ancak bu keseceğim faturada 1 satırda olabilir, 100 satırda. Bu durumda, 100 tane alanı ilk etapta oluşturmak saçma olacak. Bende dinamik olarak oluşturayım dedim. İlk satırda "Product No" seçildikten sonra, "Description" ve "Price" kısmı otomatik olarak yerlerine yazılıyor. Quantity hanesine miktarı yazınca da, "Amount" kısmına Price*Quantity bilgisi yazılıyor.

Fatura giriş şablonum şöyle:

<div class="table-striped" id="dataTable">
						<table class="table table-striped">
							<thead>
								<tr>
									<th>No</th>
									<th>Product No</th>
									<th>Description</th>
									<th>Price</th>
									<th>Quantity</th>
									<th>Amount</th>	
								</tr>
							</thead>
							<tbody id="ekleaq">
								<tr>
									<td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td>
									<td>
									
										<div class="col-xs selectContainer">
											<select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])">
												<?php
													while($row = $result1->fetch_assoc()){
														unset($id, $name, $ax1, $ax2);
														$id = $row['inv_products_id'];
														$name = $row['inv_products_no'];
														$ax1 = $row['inv_products_desc'];
														$ax2 = $row['inv_products_price'];
														echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>';
													}
												?>
											</select>
										</div>
									</td>
									<td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td>
									<td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td>
									<td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td>
									<td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td>
									<td><button type="button" class="btn btn-default addButton" id="ekle" ><i class="fa fa-plus"></i></button></td>

								</tr>										
							</tbody>
						</table>
					</div>

Daha sonra arkadaşların yardımı ile eklediğim "Add" butonu ile dinamik olarak yeni satırlar oluşturdum. Problem burada ortaya çıkıyor. Bu oluşturduğum yeni satırlarda "Product No" kısmını bir türlü database'den çağıramıyorum. Amacım onu da databaseden çağırıp, ilk satırda olduğu gibi "Description" ve "Price" kısmını da otomatik olarakyerlerine yazdırıp, quantity bilgisini girdikten sonra "Amount" miktarını hesaplaması.

JS kısmıda şöyle:

<script>
$("#ekle").click(function(){
	$("#ekleaq").append('<tr><td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td><td> \
	<div class="col-xs selectContainer"><select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])"> "<?php while($row = $result1->fetch_assoc()){ unset($id, $name, $ax1, $ax2);$id = $row['inv_products_id'];$name = $row['inv_products_no'];$ax1 = $row['inv_products_desc'];$ax2 = $row['inv_products_price'];echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>'; } ?>" </select> \
										</div></td><td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td><td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td><td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td><td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td></tr>');
});

function ShowData(obj)
{
    document.getElementById('decription1').value = obj.getAttribute('data-ax1');
    document.getElementById('price1').value = obj.getAttribute('data-ax2');
}

function CalculateData(input)
{
	price = document.getElementById('price1');
    quantity = document.getElementById('quantity1');
    amount1.value = price.value * quantity.value;
}

</script>

Alıntı yap

21/Şub/16 13:47

Kısayol

Şikayet

Özel Mesaj

ozgunlu

Banlanmış Üye

Kayıt Tarihi: 11/Kasım/2011

sayfa refresh olmadan sunucu tarafından işlem yaptırmak için ajax kullanman gerekiyor.

json ile taşıyacaksın objeleri, sonra append kısmına yerleştireceksin.

Hello, i am nothing. I come from Neverland.

Alıntı yap

21/Şub/16 13:58

Kısayol

Şikayet

Özel Mesaj

Zande

Kayıt Tarihi: 16/Mayıs/2012

Hocam, örnek verebilirmisin?

Alıntı yap

21/Şub/16 16:12

Kısayol

Şikayet

Özel Mesaj

Hybris

Kayıt Tarihi: 12/Haziran/2007

cevabını vermişler aslında stackoverflowda.

This means obviously that ShowData is not working for a dynamically added element.

<select name="productno1[]" class="form-control productdetail" id="Bname"></select>

dinamik olarak element append ettiğin için ShowData fonksiyonun çalışmıyor.

.on() kullanmalısın.

http://api.jquery.com/on/

$(document).on('change', '.productdetail', function () { 

alert( 'değiştim ben.' );

})

agile isn’t how fast you can go, it’s how fast you can turn.

Alıntı yap