Serialize formgegevens en doorsturen via ajax
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$(function () {
$('#mc').change(function() {
$.ajax({
type: 'get',
url: 'test7.php',
data: $('#form1').serialize(),
success: function () {
alert('form was submitted');
}
});
return false;
});
});
</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:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?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());
?>
$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.
Gewijzigd op 03/02/2015 17:22:41 door Brecht S
voeg even value="een waarde" toe in de option tag(s)
method="post"
nee sorry , dat zal niet uitmaken (ajax verzend info)
Gewijzigd op 03/02/2015 12:17:22 door - Roland -
Ook lijkt het mij nogal irritant dat je een multiple-select-dropdown hebt, maar dat het formulier "onchange" alles al gaat updaten? Krijg je dan niet een alert elke keer als je 1 item aanpast? Kun je de gebruiker niet beter op een knop "opslaan" laten drukken als deze klaar is met zijn/haar selectie van meerdere items (als dat de bedoeling is)?
De constructie is een beetje raar - in het select-menu mag je meerdere items selecteren, maar het lijkt erop dat de query maar 1 id accepteert?
EDIT: verander je POST methode in je ajax call eens naar GET en roep de code die de query uitvoert eens handmatig aan, dan zul je waarschijnlijk zien dat je query misgaat.
Het achterliggende probleem is een beetje: er gaat iets mis en je weet niet waarom / wat er gebeurt. Creeer voor jezelf een situatie waarin je e.e.a. kunt debuggen...
EDIT2: en wellicht wil je je form voorzien van een token, want je script is vatbaar voor manipulatie van je data van buitenaf.
Gewijzigd op 03/02/2015 13:58:34 door Thomas van den Heuvel
De bedoeling van de onChange is dat iedere keer er iets geupdated gaat worden, dit in een apart veld moet opgeslagen worden. Als op de knop submit gedrukt is dan moeten de uiteindelijke gegevens in een ander veld worden opgeslagen. Achteraf heb ik dan de oude gegevens en de nieuwe gegevens in 2 verschillende velden in mijn database die ik dan kan vergelijken en zo users uit mailchimp kan subscriben en unsubscriben. Dat heb ik allemaal niet meer gepost want is ook niet nodig. Van zodra ik de gegevens juist kan opslaan kan ik ermee verder. Die alert moet er nog uit, was alleen om te testen of te proberen zien waar het fout ging.
Je kan meerdere items selecteren in de multiselect. Die zullen allemaal in 1 string worden opgeslagen die ik dan met een foreach er terug kan uithalen.
Ik denk niet dat de query misgaat. Dat is nu juist het probleem. Meestal komt er gewoon Array in dat veld te staan, maar dat is niet de bedoeling...
Als ik via de alert de info opvraag wat hij werkelijk heeft gepost blijft dat leeg. Maar in de db krijg ik meestal het woord Array ipv de werkelijke array/string.
Dat token kan eventueel later ook nog toegevoegd worden, vandaar had ik eerder voor de post gekozen, dan heb ik dat toch niet nodig?
Hm, de functionaliteit is uiteindelijk bedoeld om mensen te (un)subscriben voor een mailinglijst ofzo? Heb je al eens overwogen om een lijst van checkboxen te gebruiken in plaats van een dropdown? Een dropdown wordt een beetje onpraktisch als je lijst erg lang wordt.
Zelfs al zou je op den duur de dropdown zo maken dat als je informatie wijzigt, deze al de juiste velden van (bijvoorbeeld) geabonneerde leden heeft geselecteerd, maar als je 1x verkeerd klikt, ben je al deze selecties kwijt. Iets waar je ook aan zou kunnen denken is een "multiselect": dit zijn in feite twee select-dropdowns naast elkaar die via JavaScript fungeren als een "aan" lijst en een "uit" lijst. Je kunt dan opties verslepen tussen de twee lijsten.
Zo'n lijst van checkboxen / multiselect lijkt mij hiervoor wat intuitiever in het gebruik.
Inderdaad, wij gebruiken hiervoor de volledige API van mailchimp voor de integratie. Er zijn meerdere lijsten daar en die hebben allemaal een unieke ID. Op die manier ga je mensen gaan subscriben of unsubscriben uit de verschillende lijsten. Dit zullen er praktisch gezien ook nooit super veel zijn. Normaal gezien houden we dit op een 5-tal lijsten. Dus de multiselect zal bijna nooit meer dan 5 items hebben.
Nu is het een multiselect en als je in de kader klikt krijg je een dropdown. Ik gebruik hiervoor multi select boxen van select2 (http://select2.github.io/examples.html), je kan die daar ook limiteren tot max een aantal selecties in geval nodig.
Nu weet ik nog steeds niet wat er fout gaat met mijn script of wat er moet aan veranderen om het wel te doen werken. Kan je mij hiermee helpen?
Van wat voor type is contacten.mclijst_id?
Is dit een (LONG)TEXT veld?
Persoonlijk zou ik hier een koppeltabel van maken, met in elk record een gebruiker-id - mailiinglijst-id paar, maar dat terzijde.
Zoals gezegd, $_POST['mclijst_id'] is (waarschijnlijk) een array. Als je deze als een string wilt opslaan moet je die omzetten van een array naar een string, en daarbij moet je een scheidingsteken meegeven. Dit doe je met implode('<scheidingteken>', <je_array>). Beter zou dus zijn dat dit alle aparte records worden in plaats van dat je dit serialiseert in een tabelkolom :/.
Dan is het handig dat je je code kunt debuggen. Dit gaat lastig met een POST. Als je dit tijdelijk verandert naar de GET methode kun je eerst wat rondklikken in je selectveld, en dan kun je in je netwerk ontwikkelaars-tab van je browser zien welke URL's zijn aangeroepen (test7.php). Deze kun je vervolgens rechtstreeks aanroepen omdat alles via GET is verstuurd. Vervolgens kun je je script rechtstreeks debuggen. Dat lijkt mij een stuk makkelijker om te zien wat er nu echt in dat script gebeurt.
Ik heb ook de post naar GET gezet in de ajax en in test7 even de $_POST naar $_GET gezet.
Ik had even in de javascript een var test toegevoegd. Ik krijg de gehele string/array wel te zien maar niks van updates in de database. Resultaat van de alert is: ecc984abb,ert785bnt,fgt5645gg
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(function () {
$('#mc').change(function() {
var test = $(this).val();
$.ajax({
type: 'post',
url: 'test7.php',
data: $('#form1').serialize(),
success: function () {
alert(test);
}
});
return false;
});
});
</script>
$(function () {
$('#mc').change(function() {
var test = $(this).val();
$.ajax({
type: 'post',
url: 'test7.php',
data: $('#form1').serialize(),
success: function () {
alert(test);
}
});
return false;
});
});
</script>
Gewijzigd op 03/02/2015 17:22:01 door Brecht S
Hoe ziet dit er aan de ontvangst-kant uit?
EDIT:
Als ik een alert zet met $(#form1).serialize() erin krijg ik dit: mclijst_id%5B%5D%...enz...
Gewijzigd op 03/02/2015 18:46:41 door Brecht S
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).
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.
Code (php)
1
http://nikkomsgchannel/e?00690020002e005b004d0035006a0057002e0055005f005400410051003e00400017005500290034002c00050056002f005e005f0029005a0058005f002a
Als ik daarop klik in de console krijg ik dit:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
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
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
Gewijzigd op 04/02/2015 08:48:12 door Brecht S
index.php, aangeroepen met bijvoorbeeld ?id=12
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
37
38
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
37
38
<!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>
<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:
Dit levert in alle browser consoles in de response tab het volgende (afhankelijk van je selectie natuurlijk):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<pre>Array
(
[mclijst_id] => Array
(
[0] => 1
[1] => 3
)
[id] => 12
)
</pre>
(
[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?
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
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
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
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<pre>Array
(
[mclijst_id] => Array
(
[0] => ecc391cc90
[1] => ecc391cc90
[2] => 4f8eacc171
)
[id] => 1164
)
</pre>
(
[mclijst_id] => Array
(
[0] => ecc391cc90
[1] => ecc391cc90
[2] => 4f8eacc171
)
[id] => 1164
)
</pre>
Gewijzigd op 04/02/2015 12:36:15 door Brecht S
Code (php)
1
2
3
4
2
3
4
mclijst_id[]:ecc391cc90
mclijst_id[]:ecc391cc90
mclijst_id[]:4f8eacc171
id:1164
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.
