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

<form action="submit.php" method="get">
  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>

</form>

how can i submit only the changed field, and in the server side i can recongize which item is changed? I tried disable the inputs, but it seems not working.

another problem is that if i submit the form with ajax, how can i submit the files

@SpencerWieczorek, for example, user change only the value of second item[], but not the first, so the code should only submit the data of second item[] — Jerryc, Jun 07 '17 at 06:11
Changed compared to the value when it was last submitted, or changed from the default value (*being an empty string*) of the input element? — Spencer Wieczorek, Jun 07 '17 at 06:17
@SpencerWieczorek, maybe it is kind of confusing that i didnt add value to the input, yes, the form is an update form, there should be original values — Jerryc, Jun 07 '17 at 06:23
Then onload store the values of the `input` elements, then on submit compare the stored value the input element was onload compared to the current value it is on submit. If they are different then that element should not be submitted. — Spencer Wieczorek, Jun 07 '17 at 06:30

UfguFugullu · Accepted Answer · 2017-06-07T07:07:12.707

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]" />

actually now the major problem is that if item2 is submitted but item1 isnt, i cannot recongize the data is pointing to which item, your answer is great! — Jerryc, Jun 07 '17 at 06:31
You could use `index`es in the `name` attribute like this `` — UfguFugullu, Jun 07 '17 at 06:38

score 2 · Answer 2 · answered Jun 07 '17 at 06:19

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;
});

actually now the major problem is that if item2 is submitted but item1 isnt, i cannot recongize the data is pointing to which item — Jerryc, Jun 07 '17 at 06:28

score 2 · Answer 3 · answered Jun 07 '17 at 06:34

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

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

3 Answers3

Linked