insert query met ajax http request
ik heb een formulier en het is de bedoeling dat die verzonden word doormiddel van de submit button. dit moet met een insert query opgeslagen worden in de database. nu wil ik niet dat erbij het verzenden van het formulier een nieuwe pagina geopend word maar dat je op de zelfde pagina blijft . ik heb begrepen dat dit met ajax kan . het wil me tot nu toe niet lukken het onderstaande heb ik tot nu toe.
<html>
<input type="submit" id="userInput" value="stuur" name="stuurreactie" onsubmit="process()">
<div id="underInput" />
</html>
de php pagina
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo ' <response>';
if(isset($_GET['stuurreactie'])){
$naam = mysql_real_escape_string($_GET['stuurreactie']);
$insert = mysql_query("INSERT INTO advertentiereactie(naam) VALUES('".$naam."')");
if($insert == true){
echo'Uw reactie is geplaatst';
}
else{
echo 'er ging iets fout';
}
}
else{
echo'er is niks verstuurd';
}
echo ' </response>';
<script>
var xmlHttp = createXmlHttpRequestObject()
function createXmlHttpRequestObject(){
var xmlHttp;
if(window.ActiveXOject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = false;
}
}else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
xmlHttp = false;
}
}
if(!xmlHttp)
alert("Cant create object")
else
return xmlHttp;
}
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4 ){
stuurreactie= encodeURIComponent(document.getElementById("userInput").value);
xmlHttp.open("GET", "localhost:8080/verwerkreactie.php?stuurreactie=" + stuurreactie, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}else{
setTimeout('process()',1000);
}
function handleServerResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.DocumentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById("underInput").innerHTML = '<span style="color:blue">' +message+ '</span>';
setTimeout('process()',1000);
}else{
alert('foutje');
}
}
}
}
</script>
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo ' <response>';
if(isset($_GET['stuurreactie'])){
$naam = mysql_real_escape_string($_GET['stuurreactie']);
$insert = mysql_query("INSERT INTO advertentiereactie(naam) VALUES('".$naam."')");
if($insert == true){
echo'Uw reactie is geplaatst';
}
else{
echo 'er ging iets fout';
}
}
else{
echo'er is niks verstuurd';
}
echo ' </response>';
<script>
var xmlHttp = createXmlHttpRequestObject()
function createXmlHttpRequestObject(){
var xmlHttp;
if(window.ActiveXOject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlHttp = false;
}
}else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
xmlHttp = false;
}
}
if(!xmlHttp)
alert("Cant create object")
else
return xmlHttp;
}
function process(){
if(xmlHttp.readyState==0 || xmlHttp.readyState==4 ){
stuurreactie= encodeURIComponent(document.getElementById("userInput").value);
xmlHttp.open("GET", "localhost:8080/verwerkreactie.php?stuurreactie=" + stuurreactie, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}else{
setTimeout('process()',1000);
}
function handleServerResponse(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.DocumentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById("underInput").innerHTML = '<span style="color:blue">' +message+ '</span>';
setTimeout('process()',1000);
}else{
alert('foutje');
}
}
}
}
</script>
Wat jij wilt is mogelijk. In http://www.w3schools.com/php/php_mysql_insert.asp staat het meeste al uitgelegd. Als je na het lezen en proberen nog vragen hebt hoor ik het graag.
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
39
40
41
42
43
44
45
46
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
39
40
41
42
43
44
45
46
function CheckAndSend(f) {
var isError = false;
var errMsg = "";
var el = document.getElementById("errMsg");
el.style.visibility = "hidden";
if (f.elements["compcontact"].value == "") {
isError = true;
errMsg = "Het veld <i>contactpersoon</i> is een verplicht veld!";
}
if (f.elements["compemail"].value == "" && f.elements["comptel"].value == "") {
if (isError) {
errMsg += "<br />"
}
errMsg += "U dient een emailadres of een telefoonnummer op te geven.";
isError = true;
}
if (isError) {
el.innerHTML = errMsg;
el.style.visibility = "visible";
}
else {
var s = "";
for (i = 0; i < f.elements.length; i++) {
if (f.elements[i].value != "") {
s += f.elements[i].name + "=" + encodeURI(f.elements[i].value);
if (i < f.elements.length - 1) { s += "&" }
}
}
doc = getHTTPObject();
doc.onreadystatechange = function(){
if (doc.readyState == 4 && doc.status==200) {
s = doc.responseText;
xa = s.indexOf("errMsg");
if (xa > -1)
document.getElementById("errMsg").innerHTML = s;
else
document.getElementById(f.parentNode.id).innerHTML = s;
}
}
doc.open("POST", "/include/sndmail.php", true);
doc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
doc.send(s);
}
}
var isError = false;
var errMsg = "";
var el = document.getElementById("errMsg");
el.style.visibility = "hidden";
if (f.elements["compcontact"].value == "") {
isError = true;
errMsg = "Het veld <i>contactpersoon</i> is een verplicht veld!";
}
if (f.elements["compemail"].value == "" && f.elements["comptel"].value == "") {
if (isError) {
errMsg += "<br />"
}
errMsg += "U dient een emailadres of een telefoonnummer op te geven.";
isError = true;
}
if (isError) {
el.innerHTML = errMsg;
el.style.visibility = "visible";
}
else {
var s = "";
for (i = 0; i < f.elements.length; i++) {
if (f.elements[i].value != "") {
s += f.elements[i].name + "=" + encodeURI(f.elements[i].value);
if (i < f.elements.length - 1) { s += "&" }
}
}
doc = getHTTPObject();
doc.onreadystatechange = function(){
if (doc.readyState == 4 && doc.status==200) {
s = doc.responseText;
xa = s.indexOf("errMsg");
if (xa > -1)
document.getElementById("errMsg").innerHTML = s;
else
document.getElementById(f.parentNode.id).innerHTML = s;
}
}
doc.open("POST", "/include/sndmail.php", true);
doc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
doc.send(s);
}
}
Nog uit mijn pre jquery tijd ;-)
En dus in de form tag onsubmit="CheckAndSend(this.form); return false;")
maar als ik het goed begrijpt word hier beschreven hoe je een standaard formulier verzend naar een andere pagina dan word je ook daadwerkelijk door gestuurd naar die nieuwe pagina. dat is nu juist niet de bedoeling dat die pagina geladen word
Toevoeging op 10/06/2013 20:03:37:
bedankt Ger.
maar ik heb me ook laten vertellen dat je een functie xmlhttprequest moet maken. klopt dit ? dat zie ik hier niet gebeuren volgens mij ? of heb ik dit fout ? is het niet mogelijk om de controle van het formulier in de php pagina te doen ?
getHtppObject is ongeveer dezelfde functie als jouw createXmlHttpRequestObject
Dus je zal een aantal dingen in mijn eerdere code moeten aanpassen.
Ik kies ervoor om de eerste controle in JS te doen, daarna wordt er in PHP nogmaals een controle uitgevoerd!!
Nogmaals, het is een gedateerd script, tegenwoordig doe ik dat met jquery en een json response
heb je anders idee waar ik hier meer informatie over kan vinden ?
Ger ook bedankt ik zal hier ook naar kijken.
En als je mijn eerdere script aanpast, met jouw functie zal het gewoon werken.
Alleen maak ik misbruik van het feit dat de browser niet bekende tags toch gewoon onderdrukt, met andere woorden vanuit php gaf ik een response '<errMsg> .... </errMsg>'
Bietje smerig ;-)