Envoie de formulaire avec ajax

Fermé
grise-j Messages postés 2 Date d'inscription mercredi 23 mai 2018 Statut Membre Dernière intervention 23 mai 2018 - 23 mai 2018 à 03:11
grise-j Messages postés 2 Date d'inscription mercredi 23 mai 2018 Statut Membre Dernière intervention 23 mai 2018 - 23 mai 2018 à 09:58
Bonjour,
j’essaie de travailler un peu sur ajax en ce moment , mais j'ai des difficultés à assimiler le fonctionnement.
En fait, j'ai un formulaire que l'utilisateur doit remplir et j'aimerai l'enregistrer dans la base de donnée avec ajax.
Voici mon formulaire:

<form id = "formulaire" action="/ajouter" method = "post">
Nom de l'évènement:<br>
<input type="text" name="titre" id ="titre" >
Date De Début:<br>
<input type="date" id="debut" name ="datedebut" > <input type="time" id="heuredebut" name ="heuredebut">
<br>
Date De fin:<br>
<input type="date" id="fin" value = "2014-06-16" name = "datefin"> <input type="time" id="heurefin" name = "heurefin">
<br>
Créateur:<br>
<input type="text" name="createur">
<br>
Description:<br>
<input type="textarea" name="descriptiton">
<br><br>
<input type="submit" id ="envoyer" onclick="ajouter()" value="valider">
</form>

J'ai écris une méthode qui est sensée envoyer les données par ajax, ainsi:

function ajouter(){
var xhr = getXMLHttpRequest();
var url = "https://......./ajouter";
var formulaire = document.querySelector('#formulaire');
var formulaire = document.getElementById('titre');
var data = {};
data.titre = formulaire.value;
data.datedebut = datedebut;
data.datefin = datefin;
data.heuredebut = heuredebut;
data.heurefin = heurefin;
data.createur = createur;
data.description = description;
var json = JSON.stringify(data);
console.log(json);
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
xhr.onload = function () {
var users = JSON.parse(xhr.responseText);
if (xhr.readyState == 4 && xhr.status == "201") {
console.log("tadaaaaaaaaaaaaaaaaaaaaaaa");
} else {
console.error(users);
}
}
xhr.send(json);
}

J'arrive seulement à récupérer le titre et je ne sais pas comment utiliser les données pour les mettre dans la base grâce à L’URL. Sans utiliser ajax, voilà comment j'enregistre dans ma base(c'est une base Mongodb).

app.post("/ajouter", function (req, res) {

let evn = new Evenement();
evn.titre = req.body.titre;
evn.datedebut = req.body.datedebut;
evn.datefin = req.body.datefin;
evn.heuredebut = req.body.heuredebut;
evn.heurefin = req.body.heurefin;
evn.createur = req.body.createur;
evn.description = req.body.description;
//Nous stockons l'objet en base
evn.save(function(err){
if(err){
res.send(err);
}

res.send({message : 'Bravo, votre est maintenant stockée en base de données'});


})

});

Vous auriez une idée?
Merci d'avance.

1 réponse

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
23 mai 2018 à 05:54
Bonjour
Déjà...tu récupères le titre car tu as bien écrit ces deux lignes
 var formulaire = document.getElementById('titre');
data.titre = formulaire.value

(Le nom de ta variable "formulaire" est, par contre, mal choisi... Mais bon)

Il faut faire la même chose pour tes autres variables.


0
grise-j Messages postés 2 Date d'inscription mercredi 23 mai 2018 Statut Membre Dernière intervention 23 mai 2018
23 mai 2018 à 09:58
Bonjour,
J'ai récupéré les valeurs, mais comment je suis sensé les utiliser pour l'insertion dans la base de données?
0