I have a json array
var data = [ { "id": "1", "label": 1, "value": "11.00" },
{ "id": "2", "label": 2, "value": "21.00" },
{ "id": "3", "label": 3, "value": "31.00" },
{ "id": "4", "label": 4, "value": "40.00" },
{ "id": "5", "label": 5, "value": "50.00" },
{ "id": "6", "label": 6, "value": "60.00" },
{ "id": "9", "label": 9, "value": "90.00" },
{ "id": "8", "label": 8, "value": "80.00" },
{ "id": "7", "label": 7, "value": "70.00" }
];
and a from
<form action="" method="POST">
Quantity1: <input type="text" name="quantity1" id="quantity1">
Product1: <select name="product1" id="product1"><option value="1">Product 1</option><option value="2">Product 2</option></select>
Price1: <input type="text" name="price1" id="price">
Quantity2: <input type="text" name="quantity2" id="quantity2">
Product2: <select name="product1" id="product2"><option value="1">Product 1</option><option value="2">Product 2</option></select>
Price2: <input type="text" name="price2" id="price">
.
.
.
<input type="submit" value="submit">
</form>
I want to auto populate the price for products. I am very sorry I don't know jquery and javascript much. Tried this but not worked
$( "#product1" ).change(function(){
source: data,
minLength: 1,
select: function( event, ui ) {
$('#price1').val( ui.item.value );
}
});
Please help me how can i populate the price1 id product 1 and price2 for product2.
Here is the code working for #product1
$('#product1').change(function() {
$('input[name="unit_price1"]').val(data[$(this).val()-1].value)
});
But once i try loop it can't my loop has something wrong.
$(function() {
var data = <?php echo $projects; ?>;
var nbProducts = data.length;
for(var iProduct = 0; iProduct < nbProducts; iProduct++) {
$('#product'+iProduct).change(function() {
$('input[name="unit_price'+iProduct+'"]').val(data[$(this).val()-1].value)
});
}
});
var data = [ { "id": "1", "label": 1, "value": "11.00" },
{ "id": "2", "label": 2, "value": "21.00" },
{ "id": "3", "label": 3, "value": "31.00" },
{ "id": "4", "label": 4, "value": "40.00" },
{ "id": "5", "label": 5, "value": "50.00" },
{ "id": "6", "label": 6, "value": "60.00" },
{ "id": "9", "label": 9, "value": "90.00" },
{ "id": "8", "label": 8, "value": "80.00" },
{ "id": "7", "label": 7, "value": "70.00" }
];
for(var i=0; i<data.length; i++) {
$('#product1').append('<option value="' + data[i].value + '">' + data[i].label+ '</option>');
$('#product2').append('<option value="' + data[i].value + '">' + data[i].label+ '</option>');
}
$('#product1').change(function() {
$('input[name="price1"]').val($(this).val())
});
$('#product2').change(function() {
$('input[name="price2"]').val($(this).val())
});
Perhaps you will approach this decision. Example: http://jsfiddle.net/YvZ9v/
You can bind the change event with such code :
$( "#product1" ).change(function() {
var nbProducts = data.length;
for(var iProduct = 0; iProduct < nbProducts; iProduct++) {
if(data[iProduct].id == this.value)
$('#price1').val( data[iProduct].value );
}
}
EDIT In order to loop over all products input, you just have to iterate like that :
var nbProducts = data.length;
for(var iProduct = 1; iProduct <= nbProducts; iProduct++) {
$('#product'+iProduct).change(function() {
// Same code as above...
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.