I have a form that has cloned fields, so duplicate id’s ending in _1, _2, etc for each field. Cloning is working absolutely fine, including having the related javascript applied to cloned fields.
When the "billing_unit" is selected, I need to draw the correct pricing for that unit from another table, based on the billing unit and the customer type. I figured out that the only way to do that was with an Ajax call on change of the select. When I change the select, the javascript is triggered and returns the following JSON (obviously, price varies based on selection):
success: true
price: "15.95"
An abbreviated version of the form containing the relevant fields, and the related javascript:
<form id="add_order_lines" role="form" method="post" action="" enctype="multipart/form-data" data-parsley-validate>
<div id="entry1" class="clonedInput_1">
<fieldset>
<div class="row">
<div class="form-group col-md-2">
<!-- Code to draw Business Types for Dropdown -->
<?php
$db->query('SELECT * FROM units ORDER BY id asc');
$unitresults = $db->fetchMultiple();
?>
<label class="label_billing_unit" for="billing_unit_1">Unit</label>
<select class="select_billing_unit form-control custom-select" id="billing_unit_1" name="orderbillingline[0][billing_unit]" required>
<option value="">Select</option>
<?php foreach($unitresults as $unitresult): ?>
<option value="<?php echo $unitresult['id']; ?>">
<?php echo $unitresult['unit_description']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group col-md-2" style="margin-bottom: 0px;">
<label class="label_billing_priceperunit" for="billing_priceperunit_1">Price:</label>
<input class="input_billing_priceperunit form-control" name="orderbillingline[0][billing_priceperunit]" id="billing_priceperunit_1" />
</div>
</div>
</fieldset>
</div>
</form>
Javascript
$('#add_order_lines').on('change keyup', 'select[id^=billing_unit]', function() {
var custType = $('#cust_type_id').val();
var row = $( this ).attr('id').split('_').slice(1);
var selectedValue = $(this).val();
$('#billing_priceperunit_' + row).val("");
$.ajax({
type: 'post',
url: 'php_pages/get_price_billing.php',
data: {'custtype': custType, 'billingunit': selectedValue},
dataType: 'json',
success: function(data){
if(data.success === true){
$('#billing_priceperunit_'+row).val(data.price);
}
}
});
});
PHP file
$form_errors = [];
$data = [];
//Collect and clean values from the form
$custtype = $_POST['custtype'];
$billingunit = $_POST['billingunit'];
$db->query("SELECT * FROM pricing WHERE cust_type_id = $custtype AND unit_id = $billingunit");
$db->bindvalue(':cust_type_id', $custtype, PDO::PARAM_INT);
$db->bindvalue(':unit_id', $billingunit, PDO::PARAM_INT);
$pricingrow = $db->fetchSingle();
$data['success'] = true;
$data['price'] = $pricingrow['price'];
echo json_encode($data);
2
Answers
change
to
and try
In the ROW you are getting the second element = "unit". You should to get the third element = "1" (whatever number).