JQuery how to submit only changed fields when the form has some data array

Question

I have a database structure with an one to many relationship. In the html form, there are similar inputs with a name \'item[]\' or \'file[]\' to make the data to be an array

Answer 1

You can add the "changed" class to desired elements on change and send data of elements those have not the class "changed":

<form action="submit.php" method="get" id="myform">
  Name:<input type="text" name="name"/><br/>
  Item:<input type="text" name="item[]"/><br/>
  File:<input type="file" name="file[]" multiple/>
  Item:<input type="text" name="item[]"/><br/>
  File:<input type="file" name="file[]" multiple/>
  Select:<select name="select" value="1" original="1">
  <option value="1">One</option>
  <option value="2">Two</option>
  </select>
<input type="submit" id="submit">
</form>

listening for changes:

$("input,select").on("change",function(){
   $(this).addClass("changed");
})

handle data by ajax call and prevent form submission by return false and reset the changed class to nothing:

$("#myform").on("submit",function(){

//Collecting data from changed class:
var data;
$(".changed").each(function(){
data=data+$(this).attr("name")+":"+$(this).val()+",";
});

//just removing last comma:
data=data.substring(0, data.length - 1);

//Submit data:
$.ajax({
    ...
    data : { data },
    ...
    success: function(){ 
    //Removing changed class from all elements
    $(".changed").removeClass("changed");
    }
});

return false;
});

Answer 2

You could solve this with jQuery and add a class on every changed input
Than you can disable all inputs without the class and submit the form

$(document).ready(function() {
  $('input, select, textarea').on('change', function() {
    $(this).addClass('changed');
  });
  
  $('form').on('submit', function() {
    $('input:not(.changed), textarea:not(.changed)').prop('disabled', true);
    
    // alert and return just for showing
    alert($(this).serialize().replace('%5B', '[').replace('%5D', ']'));
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="submit.php" method="get">
  Name:<input type="text" name="name" /><br/><br/>
  Item:<input type="text" name="item[]" /><br/><br/>
  File:<input type="file" name="file[]" multiple /><br/><br/>
  Item:<input type="text" name="item[]" /><br/><br/>
  File:<input type="file" name="file[]" multiple /><br/><br/>
  Select:<select name="select" value="1" original="1">
  <option value="" selected="selected" disabled="disabled"></option>
  <option value="1">One</option>
  <option value="2">Two</option>
  </select><br/><br/>
  <button type="submit">send</button>
</form>

You could use indexes in the name attribute like this <input type="text" name="item[1]" />

Answer 3

var data = {};
$(function(){
    $(document).on('change', 'input', function(){
    data[this.name] = this.value;
  });
});

You can add a change event to the inputs and add the changed values to the data object or append fields to form data. So data object with contain only the changed values.

You can use formdata for sending files data. Please refer the this link.

How to use FormData for ajax file upload