Update meerdere records met 1 AJAX call
Deze wil ik met één AJAX call laten updaten.
Dit is het form dat ik wil updaten, elke groep is 1 record in de database.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form>
<div class="group">
<input name="firstname" id="firstname1"/>
<input name="lastname" id="lastname1"/>
<input name="email" id="email1"/>
</div>
<div class="group">
<input name="firstname" id="firstname2"/>
<input name="lastname" id="lastname2"/>
<input name="email" id="email2"/>
</div>
<div class="group">
<input name="firstname" id="firstname3"/>
<input name="lastname" id="lastname3"/>
<input name="email" id="email3"/>
</div>
<div class="group">
<input name="firstname" id="firstname4"/>
<input name="lastname" id="lastname5"/>
<input name="email" id="email6"/>
</div>
</form>
<div class="group">
<input name="firstname" id="firstname1"/>
<input name="lastname" id="lastname1"/>
<input name="email" id="email1"/>
</div>
<div class="group">
<input name="firstname" id="firstname2"/>
<input name="lastname" id="lastname2"/>
<input name="email" id="email2"/>
</div>
<div class="group">
<input name="firstname" id="firstname3"/>
<input name="lastname" id="lastname3"/>
<input name="email" id="email3"/>
</div>
<div class="group">
<input name="firstname" id="firstname4"/>
<input name="lastname" id="lastname5"/>
<input name="email" id="email6"/>
</div>
</form>
Hoe kan ik dit het beste aanpakken?
Dan gebruik je een ajax call om de data op te halen en lees je de json uit en update je elk veld.
Er zijn meerdere voorbeelden te vinden.
Gewijzigd op 09/03/2020 18:24:15 door Michael -
person[2]['firstname']
Gewijzigd op 09/03/2020 18:29:31 door - Ariën -
Als dat goed gaat kun je een simpele foreach gebruiken om ze alle vier één voor één te doorlopen:
Code (php)
Overigens is de 2 in person[2]['firstname'] dus de teller. de eerste van de vier wordt 1, de tweede 2 etc.
Toevoeging op 09/03/2020 18:50:44:
Dus in je HTML komt het er zo uit te zien:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form>
<div class="group">
<input name="person[1][firstname]" id="firstname1"/>
<input name="person[1][lastname]" id="lastname1"/>
<input name="person[1][email]" id="email1"/>
</div>
<div class="group">
<input name="person[2][firstname]" id="firstname2"/>
<input name="person[2][lastname]" id="lastname2"/>
<input name="person[2][email]" id="email2"/>
</div>
<div class="group">
<input name="person[3][firstname]" id="firstname3"/>
<input name="person[3][lastname]" id="lastname3"/>
<input name="person[3][email]" id="email3"/>
</div>
<div class="group">
<input name="person[4][firstname]" id="firstname4"/>
<input name="person[4][lastname]" id="lastname4"/>
<input name="person[4][email]" id="email4"/>
</div>
</form>
<div class="group">
<input name="person[1][firstname]" id="firstname1"/>
<input name="person[1][lastname]" id="lastname1"/>
<input name="person[1][email]" id="email1"/>
</div>
<div class="group">
<input name="person[2][firstname]" id="firstname2"/>
<input name="person[2][lastname]" id="lastname2"/>
<input name="person[2][email]" id="email2"/>
</div>
<div class="group">
<input name="person[3][firstname]" id="firstname3"/>
<input name="person[3][lastname]" id="lastname3"/>
<input name="person[3][email]" id="email3"/>
</div>
<div class="group">
<input name="person[4][firstname]" id="firstname4"/>
<input name="person[4][lastname]" id="lastname4"/>
<input name="person[4][email]" id="email4"/>
</div>
</form>
Gewijzigd op 09/03/2020 18:53:13 door Frank Nietbelangrijk
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
function update() {
$.ajax({
dataType: "json",
url: "ajax_request.php",
})
.done(function(data) {
$.each(data, function(i, item) {
var j = i+1; // Omdat je veld id met 1 begint en een array met 0
$('#firstname' + j).val(item.firstname);
$('#lastname' + j).val(item.lastname);
$('#email' + j).val(item.emailaddress);
});
});
}
update();
});
function update() {
$.ajax({
dataType: "json",
url: "ajax_request.php",
})
.done(function(data) {
$.each(data, function(i, item) {
var j = i+1; // Omdat je veld id met 1 begint en een array met 0
$('#firstname' + j).val(item.firstname);
$('#lastname' + j).val(item.lastname);
$('#email' + j).val(item.emailaddress);
});
});
}
update();
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form>
</form>
<script>
$(function() {
function update() {
$.ajax({
dataType: "json",
url: "ajax_request.php",
})
.done(function(data) {
$.each(data, function(i, item) {
$('form').append('<div class="group"><input name="person[' + i + '][\'firstname\']" id="person_' + i + '_firstname"><input name="person[' + i + '][\'lastname\']" id="person_' + i + '_lastname"><input name="person[' + i + '][\'email\']" id="person_' + i + '_email"></div>');
$('#person_' + i + '_firstname').val(item.firstname);
$('#person_' + i + '_lastname').val(item.lastname);
$('#person_' + i + '_email').val(item.emailaddress);
});
});
}
update();
});
</script>
</form>
<script>
$(function() {
function update() {
$.ajax({
dataType: "json",
url: "ajax_request.php",
})
.done(function(data) {
$.each(data, function(i, item) {
$('form').append('<div class="group"><input name="person[' + i + '][\'firstname\']" id="person_' + i + '_firstname"><input name="person[' + i + '][\'lastname\']" id="person_' + i + '_lastname"><input name="person[' + i + '][\'email\']" id="person_' + i + '_email"></div>');
$('#person_' + i + '_firstname').val(item.firstname);
$('#person_' + i + '_lastname').val(item.lastname);
$('#person_' + i + '_email').val(item.emailaddress);
});
});
}
update();
});
</script>
Toevoeging op 09/03/2020 20:55:30:
Even als toevoeging, als je dus de data wilt bijwerken zul je de data van het formulier weer terug moeten sturen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(function() {
$("form").submit(function (e) {
e.preventDefault();
$.ajax({
url: "ajax_request.php",
type: "POST",
data: $('form').serialize()
})
.done(function(data) {
console.log(data);
});
});
function update() {
$.ajax({
dataType: "json",
url: "ajax_request.php",
})
.done(function(data) {
console.log(data);
$.each(data, function(i, item) {
$('form').append('<div class="group"><input name="person[' + i + '][\'firstname\']" id="person_' + i + '_firstname"><input name="person[' + i + '][\'lastname\']" id="person_' + i + '_lastname"><input name="person[' + i + '][\'email\']" id="person_' + i + '_email"></div>');
$('#person_' + i + '_firstname').val(item.firstname);
$('#person_' + i + '_lastname').val(item.lastname);
$('#person_' + i + '_email').val(item.emailaddress);
});
})
.fail(function() {
console.log('Er is een fout opgetreden');
})
.always(function() {
$('form').append('<button>Save</button>');
});
}
update();
});
$("form").submit(function (e) {
e.preventDefault();
$.ajax({
url: "ajax_request.php",
type: "POST",
data: $('form').serialize()
})
.done(function(data) {
console.log(data);
});
});
function update() {
$.ajax({
dataType: "json",
url: "ajax_request.php",
})
.done(function(data) {
console.log(data);
$.each(data, function(i, item) {
$('form').append('<div class="group"><input name="person[' + i + '][\'firstname\']" id="person_' + i + '_firstname"><input name="person[' + i + '][\'lastname\']" id="person_' + i + '_lastname"><input name="person[' + i + '][\'email\']" id="person_' + i + '_email"></div>');
$('#person_' + i + '_firstname').val(item.firstname);
$('#person_' + i + '_lastname').val(item.lastname);
$('#person_' + i + '_email').val(item.emailaddress);
});
})
.fail(function() {
console.log('Er is een fout opgetreden');
})
.always(function() {
$('form').append('<button>Save</button>');
});
}
update();
});