Script met Formulier
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<script language="javascript">
/*
This is the script part, for posting values
Response is the text to supply to your user
MyMessage is a html element to recieve the response
*/
$input = function(text)
{
// Zo kan je gemakkelijk een html element aanspreken
return document.getElementsByTagName(text);
}
function sendForm(response) {
try {
//mydata is POST container
var mydata = '', name = '';
/**
* get all input values
*
**/
var inputs = $input('input');
for (var i = 0; i < inputs.length; ++i) { //this get all input types,
//except Textarea and Select
/*
prepared to use name or id of html element
*/
if (inputs[i].name) {
name = inputs[i].name;
} else if (inputs[i].id) {
name = inputs[i].id;
} else {
name = '';
}
if ((name!='')&&inputs[i].value) {
mydata += '&' + name + '=' + inputs[i].value;
}
}
/**
* get all selected values
*
**/
var inputs = $input('select');
/*
this function works NOT on multiple selections
Yet ...
*/
//alert(inputs.length);
for (var i = 0; i < inputs.length; ++i) {
//If you want you can loop thrue all options[] of active select element
mydata += '&' + inputs[i].name +
'=' + inputs[i].options[inputs[i].options.selectedIndex].value;
}
/**
* get all textarea values
*
**/
var inputs = $input('textarea');
for (var i = 0; i < inputs.length; ++i) {
mydata += '&' + inputs[i].name + '=' + inputs[i].value;
}
/**
* get a XMLHttpRequestobject
*
**/
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/**
* Create onreadystatechange function
*
**/
xmlhttp.onreadystatechange = function () {
//Is it ready to send data
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//give your response
document.getElementById("myMessage").innerHTML = response; }
}
/**
* get remote URL, to execute POST values
* the file has to be there!
*
**/
var doNow = "post_ajax.php"
/**
* open Request
*
**/
xmlhttp.open("POST", doNow, true);
/**
* set some headers
*
**/
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length",mydata.length);
xmlhttp.setRequestHeader("Connection", "close");
/**
* send POST data
*
**/
//alert(mydata.length);
xmlhttp.send(mydata);
} catch (e) {
// display error message
alert("Error sending the response: " + e.toString());
}
}
</script>
<style TYPE="text/css" MEDIA=screen>
.warning {
background-color: orange;
color: white;
</style>
</head>
<body>
<div id="myMessage" class="warning"><!-- class is to alert your user //-->
</div>
<form id="mailfrm" name="mailfrm" action="javascript:sendForm('Uw formulier is verwerkt!')">
<input id="formname" name="formname" value="mailfrm" type="hidden">
<label for="name">
Gast naam:
</label>
<input id="name" name="name" title="Geef hier uw naam." size="25" value="Gebruiker">
<br>
<label for="mail">
Mailadres:
</label>
<input id="mail" name="mail" title="Geef hier uw mailadres." size="30" value="[email protected]">
<br>
<label for="subject">
Onderwerp:
</label>
<input id="subject" name="subject" title="Geef hier het onderwerp van uw bericht." size="40" value="Test Ajax">
<br>
<label for="message">
Bericht:
</label>
<textarea id="message" name="message" title="Type hier het bericht en/of opmerking die u wilt plaatsen." cols="40" rows="10">Super snel dataverwerking
</textarea>
<br>
<p align="center">
<button type="reset" value="reset" title="Herstel ingegeven waarden.">
Herstel
</button>
<button value="send" title="Verzend ingegeven waarden.">
Verzend
</button>
</p>
</form>
</body>
</html>
<head>
<script language="javascript">
/*
This is the script part, for posting values
Response is the text to supply to your user
MyMessage is a html element to recieve the response
*/
$input = function(text)
{
// Zo kan je gemakkelijk een html element aanspreken
return document.getElementsByTagName(text);
}
function sendForm(response) {
try {
//mydata is POST container
var mydata = '', name = '';
/**
* get all input values
*
**/
var inputs = $input('input');
for (var i = 0; i < inputs.length; ++i) { //this get all input types,
//except Textarea and Select
/*
prepared to use name or id of html element
*/
if (inputs[i].name) {
name = inputs[i].name;
} else if (inputs[i].id) {
name = inputs[i].id;
} else {
name = '';
}
if ((name!='')&&inputs[i].value) {
mydata += '&' + name + '=' + inputs[i].value;
}
}
/**
* get all selected values
*
**/
var inputs = $input('select');
/*
this function works NOT on multiple selections
Yet ...
*/
//alert(inputs.length);
for (var i = 0; i < inputs.length; ++i) {
//If you want you can loop thrue all options[] of active select element
mydata += '&' + inputs[i].name +
'=' + inputs[i].options[inputs[i].options.selectedIndex].value;
}
/**
* get all textarea values
*
**/
var inputs = $input('textarea');
for (var i = 0; i < inputs.length; ++i) {
mydata += '&' + inputs[i].name + '=' + inputs[i].value;
}
/**
* get a XMLHttpRequestobject
*
**/
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/**
* Create onreadystatechange function
*
**/
xmlhttp.onreadystatechange = function () {
//Is it ready to send data
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//give your response
document.getElementById("myMessage").innerHTML = response; }
}
/**
* get remote URL, to execute POST values
* the file has to be there!
*
**/
var doNow = "post_ajax.php"
/**
* open Request
*
**/
xmlhttp.open("POST", doNow, true);
/**
* set some headers
*
**/
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length",mydata.length);
xmlhttp.setRequestHeader("Connection", "close");
/**
* send POST data
*
**/
//alert(mydata.length);
xmlhttp.send(mydata);
} catch (e) {
// display error message
alert("Error sending the response: " + e.toString());
}
}
</script>
<style TYPE="text/css" MEDIA=screen>
.warning {
background-color: orange;
color: white;
</style>
</head>
<body>
<div id="myMessage" class="warning"><!-- class is to alert your user //-->
</div>
<form id="mailfrm" name="mailfrm" action="javascript:sendForm('Uw formulier is verwerkt!')">
<input id="formname" name="formname" value="mailfrm" type="hidden">
<label for="name">
Gast naam:
</label>
<input id="name" name="name" title="Geef hier uw naam." size="25" value="Gebruiker">
<br>
<label for="mail">
Mailadres:
</label>
<input id="mail" name="mail" title="Geef hier uw mailadres." size="30" value="[email protected]">
<br>
<label for="subject">
Onderwerp:
</label>
<input id="subject" name="subject" title="Geef hier het onderwerp van uw bericht." size="40" value="Test Ajax">
<br>
<label for="message">
Bericht:
</label>
<textarea id="message" name="message" title="Type hier het bericht en/of opmerking die u wilt plaatsen." cols="40" rows="10">Super snel dataverwerking
</textarea>
<br>
<p align="center">
<button type="reset" value="reset" title="Herstel ingegeven waarden.">
Herstel
</button>
<button value="send" title="Verzend ingegeven waarden.">
Verzend
</button>
</p>
</form>
</body>
</html>