skip to Main Content

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


  1. change

    var row = $( this ).attr('id').split('').slice(1); 
    

    to

     var row = $( this ).attr('id').split('_').pop();
    

    and try

    $('#billing_priceperunit_'+row).val(data[0].price);
    
    Login or Signup to reply.
  2. In the ROW you are getting the second element = "unit". You should to get the third element = "1" (whatever number).

    var row = $( this ).attr('id').split('_').slice(2);
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search