select row table using ajax (jquery)

Question

I want to send(delete) id and p_type value from row table td value by using ajax. to detete row according to selected row

<table class="u-full-width" >
    <thead>
        <tr>
            <td hidden>id</td>
            <td>Printer name</td>
            <td>Click</td>
        </tr>
    </thead>

    <tbody>
        <?php 
            foreach ($value->result() as $row) { ?>
            <form>
             <tr>
                <td id="id" hidden><?php echo $row->ipt_id;?></td>
                <td id="p_type"><?php echo $row->ink_printer_type;?></td>
                <td><input id="submit" class="button-primary" type="submit" value="Delete"></td>
            </tr>
          </form>
        <?php } ?>
    </tbody>
</table>

and this is the ajax. I try to take value for each row but still not work. Can I use this way or if there is another way please tell me.

<script type="text/javascript">
    $('#submit').click(function(){
            console.log('submit clicked!!');
            id = $('#id').val();
            p_type = $('#p_type').val();

            value = [id ,p_type];
            //ajax POST
            $.ajax({
                url:'show_delete_printer_type_edit',
                type: 'POST',
                data: value,
                success: function() {

                    console.log('result is show!!');
                }
            });
    });   
</script>

Answer 1

Change .val() to .text()

id = $.trim( $('#id').text() );  //Remove leading and trailing space  using trim()
p_type = $.trim( $('#p_type').text() );

Note : ID must be unique so you have to change id to class in your code.

Answer 2

Do not assign same 'ids' to multiple 'tds'. Use dummy html attributes instead, which can be used in JavaScript and browser ignores them. Try this,

    <form>
    <table class="u-full-width" >
        <thead>
            <tr>
                <td hidden>id</td>
                <td>Printer name</td>
                <td>Click</td>
            </tr>
        </thead>

        <tbody>
            <?php 
                foreach ($value->result() as $row) { ?>                
                 <tr>
                    <td><?php echo $row->ipt_id;?></td>
                    <td><?php echo $row->ink_printer_type;?></td>
                    <td><input class="button-primary" type="button" value="Delete" data-id="<?php echo $row->ipt_id;?>" data-ptype="<?php echo $row->ink_printer_type;?>"></td>
                </tr>              
            <?php } ?>
        </tbody>
    </table>
  </form>

And in JavaScript change as this,

<script type="text/javascript">
    $('.button-primary').click(function(){
            console.log('submit clicked!!');
            id = $(this).attr('data-id');
            p_type = $(this).attr('data-ptype');

            value = [id ,p_type];
            //ajax POST
            $.ajax({
                url:'show_delete_printer_type_edit',
                type: 'POST',
                data: value,
                success: function() {
                    console.log('result is show!!');
                }
            });
    });   
</script>

Hope it works.

Answer 3

Your HTML will end up with multiple times the same ID, which is against standards and your jQuery will not know which id to take.

Also you can't have a form in tbody, it needs to be in a cell or outsite the table.

And you should not have the type of the button be submit, as you do not want to submit the form which would refresh the page, and you don't want that, cause you are using AJAX. Why use a form at all?

you can traverse the DOM to the closest table row ( $(this).closest(tr).find('.id') ) or use prev()

Change is to this:

<form><!--not needed, but perhaps you want it, if so, place it here and not in the tbody tag -->
<table class="u-full-width" >
    <thead>
        <tr>
            <td hidden>id</td>
            <td>Printer name</td>
            <td>Click</td>
        </tr>
    </thead>

    <tbody>
        <?php 
            foreach ($value->result() as $row) { ?>
             <tr>
                <td class="id" hidden><?php echo $row->ipt_id;?></td>
                <td class="p_type"><?php echo $row->ink_printer_type;?></td>
                <td><input class="button-primary" type="button" value="Delete"></td>
            </tr>
        <?php } ?>
    </tbody>
</table>
</form>

Jquery:

<script type="text/javascript">
    $('.button-primary').click(function(){
            console.log('submit clicked!!');
            id = $(this).prev('.id').text();
            p_type = $(this).prev('.p_type').text();

            value = [id ,p_type];
            //ajax POST
            $.ajax({
                url:'show_delete_printer_type_edit',
                type: 'POST',
                data: value,
                success: function() {

                    console.log('result is show!!');
                }
            });
    });   
</script>