JQuery, wie nur geänderte Felder gesendet werden, wenn das Formular über ein Datenarray verfügt

Question

Ich habe eine Datenbankstruktur mit einer Eins-zu-viele-Beziehung. In dem HTML-Formular gibt es ähnliche Eingaben mit einem Namen ‚item []‘ oder ‚Datei []‘, um die Daten zu machen einem Array seiner

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

wie kann ich nur das geänderte Feld einreichen, und in der Serverseite Ich kann feststellen, welches Element geändert wird? Ich habe versucht, die Eingänge zu deaktivieren, aber es scheint nicht zu funktionieren.

ein anderes Problem ist, dass, wenn ich das Formular mit Ajax einreichen, wie kann ich die Dateien einreichen

Answer 1

Man könnte dies mit jQuery lösen und eine Klasse hinzufügen auf input
jedem verändert als sie all inputs ohne die deaktivieren Klasse und legt die 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>

Sie Indizes im Namen ein verwenden könnte ttribute wie diese <input type="text" name="item[1]" />

Answer 2

Sie können die „geändert“ Klasse, um die gewünschten Elemente auf Änderung hinzufügen und haben diejenigen Daten von Elementen senden nicht die Klasse „geändert“:

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

hören für Änderungen:

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

Griff Daten von ajax-Aufruf und Formularübermittlung durch return false und setzen Sie die geänderte Klasse nichts verhindern:

$("#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; 
    }); 
}); 

Sie können den Eingaben ein Änderungsereignis hinzufügen und die geänderten Werte zum Datenobjekt hinzufügen oder Felder anfügen, um Daten zu bilden. Das Datenobjekt mit enthält also nur die geänderten Werte.

Sie können formdata zum Senden von Dateidaten verwenden. Bitte beziehen Sie sich auf diesen Link.

How to use FormData for ajax file upload