récupération des données du formulaire dans la base de données en utilisant ajax

**bedissa84** · 16/01/2015, 14h47

Bonjour,

j'ai un petit problème concernant l'envoi des données à ma base de données,

EN faite, j'ai une un formulaire d'envoi des données à un mail et aussi envoi des ces données saisi par l'utilisateur.

le code source du formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#submit_btn").click(function() { 
 
	    var proceed = true;
        //simple validation at client's end
        //loop through each field and we simply change border color to red for invalid fields		
		$("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
			$(this).css('border-color',''); 
			if(!$.trim($(this).val())){ //if this field is empty 
				$(this).css('border-color','red'); //change border color to red   
				proceed = false; //set do not proceed flag
			}
			//check invalid email
			var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
			if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
				$(this).css('border-color','red'); //change border color to red   
				proceed = false; //set do not proceed flag				
			}	
		});
 
        if(proceed) //everything looks good! proceed...
        {
			//get input field values data to be sent to server
            post_data = {
				'nom_dossier'		: $('input[name=name]').val(), 
				'user_email'	: $('input[name=email]').val(),  
				'subject'		: $('select[name=subject]').val(), 
				'msg'			: $('textarea[name=message]').val()
			};
 
            //Ajax post data to server
            $.post('contact_me.php', post_data, function(response){  
				if(response.type == 'error'){ //load json data from server and output message     
					output = '<div class="error">'+response.text+'</div>';
				}else{
				    output = '<div class="success">'+response.text+'</div>';
					//reset values in all input fields
					$("#contact_form  input[required=true], #contact_form textarea[required=true]").val(''); 
					$("#contact_form #contact_body").slideUp(); //hide form after success
				}
				$("#contact_form #contact_results").hide().html(output).slideDown();
            }, 'json');
        }
    });
 
    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
        $(this).css('border-color',''); 
        $("#result").slideUp();
    });
});
</script>
<link href="style_ajax.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div class="form-style" id="contact_form">
    <div class="form-style-heading" >SUIVI TRAITEMENT</div>
    <div id="contact_results"></div>
    <div id="contact_body">
        <label><span>Nom du Dossier <span class="required">*</span></span>
            <input type="text" name="name" id="name" required="true" class="input-field"/>
        </label>
		</label>
 
        <label for="subject1"><span>Cabinet</span>
            <select name="subject1" class="select-field">
            <option value="Choix de Cabinet"></option>
            <option value="MARSEILLE">MARSEILLE</option>
            <option value="COGOLIN">COGOLIN</option>
			<option value="PARIS">PARIS</option>
			<option value="SAINT TROPEZ">SAINT TROPEZ</option>
            </select>
        </label>
 
		 <label for="subject"><span>Nom du Responsable</span>
            <select name="subject" class="select-field">
            <option value="Choix du Responsable"></option>
						<option>Carol RUIZ</option>
						<option>Camille HASENFUSS</option>
						<option>Christian AUDRA </option>
						<option>Alexandre TCHINARIAN</option>
						<option>Christian LEGRAND</option>
						<option>Christine ECK</option>
						<option>Eric FARNE</option>
						<option>Féline FUGIER-GARREL</option>
						<option>Florence DEBROUWER</option>
						<option>François BARRUS</option>
						<option>Frederique CHAY</option>
						<option>Johann MODAVE</option>
						<option>JULIE BIOTON</option>
						<option>Karen OUDOT</option>
						<option>Marie-Cécile SCAGLIONE</option>
						<option>Nathalie CAMUGLI</option>
						<option>Nathalie VICTORIA</option>
						<option>Paloma MERLINO</option>
						<option>Pierre GONZALES</option>
						<option>Pinuccia COMPASSI</option>
						<option>Sophie MORELLO</option>
						<option>Valérie LEROY</option>
            </select>
        </label>
		 <label><span>Date Depot <span class="required">*</span></span>
		<input type="date" max="2015-01-01" min="2018-12-31" name="the_date" class="input-field">
		</label>
 
		<label><span>Date Retour <span class="required">*</span></span>
		<input type="date" max="2015-01-01" min="2018-12-31" name="the_date" class="input-field">
		</label>
 
 
 
 
        <label for="subject"><span>Nom Interlocuteur</span>
            <select name="subject" class="select-field">
            <option value="General Question">Khaoula NACEF</option>
            <option value="Advertise">Prenom NOM</option>
            </select>
        </label>
		 <label><span>Email <span class="required">*</span></span>
            <input type="email" name="email" required="true" class="input-field"/>
        </label>
		<div style="padding: 20px;width: 110%; background: #FFFFFF;border: 1px solid #EFEDED;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;">
 
 
		<h4 style="text-align: left; text-decoration:underline;">Particularités spécifiques au dossier :</h4>
		<label><span>Comptabilite : </span></span>
			<input type="radio" name="niveau" value="1">Encaissements/Décaissements
			<input type="radio" name="niveau" value="2" checked>Créances/Dettes
		</label>
        <?php echo '</br>'; ?>		
		<label><span>Assujetti à TVA:</span></span>
			<input type="radio" name="n" value="oui">OUI
			<input type="radio" name="n" value="non" checked>NON
		</label>
        <label for="field5"><span>Autres:<span class="required">*</span></span>
            <textarea name="message" id="message" class="textarea-field" required="true"></textarea>
        </label>
		</div>
 
		<div style="margin-top: 10px; padding: 20px;width: 110%; background: #FFFFFF;border: 1px solid #EFEDED;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;">
		<h4 style="text-align: left; text-decoration:underline;">A comptabiliser:</h4>
		<table border="1">
			 <tr>
				<th style="height: 50px;"></th>
				<th style="height: 50px;">A effectuer</th>
				<th style="height: 50px;">Effectuer</th>
				<th style="height: 50px;">Validé</th>
			  </tr>
		  <tr>
			<td>Factures d'achats et frais</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  <tr>
			<td>Factures de ventes</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  <tr>
			<td>Ecritures de paie</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  <tr>
			<td>Bord. Charges sociales</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  <tr>
			<td>Ecritures de TVA</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		   <tr>
			<td>Saisies bancaires</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		   <tr>
			<td>Saisie des chèques non débités</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		   <tr>
			<td>Caisse</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
 
 
		</table>
		</div>
		<div style="margin-top: 10px; padding: 20px;width: 110%; background: #FFFFFF;border: 1px solid #EFEDED;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;">
		<h4 style="text-align: left; text-decoration:underline;">Suivi comptable - A réviser :</h4>
		<table border="1">
		 <tr>
				<th style="height: 50px;"></th>
				<th style="height: 50px;">A effectuer</th>
				<th style="height: 50px;">Effectuer</th>
				<th style="height: 50px;">Validé</th>
			  </tr>
		  <tr>
			<td>Compte d'attente apuré</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  <tr>
			<td>Etat de rapprochement bancaire</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  <tr>
			<td>Lettrage des comptes tiers et généraux</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  <tr>
			<td>Controle des clients</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  <tr>
			<td>Controle des fournisseurs</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		   <tr>
			<td>Vérification affectation CA/TVA</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		   <tr>
			<td>Préparation déclaration de TVA</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
			<td><INPUT type="checkbox" name="choix3" value="3"> </td>
		  </tr>
		  </table>
		</div border="1">
		<div style="margin-top: 10px; padding: 20px;width: 110%; background: #FFFFFF;border: 1px solid #EFEDED;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;">
		<h4 style="text-align: left; text-decoration:underline;">Comptes Rendu de Missions :</h4>
		<table border="1">
		 <tr >
				<th style="height: 50px;"></th>
				<th style="height: 50px;">Effectuer</th>
				<th style="height: 50px;">Validé</th>
			  </tr>
		  <tr>
			<td>Respect des consignes de saisie</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
 
		  </tr>
		  <tr>
			<td>Révision de la saisie</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
		  </tr>
		  <tr>
			<td>Respect des délais d'envoi</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
		  </tr>
		  <tr>
			<td>Respect de la durée de saisie</td>
			<td><INPUT type="checkbox" name="choix1" value="1"> </td>
			<td><INPUT type="checkbox" name="choix2" value="2"> </td>
		  </tr>
		  </table>
		</div>
		<div style="margin-top: 10px; padding: 20px;width: 110%; background: #FFFFFF;border: 1px solid #EFEDED;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;">
		<h4>Observations</h4>
		<label for="field5"><span>Cabinet FIDBELL :<span class="required">*</span></span>
            <textarea name="message" id="message" class="textarea-field1" required="true"></textarea>
        </label>
		<label for="field5"><span>Cabinet ABEILLE :<span class="required">*</span></span>
            <textarea name="message" id="message" class="textarea-field1" required="true"></textarea>
        </label>
		</div>
		<?php echo '</br>'; ?>	
        <label>
            <span>&nbsp;</span><input type="submit" id="submit_btn" value="Envoyer" />
        </label>
    </div>
