Script met Formulier

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
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>

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Script met Formulier
  2. post_ajax.php

PHP tutorial opties

 
 

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.