How to make the functions of ajax independent since they are called by dynamic selects created by clone

1

I have a form with three input groups, the first ones are fixed, the second ones are dynamically generated by .clone and the third ones are fixed. The problem is the second group of inputs I have two select the first is filled by ajax query to select this fills the second select equal by ajax and selecting this last select fills three fields inputs in the same query ajax; when adding another row of inputs the ajax functions do not work correctly they are not independent of each row.

code split_ticket.js

var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".clonedInput").length;

function clone(){
    $(this).parents(".clonedInput").clone(true)
        .appendTo("div.clonar")
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*")
        .each(function() {
        var id = this.id || "";
        var match = id.match(regex) || [];
        if (match.length == 3) {
            this.id = match[1] + (cloneIndex);
        }
    })
    .on('click', 'a.remove', remove);
cloneIndex++;

}
function remove(){

    $(this).parents(".clonedInput").remove();
}
$("a.clone").on("click", clone);

$("a.remove").on("click", remove);

html code of the form

<div id="clonedInput1" class="clonedInput">
<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label for="inputUsername" class="control-label">
                Grower</label>
            <div class="input-icon right">
                <i class="fa fa-user-o"></i>
                <select id="tkt_grower0" class="form-control tkt_grower" 
name="tkt_grower[]" >
                    <option value="">Select grower</option>
                  <?php foreach ($all_growers as $grower ):
                   echo '<option 
value="'.$grower['gwh_id'].'">'.ucwords($grower['gwh_name']).'</option>';
                    endforeach;?>
                </select>
            </div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label for="inputUsername" class="control-label">
                Stack</label>
            <div class="input-icon right">
                <i class="fa fa-cubes"></i>
                <select id="tkt_stack0" class="form-control tkt_stack"     name="tkt_stack[]" >
                </select>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label for="inputUsername" class="control-label">
                Commodity</label>
            <div class="input-icon right">
                <i class="fa fa-bars"></i>
                <input id="tkt_commodity0" name="tkt_commodity[]" type="text" placeholder="" class="form-control tkt_commodity" readonly/></div>
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label for="inputUsername" class="control-label">
            Barn</label>
            <div class="input-icon right">
                <i class="fa fa-building"></i>
                <select id="tkt_barn0" class="form-control tkt_barn" name="tkt_barn[]">';
                </select>
            </div>
    </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label for="inputUsername" class="control-label">
            Bales</label>
            <div class="input-icon right">
                <i class="fa fa-square"></i>
                <input id="tkt_bales0" name="tkt_bales[]" type="text" placeholder="" class="form-control tkt_bales" /></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-2">
        <div class="form-group">
            <label for="inputUsername" class="control-label">
            Bales in Field</label>
            <div class="input-icon right">
                <i class="fa fa-user-o"></i>
                <input id="chd_balescount0" name="chd_balescount[]" type="text" placeholder="" class="form-control chd_balescount" readonly/></div>
        </div>
    </div>
    <div class="col-md-4">
    <div class="form-group">
            <label for="inputUsername" class="control-label">
            Name Location Hay</label>
            <div class="input-icon right">
                <i class="fa fa-cubes"></i>
                <input id="chd_haylocation0" name="chd_haylocation[]" type="text" placeholder="" class="form-control chd_haylocation" readonly/></div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="inputMore" class="control-label">
            Split</label>
            <div class="input-group">
                <a class="btn btn-primary clone"><i class="fa fa-plus"></i> More Lots</a> 
                <a class="btn btn-primary remove"><i class="fa fa-minus">    </i> Remove Lots</a>
            </div>
        </div>
    </div>
</div>
</div>

<div id="clonar" class="clonar">
</div>

ajax functions to fill the select

function carga_stack(val) {
    $.ajax({
        type: "GET",
        url: 'select_stack.php?module=find_stack',
        data: 'id='+val,
        success: function(resp){
            $('.tkt_stack').html(resp);
        }
    });
}

function carga_lote(val) {
    $.ajax({
        type: "GET",
        url: 'select_stack.php?module=find_lot',
        dataType: "json",
        data: 'id='+val,
        success: function(resp){
            $(".tkt_commodity").val(resp.chd_croptype);
            $(".chd_balescount").val(resp.chd_balescount);
            $(".chd_haylocation").val(resp.chd_haylocation);
        }
    });
}
    
asked by CharlieV98 28.06.2018 в 23:18
source

1 answer

0

Instead of passing the value, the object passes like this:

<select id="tkt_grower0" class="form-control tkt_grower" name="tkt_grower[]" onchange="carga_stack(this);">

Then in the ajax functions, you retrieve the value and use the element as selector like this:

function carga_stack(select) {

    var val = $(select).val();
    $.ajax({
        type: "GET",
        url: 'select_stack.php?module=find_stack',
        data: 'id='+val,
        success: function(resp){
            $(select').html(resp);
        }
    });
}
    
answered by 29.06.2018 в 00:52