我创建了一个简单的网页,一次添加一个产品。用户只需要输入产品名称,所有产品信息都将通过AJAX获得。我使用了jQuery AJAX,它可以工作。
但是现在用户希望在行的末尾有一个按钮,以便他们可以在同一页面中添加许多产品。因此,当他们想要再添加一个产品时,只需点击该按钮,下面就会出现一个新行,供他们添加产品。
任何一个例子?
由于
答案 0 :(得分:1)
有很多可能性。这是一。 我不知道你想在哪里计算你的小计。和折扣。它可以在javascript中完成,也可以通过php完成。这是你的选择。
$(document).on("change", ".cboProdc", function(e){ // As you change the select box element
$("*").removeClass("active");//Remove active class from all elements in the DOM
$(this).parent().addClass("active");//Add active for a div container parent
//Add active for each input som form active div
$(".active .txtPrice").addClass("active");
$(".active .txtDisc").addClass("active");
$(".active .txtSugDisc").addClass("active");
$(".active .txtQt").addClass("active");
$(".active .txtStot").addClass("active");
//Make your AJAX request to PHP.
//Send to PHP id product like this $("option:selected", this).val();
var dt={
productId: $("option:selected", this).val()
};
//Ajax
var request =$.ajax({//http://api.jquery.com/jQuery.ajax/
url: "yourServer.php",
type: "POST",
data: dt,
dataType: "json"
});
//Retrieve all information through JSON and put it in each active element.
//Ajax Done catch JSON from PHP
request.done(function(dataset){
for (var index in dataset){
txtPrice=dataset[index].Price;
txtDisc=dataset[index].Discount;
txtSugDisc=dataset[index].SugDisc;
txtQt=dataset[index].Quanty;
txtStot=dataset[index].Stot;//If you want to use php to perform the calculus
}
//JavaScript conditions. Here you can control the behaivior of your html object, based on your PHP response and pass values to acvive elements
$(".active .txtPrice").val(txtPrice);
$(".active .txtDisc").val(txtDisc);
$(".active .txtSugDisc").val(txtSugDisc);
$(".active .txtQt").val(txtQt);
$(".active .txtStot").val(txtStot);
});//End of request.done(...
});//End of $(document).on("change",
///////////////////////////////////////////////////////////////////////////////////
//Your php code
//Make your query at database
//Return like this:
$arrToJSON = array(
"Price"=>"the price",
"Discount"=>"the Discount",
"SugDisc"=>"the SugDisc",
"Quanty"=>"the Quanty",
"txtStot"=>"the txtStot",
);
return json_encode(array($arrToJSON));
//////////////////////////////////////////////////////////////////////////////////////
要保存所有信息,请为每个元素创建一个.each()http://api.jquery.com/each/,将每个信息重新设置为使用分隔符发送到php。例“*” 在php中你可以使用explod http://php.net/manual/en/function.explode.php 在这里,您可以使用小提琴http://jsfiddle.net/hp5kbtce/1/来查看如何为每个产品行选择元素