PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
B

Serialize formgegevens en doorsturen via ajax

Door Brecht S op 03-02-2015 11:26 gewijzigd op 03-02-2015 17:22
5.172 views
Ik heb een form met een dropdown waar je meerdere selecties ineens kan maken:

<form id="form1">
<select name="mclijst_id[]" id="mc" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<input type="hidden" name="id" value="<?php echo $_GET['id']; ?>">
                                
<button type="submit" name="Submit_mc" class="btn btn-info btn-xs">Opslaan</button>
                                
</form>


Ik wil nu deze gegevens via ajax posten naar de mysql database maar dit wil niet lukken.
Hieronder de javascript hoe ik het heb gedaan:


<script>
      $(function () {
        $('#mc').change(function() {
          
        $.ajax({
            type: 'get',
            url: 'test7.php',
            data: $('#form1').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          return false;
        });
      });
    </script>


Op de test7.php pagina haal ik de gegevens uit de form:

<?php
$id = $_GET['id'];
$mclijst_id = $_GET['mclijst_id'];

$sql = "UPDATE contacten SET mclijst_id = '$mclijst_id' WHERE id = '$id'";
$res = mysql_query($sql) or die (mysql_error());
?>


Het resultaat hier is dat het veld mclijst_id in de database leeg blijft.
Thomas van den Heuvel
03-02-2015 17:36
Ik zou aan de PHP-kant kijken wat jQuery uiteindelijk maakt van die $('#form1').serialize().

Hoe ziet dit er aan de ontvangst-kant uit?
B
Brecht S
03-02-2015 18:43 gewijzigd op 03-02-2015 18:46
Ik heb geen idee hoe ik dit kan te weten komen. Buiten de alert die info terugstuurt weet ik niks. In de console kan ik dit precies niet terugvinden? Bestaat er een script die ik kan gebruiken om dit te weten te komen?

EDIT:
Als ik een alert zet met $(#form1).serialize() erin krijg ik dit: mclijst_id%5B%5D%...enz...
Thomas van den Heuvel
03-02-2015 19:25
Dat probeer ik dus al een tijdje over te brengen :): als je je AJAX calls doet middels GET kun je in je netwerk tab van je browser console (firefox/chrome/IExplorer: F12 toets) de aangeroepen URL's bekijken en aanklikken... Dan kun je dus, als je eerder al wat selecties hebt gedaan overstappen naar het script zelf en kun je deze rechtstreeks debuggen...

Als je (tijdelijk) via GET werkt zit alle informatie in de URL en niet in (niet langer toegankelijke) POST data (die niet meer beschikbaar is of die je moet herposten als je het script aanroept).
B
Brecht S
03-02-2015 20:36
Ik heb het in een get gestoken. Maar kan niks zien in de console (F12). Wat doe ik hier fout?
Thomas van den Heuvel
03-02-2015 21:34
Zorg dat je in de network tab geselecteerd is.

Herlaad hierna de pagina.

Klik een aantal keren op de select.

Je zou nu requests naar je PHP-bestand in je netwerk-tab moeten zien.

Knip en plak een van deze URL's in een nieuwe tab / nieuw venster van je browser.
B
Brecht S
04-02-2015 08:47 gewijzigd op 04-02-2015 08:48
Ik heb een 100 keer dezelfde url staan in de network tab.

http://nikkomsgchannel/e?00690020002e005b004d0035006a0057002e0055005f005400…410051003e00400017005500290034002c00050056002f005e005f0029005a0058005f002a


Als ik daarop klik in de console krijg ik dit:

Request URL:http://nikkomsgchannel/e?00690020002e005b004d0035006a0057002e0055005f0054002300790027004a0059002b0050006b002f0050000c000f0020003400200055005d006b0047005b003300400058005d0021006b0028005c000600600053005b00250041004200560022007b002700590054003500500012002300420054005d00320019002c0059005f002f00560009003400010070000a000300730070000b000a007f0000000d00070012005f0052002b0023007c00560051002d005e005b0028005d005d005f0060003200380048005d007b00410051003e00400017005500290034002c00050056002f005e005f0029005a0058005f002a
Request Headers CAUTION: Provisional headers are shown.
Origin:http://www.contentu.be
Referer:http://www.contentu.be/crm/new/contact-detail2.php?id=1164
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Query String Parametersview sourceview URL encoded
00690020002e005b004d0035006a0057002e0055005f0054002300790027004a0059002b0050006b002f0050000c000f0020003400200055005d006b0047005b003300400058005d0021006b0028005c000600600053005b00250041004200560022007b002700590054003500500012002300420054005d00320019002c0059005f002f00560009003400010070000a000300730070000b000a007f0000000d00070012005f0052002b0023007c00560051002d005e005b0028005d005d005f0060003200380048005d007b00410051003e00400017005500290034002c00050056002f005e005f0029005a0058005f002a:
ConsoleSearchEmulationRendering
Thomas van den Heuvel
04-02-2015 12:18
Ik weet niet wat er precies misgaat, maar ik heb de volgende code zojuist in Firefox, Internet Explorer en Chrome getest (dit is een afgeleide van de code uit je oorspronkelijk bericht) en dit werkt prima, zelfs met POST. Bij IExplorer moet je op een "play" knopje drukken om netwerkverkeer te volgen.

index.php, aangeroepen met bijvoorbeeld ?id=12
<!DOCTYPE html>
<html>
<head>
<title>jQuery shizzle</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>
<form id="form1">
<select name="mclijst_id[]" id="mc" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<input type="hidden" name="id" value="<?php echo $_GET['id']; ?>">
<button type="submit" name="Submit_mc" class="btn btn-info btn-xs">Opslaan</button>
</form>

<script type="text/javascript">
//<![CDATA[
$(function () {
    $('#mc').change(function() {
        $.ajax({
            type: 'post',
            url: 'test.php',
            data: $('#form1').serialize(),
            success: function () {
                alert('form was submitted');
            }
        });
        return false;
    });
});
//]]>
</script>
</body>
</html>


test.php, voor nu enkel om data te dumpen:
<?php
echo '<pre>'.print_r($_POST, true).'</pre>';
?>


Dit levert in alle browser consoles in de response tab het volgende (afhankelijk van je selectie natuurlijk):
<pre>Array
(
    [mclijst_id] => Array
        (
            [0] => 1
            [1] => 3
        )

    [id] => 12
)
</pre>


Ik heb geen idee wat er aan jouw zijde precies misgaat, maar probeer het bovenstaande eens na te bootsen?
B
Brecht S
04-02-2015 12:34 gewijzigd op 04-02-2015 12:36
Ik krijg dit terug op het moment dat dit naar test7.php gaat en op die pagina heb ik jouw script gebruikt. Geraken we hier verder mee?

Remote Address:2a02:990:130::3:80
Request URL:http://www.contentu.be/crm/new/test7.php
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Content-Length:91
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:PHPSESSID=8aeff29b54916a43063a9f83f32f30d7
Host:www.contentu.be
Origin:http://www.contentu.be
Referer:http://www.contentu.be/crm/new/contact-detail2.php?id=1164
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
mclijst_id[]:ecc391cc90
mclijst_id[]:ecc391cc90
mclijst_id[]:4f8eacc171
id:1164
Response Headersview source
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:111
Content-Type:text/html
Date:Wed, 04 Feb 2015 11:32:24 GMT
Keep-Alive:timeout=1, max=100
Server:Apache/2
Vary:Accept-Encoding,User-Agent
X-Powered-By:PHP/5.3.27


En in de response tab:

<pre>Array
(
    [mclijst_id] => Array
        (
            [0] => ecc391cc90
            [1] => ecc391cc90
            [2] => 4f8eacc171
        )

    [id] => 1164
)
</pre>
Thomas van den Heuvel
04-02-2015 12:39 
mclijst_id[]:ecc391cc90
mclijst_id[]:ecc391cc90
mclijst_id[]:4f8eacc171
id:1164


Dat is ongeveer wat we willen, maar het is wel vreemd dat ecc391cc90 daar 2x in voorkomt?

Zoals eerder gezegd, als je dit in je database in geserialiseerde vorm wilt opslaan kun je de PHP-functie implode() gebruiken.

Wat ik nog wel kan bedenken als reden dat je geserialiseerde inhoud niet wordt opgeslagen is dat deze tekst te lang is voor de kolom, mogelijk wordt de inhoud dan afgekapt of in zijn geheel leeggemaakt.
Frank Nietbelangrijk
04-02-2015 12:53
Normaliseren van de database? Is dat dan niet handiger?

Reageren

Inloggen om te reageren