Transférer les données d'un formulaire en javascript
Bonjour,
J'ai grandement besoin de vos lumières car je bloque sur le point suivant :
après avoir valider le formulaire via le bouton "submit", comment faire pour transférer le résultat obtenu vers un élément <span> situé dans une autre page html en javascript?
car :
- quand je valide le formulaire en cliquant sur le bouton, la redirection se fait bien vers la page2.html et SEUL le "final_cost" qui devrait être dans la <span id="result8"></span> n'apparait pas, alors que les options des éléments <select> apparaissent bien respectivement dans les "result4" et "result5".
- quand je valide une première fois avec la touche entrée de mon clavier, le résultat "final_cost" apparait sur la page1.html à la suite du formulaire et ensuite quand je valide avec le bouton, la redirection se fait vers la page2.html mais SEUL "final_cost" n'apparait pas.
- et quand je supprime cette partie du script :
Code:
1
2
3
4
5
6
| $("#bout").click(function()
{
var totalPrice=$("#final_cost").val();
sessionStorage.setItem("getvalue8",totalPrice);
window.location.href="page2.html";
}); |
et que je click sur le bouton submit, le résultat "final_cost" apparait bien sur la page1.html juste après le formulaire et bien sure aucune redirection ne s'opère vers la page2.html or moi je veux que ce résultat soit transféré sur la page2.html.
Je précise également que la valeur "final_cost" est générées par un script qui calcul un prix en fonction de divers paramètres.
Alors s'il vous plait, comment faire ?
merci par avance pour votre aide.
Page1.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
| <form>
<input class=" input is-primary" type="text" placeholder="Saissisez l'adresse de prise en charge" id="from" required autofocus>
<i aria-hidden="true" class="dot circle outline link icon" id="locator-button"></i>
<input id="origin" type="hidden" name="origin" required/>
<input class="input is-primary" type="text" placeholder="Saisissez l'adresse de destination" id="to" required>
<input id="destination" type="hidden" name="destination" required/>
<button class="button is-link is-rounded" type="submit" name="submit" value="calculate" onclick="passval();" id="bout">Lancer l'estimation</button>
</form>
<select name="nbr" id="nbr" >
<option>1</option>
<option>2</option>
</select>
<select name="nbrR" id="nbrR" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div id="result">
<span id="final_cost"></span>
</div> |
Page2.html
Code:
1
2
3
4
5
| <div id="result">
<span id="result4"></span>
<span id="result5"></span>
<span id="result8"></span>
</div> |
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
| <script>
$("#bout").click(function()
{
var totalPrice=$("#final_cost").val();
sessionStorage.setItem("getvalue8",totalPrice);
window.location.href="page2.html";
});
function passval()
{
const selecttext=document.getElementById("nbr").value;
const selecttext2=document.getElementById("nbrR").value;
sessionStorage.setItem("getvalue4",selecttext);
sessionStorage.setItem("getvalue5",selecttext2);
return false;
};
document.getElementById("result1").innerHTML=sessionStorage.getItem("getvalue");
document.getElementById("result2").innerHTML=sessionStorage.getItem("getvalue2");
document.getElementById("result4").innerHTML=sessionStorage.getItem("getvalue4");
document.getElementById("result5").innerHTML=sessionStorage.getItem("getvalue5");
document.getElementById("result8").innerHTML=sessionStorage.getItem("getvalue8");
</script> |