</div>

Le code source du envoi à mail :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<?php
if($_POST)
{
	$to_email   	= "email"; //Recipient email, Replace with own email here
 
	//check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
 
		$output = json_encode(array( //create JSON data
			'type'=>'error', 
			'text' => 'Sorry Request must be Ajax POST'
		));
		die($output); //exit script outputting json data
    } 
 
	//Sanitize input data using PHP filter_var().
	$nom_dossier		= filter_var($_POST["nom_dossier"], FILTER_SANITIZE_STRING);
	$user_email		= filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
 
	$subject		= filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
	$message		= filter_var($_POST["msg"], FILTER_SANITIZE_STRING);
 
	//additional php validation
	if(strlen($nom_dossier)<=3){ // If length is less than 4 it will output JSON error.
		$output = json_encode(array('type'=>'error', 'text' => 'le nom de dossier est invalide!'));
		die($output);
	}
	if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
		$output = json_encode(array('type'=>'error', 'text' => 'entrer un email valide!'));
		die($output);
	}
	/*if(!filter_var($country_code, FILTER_VALIDATE_INT)){ //check for valid numbers in country code field
		$output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in country code'));
		die($output);
	}
	if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field
		$output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number'));
		die($output);
	}
	*/
	if(strlen($subject)<3){ //check emtpy subject
		$output = json_encode(array('type'=>'error', 'text' => 'Subject is required'));
		die($output);
	}
	if(strlen($message)<3){ //check emtpy message
		$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
		die($output);
	}
 
	//email body
	$message_body = $message."\r\n\r\n-".$nom_dossier."\r\nEmail : ".$user_email."\r\n  " ;
 
	//proceed with PHP email.
	$headers = 'From: '.$nom_dossier.'' . "\r\n" .
	'Reply-To: '.$user_email.'' . "\r\n" .
	'X-Mailer: PHP/' . phpversion();
 
	$send_mail = mail($to_email, $subject, $message_body, $headers);
 
	if(!$send_mail)
	{
		//If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
		$output = json_encode(array('type'=>'error', 'text' => 'mail n a pas pu envoyer! vérifier la configuration de php.'));
		die($output);
	}else{
		$output = json_encode(array('type'=>'message', 'text' => 'Suivi Traitement du Dossier " '.$nom_dossier .' "a été envoyé'));
 
		die($output);
	}
}
?>

récupération des données du formulaire dans la base de données en utilisant ajax

PHP & Base de données

Mode arborescent

Discussions similaires

Partager

Partager