Formulaire jQuery sans PHP

**ifr38** · 23/12/2014, 16h32

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 :

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

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.

**Bovino** · 23/12/2014, 16h42

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 !

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.

**ifr38** · 23/12/2014, 16h46

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 :

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

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

**ifr38** · 02/01/2015, 14h07

J'ai pu tester, voici mon code :

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

**vandenn3** · 02/01/2015, 23h47

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

**ifr38** · 03/01/2015, 00h37

merci à toi vendenn

Mon formulaire est dans le fichier formRdv.html :

Code html :

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

Formulaire jQuery sans PHP

jQuery

Vue hybride

Discussions similaires

Partager

Partager