Formulaire jQuery sans PHP

Version imprimable

23/12/2014, 16h32
ifr38

Formulaire jQuery sans PHP
Bonjour,

Je cherche a faire un formulaire de contact uniquement en utilisant du HTML et du jQuery, et donc SANS php. Je dois utiliser du AJAX pour la requête :
Code:

1 2 3 4 5 $.ajax({ type: "POST", url: "http://....", // ... }
Mais problème, vu que je débute en JS/Ajax je ne sais vraiment pas comment faire.

Merci de votre aide. :)
23/12/2014, 16h42
Bovino

Ben, ça n'a tout simplement pas de sens. AJAX sert à faire des requêtes HTTP, donc si tu n'as pas de PHP (ou autre langage serveur) pour traiter les données envoyées, l'intérêt se trouve quelque peu amoindri ! :aie:
En plus HTML et JavaScript (avec ou sans jQuery) ne permettent pas de faire un formulaire. Du moins, tu peux avoir un formulaire, mais là encore, sans rien pour pouvoir en traiter les éléments.
23/12/2014, 16h46
ifr38
Bonjour bovino,

C'est un exercice scolaire du coup ils ne cherchent pas forcement à ce que ça ai du sens, seulement nous faire appliquer bêtement une méthode alors que c'est plus simple autrement je suis d'accord avec toi...

Pour régler le soucis du php, on appelle pas un fichier php mais une url, ce qui fait qu'on aura:
Code:

1 2 3 4 5 $.ajax({ // ... url: "http://www.unsite.fr/traitement", // ... }

J'ai pu tester, voici mon code :

Code:

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
cellule.click(function(){
$("#monForm").fadeIn("slow",function(){
var name = $("#input_nom").val();
var object = $("#input_objet").val();
var phone = $("#input_tel").val();
var mail = $("#input_mail").val();
var date = $("#input_date").val();
var startTime = $("#input_hdeb").val();
var endTime = $("#input_hfin").val();
 
var datas = "idIntervenant=" + idIntervenant + "&name=" + name + "&object=" + object + "&phone=" + phone + "&mail=" + mail + "&date=" + date + "&startTime=" + startTime + "&endTime=" + endTime;
 
$.ajax({
	type: "POST",
	crossDomain : true,
	dataType: 'jsonp',
	data: datas,
	jsonpCallback : 'traiterRdv',
	url: "http://sitetest.org/agenda/ajax/insertNewEvent.php",
	success: function(data, textStatus, jqXHR) {},
	error : function(jqXHR, textStatus, errorThrown) {
	alert(textStatus + " " + errorThrown) ;
	}
});
});
});

mais le problème est que je n’arrive pas a afficher le formulaire pour qu'on puisse saisir les infos..
Mon formulaire est dans un fichier "formRdv.html" et à comme id "monForm", merci encore :)

02/01/2015, 23h47
vandenn3

Salut à toi,

Ce code JavaScript, il est dans le même fichier que le formulaire HTML?
Si oui, voila ce que ton code fait:
Lorsque l'on clic sur un élément, il affiche le formulaire (si il était caché, pourquoi?), puis récupère le contenus de chaque élément du formulaire et envoie la requête ajax.

(Commentaire: la page de destination de la requête ajax, http://sitetest.org/agenda/ajax/insertNewEvent.php, si elle existait, contiens obligatoirement du code PHP ou d'un autre langage serveur, car comme l'a dis Bovino, le formulaire ne peut être traité en JavaScript.)

Ce qu'il faudrait que ton code fasse:
Afficher le formulaire, puis lorsque l'on clic sur le bouton de validation, récupérer les données et faire la requête.

Si tu n'y arrive pas, pourrait tu nous donner le code HTML du formulaire ?

Bonne soirée

merci à toi vendenn :)

Mon formulaire est dans le fichier formRdv.html :

Code:

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="ISO-8859-1"/> 
		<title>Mon agenda</title>
		<script type="text/javascript" src="agenda.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
		<link type="text/css" rel="stylesheet" href="agenda.css"/>
	</head>
 
	<body>
 
	<form id="monForm" method="post">
		<p>
   			<label for="pseudo">Nom</label>
   			<input type="text" id="input_nom" name="input_nom" />
   		</p>
   		<p>
   			<label for="pseudo">Objet</label>
   			<input type="text" id="input_objet" name="input_objet" />
  	 	</p>
   		<p>
   			<label for="pseudo">Telephone</label>
   			<input type="text" id="input_tel" name="input_tel" />
   		</p>
   		<p>
    		<label for="mail">Mail</label>
    		<input type="email" id="input_mail" name="input_mail" />
   		</p>
    	<p>
    		<label for="pseudo">Date</label>
   			<input type="text" id="input_date" name="input_date" />
   		</p>
   		<p>
   			<label for="pseudo">Heure debut</label>
   			<input type="text" id="input_hdeb" name="input_hdeb" />
   		</p>
   		<p>
   			<label for="pseudo">Heure fin</label>
   			<input type="text" id="input_hfin" name="input_hfin" />
   		</p>
    	<input type="submit" id="envoyer" value="Envoyer" />
	</form>
 
	</body>
</html>

et mon bout de code jQuery est dans le fichier agenda.js.
Jai donc un agenda avec une case pour chaque heure de chaque jour du mois en cours. Lorsque je clique sur une de ces cases, je voudrais afficher le formulaire et quand je clique sur "envoyer", envoyer la requête ajax..

Encore merci et bonne soirée aussi ;)

03/01/2015, 00h53
vandenn3

Tu ne vois pas ton formulaire?

Car normalement il devrait être affiché, sans aucun code css ou javascript.