Update meerdere records met 1 AJAX call

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoeri Achterbergen

Yoeri Achterbergen

09/03/2020 18:09:00
Quote Anchor link
Ik heb een tabel met 4 vaste records.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Hoe kan ik dit het beste aanpakken?
 
PHP hulp

PHP hulp

29/09/2020 09:13:39
 
Michael -

Michael -

09/03/2020 18:23:53
Quote Anchor link
Een pagina maken waarop je de data ophaalt uit de database. Deze encode je naar JSON.
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 -
 
- Ariën -
Beheerder

- Ariën -

09/03/2020 18:29:11
Quote Anchor link
Gebruik dan ook unieke waardes in je name-attribuut. En bij voorkeur in een array-notatie:
person[2]['firstname']
Gewijzigd op 09/03/2020 18:29:31 door - Ariën -
 
Frank Nietbelangrijk

Frank Nietbelangrijk

09/03/2020 18:47:25
Quote Anchor link
Dat wat Ariën zegt is stap één want zoals jij het weergeeft in je voorbeeld zal alleen de laatste van de vier doorkomen naar PHP omdat je telkens het name attribuut hergebruikt. Ga dus beginnen met de array notatie en gebruik een print_r om te zien hoe je data binnenkomt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
echo '<pre>' . print_r($_POST, true) . '</pre>';
?>

Als dat goed gaat kun je een simpele foreach gebruiken om ze alle vier één voor één te doorlopen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
foreach($_POST['person'] as $person) {
    echo '<pre>' . print_r($person, true) . '</pre>';
}

?>

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 09/03/2020 18:53:13 door Frank Nietbelangrijk
 
Michael -

Michael -

09/03/2020 19:14:53
Quote Anchor link
Je kunt de inputvelden ook door javascript laten creëren, mochten het er ooit 5 worden, hoef je niks aan te passen.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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();
});
 
Thomas van den Heuvel

Thomas van den Heuvel

09/03/2020 19:22:30
Quote Anchor link
Wat als je tussendoor ook velden kunt verwijderen? Dan heb je geen sluitende rij meer en weet je dus niet welk(e) nummer(s) er tussenuit was (waren) gevallen. Zolang je maar sets toevoegt en verwijdert hoef je geen volgnummer te gebruiken.
 
Michael -

Michael -

09/03/2020 19:51:08
Quote Anchor link
Precies, dus dan zou je het zo kunnen doen
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
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
$(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();
});
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.