Question

Hi I have a table that has trs and IDs embedded to it. My insertion is working the problem I had now is it always repeat the record it shouldn’t be repeating.

    $('#list-tbl tr').each(function(){
    var $this = $(this);
    var ID = $(this).attr("id");
    var yes = $('#ckboxyes'+ID).val();
    var no = $('#ckboxno'+ID).val();
    var rep = $('#ckboxrep'+ID).val();
    var user_id = $('#user_id'+ID).val();
    var rep_id = $('#rep_id').val();

        $('input[type=checkbox]', $this).change(function(){
            if($('.ckboxyes'+ID, $this).is(':checked')){
                $('input[type=checkbox]', $this).prop('disabled',true);
                $.ajax({
                    type: "POST",
                    url: "<?= MAINSITE_INDEX.'tech/updater'?>",
                    data: "yes=" + yes + "&no=" + no+ "&rep=" + rep + "&rep_id=" + rep_id + "&user_id=" + user_id + "&did=" +ID,
                    success: function(){
                        $('form#submit').hide();
                            alert(ID);
                        $('div.success').fadeIn();   
                    }
                });
                $(this).prop('disabled',false);
            } else if($('.ckboxno', $this).is(':checked')) {
                $('input[type=checkbox]', $this).prop('disabled',true);
                $(this).prop('disabled', false);
            } else if($('.ckboxother', $this).is(':checked')) {
                $('input[type=checkbox]', $this).prop('disabled',true);
                $(this).prop('disabled', false);
                $('select[name=proxy]', $this).attr('disabled', false);
            } else {
                $('input[type=checkbox]', $this).prop('disabled',false);
                $(this).prop('disabled',false);
                $('select[name=proxy]', $this).attr('disabled', true);
            }
        });
});



<th>Day 1</th>

<th>Attended</th>

        <tr style="font-size: 10px;" id="1">

        <td width="450px;">Description 1</td>

        <td>

            <input type="hidden" name="user_id" id="user_id" value="1" />

            <input type="checkbox" name="ckboxyes1" id="ckboxyes1" class="ckboxyes1" value="1" style="width: auto;" /> Yes

            <input type="checkbox" name="ckboxno1" id="ckboxno1" class="ckboxno1" value="1" style="width: auto;" /> No

            <input type="checkbox" name="ckboxother1" id="ckboxother1" class="ckboxother1" value="1" style="width: auto;" /> Other

            <select name="rep_id" style="width: auto;" disabled="true">

                <option value="">Select</option>

                <option value="3">User A</option>

                <option value="4">User B</option>

            </select>

            <input type="submit" name="submit" id="submit" value="Go" disabled="true" class="stylish" />

        </td>

    </tr>

        <tr style="font-size: 10px;" id="2">

        <td width="450px;">Description 1</td>

        <td>

            <input type="hidden" name="user_id" id="user_id" value="1" />

            <input type="checkbox" name="ckboxyes2" id="ckboxyes2" class="ckboxyes2" value="1" style="width: auto;" /> Yes

            <input type="checkbox" name="ckboxno2" id="ckboxno2" class="ckboxno2" value="1" style="width: auto;" /> No

            <input type="checkbox" name="ckboxother2" id="ckboxother2" class="ckboxother2" value="1" style="width: auto;" /> Other

            <select name="rep_id" style="width: auto;" disabled="true">

                <option value="">Select</option>

                <option value="3">UserA</option>

                <option value="4">UserB</option>

            </select>

            <input type="submit" name="submit" id="submit" value="Go" disabled="true" class="stylish" />

        </td>

    </tr>

The problem I had now is when everytime I tick a checkbox it will insert to database the first value. The table should be long I just shorten it for time purpose(s).

Thanks..

Answer 1

try

$(function(){      


        $(':checkbox').change(function(){
             var $this = $(this).closest("tr");
             var ID = $(this).closest("tr").attr("id");
             var yes = $('#ckboxyes'+ID).val();
             var no = $('#ckboxno'+ID).val();
             var rep = $('#ckboxrep'+ID).val();
             var user_id = $('#user_id'+ID).val();
             var rep_id = $('#rep_id').val();
            if($('.ckboxyes'+ID, $this).is(':checked')){
                $('input[type=checkbox]', $this).prop('disabled',true);
                $.ajax({
                    type: "POST",
                    url: "<?= MAINSITE_INDEX.'tech/updater'?>",
                    data: "yes=" + yes + "&no=" + no+ "&rep=" + rep + "&rep_id=" + rep_id + "&user_id=" + user_id + "&did=" +ID,
                    success: function(){
                        $('form#submit').hide();
                            alert(ID);
                        $('div.success').fadeIn();   
                    }
                });
                $(this).prop('disabled',false);
            } else if($('.ckboxno', $this).is(':checked')) {
                $('input[type=checkbox]', $this).prop('disabled',true);
                $(this).prop('disabled', false);
            } else if($('.ckboxother', $this).is(':checked')) {
                $('input[type=checkbox]', $this).prop('disabled',true);
                $(this).prop('disabled', false);
                $('select[name=proxy]', $this).attr('disabled', false);
            } else {
                $('input[type=checkbox]', $this).prop('disabled',false);
                $(this).prop('disabled',false);
                $('select[name=proxy]', $this).attr('disabled', true);
            }
        });
});

you dont have to .each to bind the change event

DEMO