jeudi 18 octobre 2018

Can't update hidden checkbox name attribute with jquery

I am having trouble updating the name attribute of funding_status[0] in my cloned hidden checkbox input with class name of funding_status_hidden. I can update the normal input with class funding_status with the following js script. It also updates a bunch of other checkbox fields as intended - struggling to get this last one to change.

$(document).ready(function(){
var template = $('#products .product:first').clone();
var productsCount = $('.product').length-1; 

window.addProduct = function(){
    productsCount++;
    var product = template.clone().find(':input, .days').val('0').prop('checked', false).each(function(){

        var newId = this.id.substring(0, this.id.length-1) + productsCount;

        $(this).next(':input, label').attr('for', newId); // update label for
        $(this).next(".funding_status").attr('name', function() { return $(this).attr("name").substring(0, this.id.length-2) + "["+productsCount+"]" });
        $(this).next(".funding_status_hidden").attr('name', function() { return $(this).attr("name").substring(0, this.id.length-2) + "["+productsCount+"]" });


        this.id = newId; // update id and name (assume the same)



        $(this).find(".cloned_checkbox_hidden").attr("name", function() { return $(this).attr("name").substring(0, this.id.length-9) + "["+productsCount+"]" });
        $(this).find(".cloned_checkbox").attr("name", function() { return $(this).val('1').attr("name").substring(0, this.id.length-2) + "["+productsCount+"]" });




    }).end()
    .attr('id', 'product' + productsCount)
    .appendTo('#products');

}
$('.add').click(addProduct);
$("a#rp").click(function () {
    productsCount--;
if ($(".product").length != 1) {
$(".product:last").remove();
}
event.preventDefault();
});
});

HTML of cloned Div (cut down a bit to show the funding section I am trying to update)

<div id="product2" class="product m-b-20">
<div class="field is-horizontal">
    <div class="field is-horizontal">
        <div class="field-body">
            <div class="columns">
                <div class="column">
                    <div class="field">
                        <div class="control">
                            <label for="is-gov-funded" class="label">Funding</label> 
                            <div class="select is-fullwidth m-b-15">
                                    <select id="gov_fundin2" name="gov_funding[]" class="input funding_dropdown">
                                        <option value="0">-</option>
                                        <option value="III">III</option>
                                        <option value="HC">HC</option>
                                    </select>
                            </div>
                        </div>
                    </div>
                </div> 
                    <div class="column">
                        <div class="field">
                            <div class="control">
                                <label class="label">Funding Amount</label> 
                                    <input type="number" step="0.01" name="funding_amount[]" value="" class="input funding_amount" id="2">
                            </div>
                        </div>
                    </div> 
                <div class="column">
                    <div class="field">
                        <div class="control">
                            <label class="label has-text-white m-b-20">Funding Status</label> 
                                <input id="funding_status_hidden_2" name="funding_status[0]" type="hidden" value="0" class="is-checkradio is-link funding_status_hidden"> 
                                <input id="funding_status_2" name="funding_status[0]" type="checkbox" value="0" class="is-checkradio f_input funding_status is-link" for="gov_funding_status_hidden_2"> 
                                <label for="funding_status_2" class="label">Approved</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




Aucun commentaire:

Enregistrer un commentaire