jQuery如何仅在表单具有某些数据数组时提交更改的字段

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

Answer 1

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 2

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 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