Je crée une calculatrice en js. Je voulais utiliser le formulaire et le bouton d'envoi, mais malgré le fait qu'il soit entré pour renvoyer false, cela reste vrai et souhaite accéder à une page inexistante en php.
la validation est également ajoutée mais je ne sais pas ce qui cause le problème
<html>
<body>
<center>
<form name="formularz" action="/action_page.php" onsubmit="return sprawdzForm()" method="post">
A: <input type="number" name="a">
<select id="Wybieracz">
<option value="+">Dodawanie</option>
<option value="-">Odejmowanie</option>
<option value="*">Mnożenie</option>
<option value="/">Dzielenie</option>
</select>
B: <input type="number" name="b">
<input type="submit" value="Submit">
</form>
<span id="par1"></span>
<script>
function sprawdzForm() {
var wynik = 0;
var x = document.forms["formularz"]["a"].value;
x = parseInt(x);
var y = document.forms["formularz"]["b"].value;
y = parseInt(y);
var znaczek = document.forms["formularz"]["Wybieracz"].value;
var txt = document.getElementById(par1);
if(isNaN(a) || isNaN(b)) {
par1.style.backgroundColor = "red";
par1.innerHTML = "Podaj liczbÄ™";
}
if(a == "" || b == "") {
par1.style.backgroundColor = "red";
par1.innerHTML = "a lub b jest puste";
}
switch(znaczek){
case "+":
wynik = x+y;
break;
case "-":
wynik = x-y;
break;
case "*":
wynik = x*y
break;
case "/":
wynik = x/y;
break;
}
par1.style.backgroundColor = "green";
par1.innerHTML = "Twój wynik to : " + wynik;
return false;
}
</script>
</center>
</body>
</html>```
3 Réponses :
Dans cette ligne: var txt = document.getElementById(par1); vous définissez la variable txt sur un élément trouvé avec l'ID "par1". Vous devez donc d'abord mettre par1 entre guillemets:
var txt = document.getElementById("par1");
Après cela, toutes vos références à cet élément utilisent une variable inexistante par1 ... remplacez-la par txt et les choses iront mieux. Je ne peux pas faire de commentaire sur la partie php, on dirait que cela devrait fonctionner, théoriquement.
ok donc je l'ai fait (remplacé "par1" par "txt") et cela ne fonctionne toujours pas
Votre code échoue.
<html>
<body>
<form
name="formularz"
action="/action_page.php"
onsubmit="sprawdzForm(); return false"
method="post"
>
A: <input type="number" name="a" />
<select id="Wybieracz">
<option value="+">Dodawanie</option>
<option value="-">Odejmowanie</option>
<option value="*">Mnożenie</option>
<option value="/">Dzielenie</option>
</select>
B: <input type="number" name="b" />
<input type="submit" value="Submit">
</form>
<span id="par1"></span>
<script>
function sprawdzForm() {
console.log("function working");
}
</script>
</body>
</html>
Mais ce code fonctionne, vous pouvez essayer ceci
a is undefined
Voici une solution de contournement. créez votre formulaire comme ça
function sprawdzForm(e) {
//prevent default behaviour of the form
e.preventDefault()
/*Do some code here forexaple validation*/
//submit the form
e.target.submit()
}
puis dans votre fonction javascript, évitez le comportement par défaut du form puis soumettez-le quand vous le souhaitez
<form onsubmit="sprawdzForm(event)" name="formularz" action="/action_page.php" method="post"> <!--add your from elements --> <input type="submit" value="Submit"> </form>