CODEWITHSUNDEEP
phpjqueryhtmlajax
Rico Krouweel
Rico Krouweel

Reputation: 102

Ajax send table row with POST method

I have a form and in this form I have a table. Now I have Ajax to send with POST method the value on change.

But sometimes my table is filled with 50 results, so it will sent alot of data everytime I change an input field.

Is it possible to send only the values in the row that i'm changing instead of sending all the data of the table?

AJAX:

    (function($){
        function urenForm( e ){
            $.ajax({
                url: 'blank.php',
                dataType: 'json',
                type: 'post',
                data: $(this).serialize(),
                success: function( data, textStatus ){

                }
            });
            e.preventDefault();
        }
        $('#urenForm').change( urenForm );
    })(jQuery);

HTML:

This is 1 row.


 <tr>
      <td><input type='number' id='resourceid_<?php echo $trCode; ?>' name='<?php echo $trCode; ?>[resourceid]' class='form-control' value='' readonly></td>     
      <td><input type='number' id='base_<?php echo $trCode; ?>'       name='<?php echo $trCode; ?>[base]'       class='form-control' value=''></td>
      <td><input type='number' id='lot_<?php echo $trCode; ?>'        name='<?php echo $trCode; ?>[lot]'        class='form-control' value=''></td>
      <td><input type='number' id='split_<?php echo $trCode; ?>'      name='<?php echo $trCode; ?>[split]'      class='form-control' value=''></td>
      <td><input type='number' id='sub_<?php echo $trCode; ?>'        name='<?php echo $trCode; ?>[sub]'        class='form-control' value=''></td>
      <td><input type='number' id='seq_<?php echo $trCode; ?>'        name='<?php echo $trCode; ?>[seq]'        class='form-control' value=''></td>    
      <td><input type='number' id='indirect_<?php echo $trCode; ?>'   name='<?php echo $trCode; ?>[indirect]'   class='form-control' value=''></td>
      <td><input type='date'   id='datum_<?php echo $trCode; ?>'      name='<?php echo $trCode; ?>[datum]'      class='form-control' value='' required></td>
      <td><input type='time'   id='clockin_<?php echo $trCode; ?>'    name='<?php echo $trCode; ?>[clockin]'    class='form-control' value='' required></td>
      <td><input type='time'   id='clockout_<?php echo $trCode; ?>'   name='<?php echo $trCode; ?>[clockout]'   class='form-control' value='' required></td>
      <td><input type='number' id='break_<?php echo $trCode; ?>'      name='<?php echo $trCode; ?>[break]'      class='form-control' value='' step=".01" required></td>
      <td><input type='number' id='worked_<?php echo $trCode; ?>'     name='<?php echo $trCode; ?>[worked]'     class='form-control' value='' readonly></td>
      <td><input type='number' id='multiplier_<?php echo $trCode; ?>' name='<?php echo $trCode; ?>[multiplier]' class='form-control' value=''></td>

      <td><button class='btn btn-default' type='submit' name='<?php echo $trCode; ?>[update]'>Update</button></td>
  </tr>

Upvotes: 2

Views: 2133

Answers (2)

Marcel
Marcel

Reputation: 5119

Yes, it is possible. Just don 't send the whole form. Send instead of the form the input elements of the row. You 've got the update button and from this element you can traverse the dom tree one element node up to the parent tr element. From this one you can find all the input elements.

This is just a short code snippet to push you in the right direction.

var button = document.querySelector('[id="update-button-<?= $primaryKey ?>"]');

button.addEventListener('click', function(event) {
    event.preventDefault();

    var target = event.target,
        parent = null;

    for ( ; target && target !== document; target = target.parentNode ) {
        if ( target.matches( 'tr' ) ) parent = target;
    }

    var childnodes = parent.querySelectorAll('input'),
        data = new FormData();

    for (var i = 0; i < childnodes.length; i++) {
        var child = childnodes[i];
        data.append(child.name, child.value); 
    }

    // place HTTP XML Request here with data var
    // data now contains all input values from the table row you want to submit
});

The data variable is a javascript FormData instance, wich takes all the input values of the table row. To get the primary key for updating the table row in your database use a hidden input element or a data attribute in your button element and add it to your FormData instance.

Upvotes: 2

user11945300
user11945300

Reputation:

In your php code instead of return all records return last inserted record

<?php
   select * from ur_table_name where Id= LAST_INSERT_ID();
 ?>

Upvotes: -1

Related Questions