Mentions légales du service

Skip to content
Snippets Groups Projects
Commit f04ac839 authored by Léo PASQUEREAU's avatar Léo PASQUEREAU
Browse files

Create notekForm.html

parent 30bb7e3b
Branches Notek-JS
No related tags found
7 merge requests!101Taking Cool-in-v2 into test,!100Deploying Cool-in campain,!99Preparing Cool-in campain,!96M2-2022,!95Final merge,!94Merge JS branch into HW,!91Notek js
<center>
<h2>Formulaire</h2>
<form name="noteForm">
<fieldset >
<legend>Note the stress level of the first todo</legend>
<strong>Not stressful</strong>
<input type="radio" name="stress1" id="1" value="1"/>
<label for="1">1</label>
<input type="radio" name="stress1" id="2" value="2"/>
<label for="2">2</label>
<input type="radio" name="stress1" id="3" value="3"/>
<label for="3">3</label>
<input type="radio" name="stress1" id="4" value="4"/>
<label for="4">4</label>
<input type="radio" name="stress1" id="5" value="5"/>
<label for="5">5</label>
<input type="radio" name="stress1" id="6" value="6"/>
<label for="6">6</label>
<input type="radio" name="stress1" id="7" value="7"/>
<label for="7">7</label>
<input type="radio" name="stress1" id="8" value="8"/>
<label for="8">8</label>
<input type="radio" name="stress1" id="9" value="9"/>
<label for="9">9</label>
<input type="radio" name="stress1" id="10" value="10"/>
<label for="10">10</label>
<strong>Extremely stressful</strong>
</fieldset><br>
<fieldset >
<legend>Note the stress level of the second todo</legend>
<strong>Not stressful</strong>
<input type="radio" name="stress2" id="1" value="1"/>
<label for="1">1</label>
<input type="radio" name="stress2" id="2" value="2"/>
<label for="2">2</label>
<input type="radio" name="stress2" id="3" value="3"/>
<label for="3">3</label>
<input type="radio" name="stress2" id="4" value="4"/>
<label for="4">4</label>
<input type="radio" name="stress2" id="5" value="5"/>
<label for="5">5</label>
<input type="radio" name="stress2" id="6" value="6"/>
<label for="6">6</label>
<input type="radio" name="stress2" id="7" value="7"/>
<label for="7">7</label>
<input type="radio" name="stress2" id="8" value="8"/>
<label for="8">8</label>
<input type="radio" name="stress2" id="9" value="9"/>
<label for="9">9</label>
<input type="radio" name="stress2" id="10" value="10"/>
<label for="10">10</label>
<strong>Extremely stressful</strong>
</fieldset><br>
<fieldset >
<legend>Note the stress level of the third todo</legend>
<strong>Not stressful</strong>
<input type="radio" name="stress3" id="1" value="1"/>
<label for="1">1</label>
<input type="radio" name="stress3" id="2" value="2"/>
<label for="2">2</label>
<input type="radio" name="stress3" id="3" value="3"/>
<label for="3">3</label>
<input type="radio" name="stress3" id="4" value="4"/>
<label for="4">4</label>
<input type="radio" name="stress3" id="5" value="5"/>
<label for="5">5</label>
<input type="radio" name="stress3" id="6" value="6"/>
<label for="6">6</label>
<input type="radio" name="stress3" id="7" value="7"/>
<label for="7">7</label>
<input type="radio" name="stress3" id="8" value="8"/>
<label for="8">8</label>
<input type="radio" name="stress3" id="9" value="9"/>
<label for="9">9</label>
<input type="radio" name="stress3" id="10" value="10"/>
<label for="10">10</label>
<strong>Extremely stressful</strong>
</fieldset>
</form>
<button>Submit</button>
</center>
<h2>Récupération des données du formulaire</h2>
<div id="json">
<span></span>
</div>
<script type="text/javascript">
/* escape = function (str) {
return str
.replace(/[\\]/g, '\\\\')
.replace(/[\"]/g, '\\\"')
.replace(/[\/]/g, '\\/')
.replace(/[\b]/g, '\\b')
.replace(/[\f]/g, '\\f')
.replace(/[\n]/g, '\\n')
.replace(/[\r]/g, '\\r')
.replace(/[\t]/g, '\\t');
};*/
//Le bouton qui va déclencher le script js
let btnSubmit = document.querySelector("button");
btnSubmit.addEventListener("click", () => {
//check si le formulaire a été correctement rempli
//on crée un formData
let fd = new FormData();
//on réccupère les données du formulaire
let stress1 = document.querySelectorAll("input[name = 'stress1']");
for(i=0; i<stress1.length; i++){
if(stress1[i].checked){
NiveauStress1 = stress1[i].value;
}
}
let stress2 = document.querySelectorAll("input[name = 'stress2']");
for(i=0; i<stress2.length; i++){
if(stress2[i].checked){
NiveauStress2 = stress2[i].value;
}
}
let stress3 = document.querySelectorAll("input[name = 'stress3']");
for(i=0; i<stress3.length; i++){
if(stress3[i].checked){
NiveauStress3 = stress3[i].value;
}
}
//on rempli notre FormData
fd.append("NiveauStress1", NiveauStress1);
fd.append("NiveauStress2", NiveauStress2);
fd.append("NiveauStress3", NiveauStress3);
console.log(Array.from(fd));
let JSONString = JSON.stringify(Array.from(fd));
console.log(JSONString);
//let EscapedJSONString = escape(JSONString);
// console.log(EscapedJSONString);
document.querySelector("#json span").textContent = JSONString;
})
</script>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment