mirror of
https://git.roussel.pro/telecom-paris/pact.git
synced 2026-02-09 10:30:17 +01:00
intégration formulaire avec l'api
This commit is contained in:
Quentin Roussel
@@ -5,13 +5,14 @@
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="banniere d-flex">
|
||||
<!-- image en baniere -->
|
||||
<img src="Logo-PACT.svg" class="img-fluid col-12 col-md-6 mx-auto" alt="logo Téléreview" />
|
||||
<img src="Logo-PACT.svg" class="img-fluid col-12 col-md-6 mx-auto" alt="logo Téléreview" />
|
||||
</div>
|
||||
<!-- <div class="col-md-6 offset-md-3">
|
||||
<p class="titre">
|
||||
@@ -22,69 +23,68 @@
|
||||
|
||||
<main>
|
||||
|
||||
<form method="get" action="deuxiemepage.html">
|
||||
<form method="get" id="form" action="deuxiemepage.html">
|
||||
|
||||
<div class="row justify-content-md-center">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<div class="col-md-6 offset-md-3 form-input">
|
||||
<p class="sexe">
|
||||
<label for="sexe">Sexe</label><br>
|
||||
<select name="sexe" id="sexe">
|
||||
<option value="femme">Femme</option>
|
||||
<option value="homme">Homme</option>
|
||||
<option value="autre">Autre</option>
|
||||
<select name="auteur_sexe" id="sexe">
|
||||
<option value="f">Femme</option>
|
||||
<option value="h">Homme</option>
|
||||
<option value="a">Autre</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<div class="col-md-6 offset-md-3 form-input">
|
||||
<p class="age">
|
||||
<label for="age"> Dans quelle tranche d'âge vous situez-vous ?</label>
|
||||
<select name="age" id="age">
|
||||
<option value="moins12"> Moins de 12 ans</option>
|
||||
<option value="medium12-18">12-18 ans</option>
|
||||
<option value="medium18-30">18-30 ans</option>
|
||||
<option value="medium30-50">30-50 ans</option>
|
||||
<option value="medium50-70">50-70 ans</option>
|
||||
<option value="plus70">Plus de 70 ans</option>
|
||||
<label for="age"> Dans quelle tranche d'âge vous situez-vous ?</label>
|
||||
<select name="auteur_age" id="age">
|
||||
<option value="10"> Moins de 12 ans</option>
|
||||
<option value="18">12-18 ans</option>
|
||||
<option value="25">18-30 ans</option>
|
||||
<option value="40">30-50 ans</option>
|
||||
<option value="60">50-70 ans</option>
|
||||
<option value="70">Plus de 70 ans</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 offset-md-3">
|
||||
|
||||
<div class="col-md-6 offset-md-3 form-input">
|
||||
<p class="note">
|
||||
<label for="note"> Quelle note sur 10 donneriez-vous à l'exposition ? </label><br>
|
||||
<label for="note"> Quelle note sur 10 donneriez-vous à l'exposition ? </label><br>
|
||||
<p><span id="note-display"></span>/10</p>
|
||||
<input type="range" id="note-range" min="0" max="10" step="1">
|
||||
</p>
|
||||
</div>
|
||||
<!-- <div class="col-md-6 offset-md-3">
|
||||
<p class="note">
|
||||
<label for="note"> Quelle note sur 10 donneriez-vous à l'exposition ? </label><br>
|
||||
<select name="note" id="note">
|
||||
<option value="zero">0</option>
|
||||
<option value="un">1</option>
|
||||
<option value="deux">2</option>
|
||||
<option value="trois">3</option>
|
||||
<option value="quatre">4</option>
|
||||
<option value="cinq">5</option>
|
||||
<option value="six">6</option>
|
||||
<option value="sept">7</option>
|
||||
<option value="huit">8</option>
|
||||
<option value="neuf">9</option>
|
||||
<option value="dix">10</option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
<div class="col-md-6 offset-md-3 form-input">
|
||||
<label for="commentaire">Commentaire : </label><br>
|
||||
<textarea name="commentaire" id="ameliorer"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<p class="commentaire">
|
||||
<label for="commentaire">Commentaire : </label><br>
|
||||
<textarea name="ameliorer" id="ameliorer"></textarea>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<p class="bonheur">
|
||||
<label for="bonheur"> Placez votre humeur sur cette barre du bonheur : </label><br>
|
||||
<input type="range">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<input type="submit" class="envoyer btn btn-primary btn-lg w-100" value="Envoyer">
|
||||
@@ -104,7 +104,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
21
code/formulaire/main.js
Normal file
21
code/formulaire/main.js
Normal file
@@ -0,0 +1,21 @@
|
||||
document.getElementById("form").addEventListener("submit", function (event) {
|
||||
let payload = {}
|
||||
event.preventDefault();
|
||||
let data = new FormData(event.target);
|
||||
data.append("note", parseInt(document.getElementById("note-range").value))
|
||||
data.append("source","website")
|
||||
let urlEncoded = new URLSearchParams(Object.fromEntries(data.entries()))
|
||||
fetch("http://localhost:8080/add_review", {
|
||||
method: "POST",
|
||||
headers:{
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: urlEncoded
|
||||
}).then(res => {
|
||||
document.location = "/merci.html";
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("note-range").addEventListener("input", function (event) {
|
||||
document.getElementById("note-display").innerHTML = event.target.value;
|
||||
});
|
||||
@@ -3,6 +3,7 @@
|
||||
<title>Nom de l'exposition</title>
|
||||
<link href="style2.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -1,8 +1,28 @@
|
||||
/* .container{
|
||||
background-color: #FAEBD7;
|
||||
} */
|
||||
.form-input {
|
||||
font-size: 25px;
|
||||
border-top: 3px #6B8E23 solid;
|
||||
border-right: 3px #6B8E23 solid;
|
||||
border-bottom: 3px #6B8E23 solid;
|
||||
border-left: 3px #6B8E23 solid;
|
||||
border-radius: 10px;
|
||||
padding: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-content: space-between;
|
||||
gap: 10px;
|
||||
align-content: space-around;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.form-input > textarea {
|
||||
width: -moz-available;
|
||||
width: -webkit-fill-available;;
|
||||
}
|
||||
/*
|
||||
.sexe {
|
||||
font-size: 25px;
|
||||
border-top: 3px #6B8E23 solid;
|
||||
@@ -90,7 +110,7 @@
|
||||
|
||||
.end{
|
||||
background-color: #6B8E23;
|
||||
}
|
||||
} */
|
||||
|
||||
/* .banniere {
|
||||
padding: 100px;
|
||||
|
||||
Reference in New Issue
Block a user