[javascript] problème de compatibilité internet explorer

[Résolu/Fermé]
Signaler
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
-
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
-
Bonjour tout le monde,
J'ai un souci de compatibilité de mon code avec Internet explorer. Sous chrome, il n'y a aucun souci mais IE ...
J'ai un formulaire de commande sous forme de tableau avec calcul de la somme globale qui marche parfaitement sous chrome.
Je ne sais pas si ma syntaxe est mauvaise dans le formulaire ou le javascript (peut etre les deux d'ailleurs)
pour info je suis novice et je me contente de "bricoler" des petits scripts existant en javascript.

HTML:

<form action="traitement/envoi_bdc_pepere.php" method="post" id="formulaire" Onsubmit='return window.confirm("Voulez vous valider cette commande ?");'>
<table id="tableau2">
<tr><center><br /><td colspan="4" style="border:0px;"><a href ="http://www.labrasseriedupepere.fr/"><img src="image/brasserie_pepere/logo-brasseriedupepere.png" alt="LA BRASSERIE DU PEPERE" title=""></a></td></center></tr>
<tr><td colspan="4" style="border:0px;">La brasserie Pépère accorde 20% de remise sur l'ensemble de ses produits</td></tr>
<tr>
<td style="border:none; background-color: transparent;"></td>
<td style="width:80px;">Capacité</td>
<td style="width:80px;">Prix CE</td>
<td style="width:60px;">Quantité<br />désirée</td>
</tr>
<!-- Espace dans le tableau -->
<tr colspan="4" style ="background-color: transparent;border:none; height:5px;"></tr>

<!-- Biere blonde -->
<tr>
<td rowspan="2"class="titre_biere_commande">Bière blonde</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="blonde33" name="blonde33" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="blonde75" name="blonde75" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<!-- Espace dans le tableau -->
<tr colspan="4" style ="background-color: transparent;border:none; height:5px;"></tr>

<!-- Biere ambree -->
<tr>
<td rowspan="2" class="titre_biere_commande">Bière ambrée</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="ambree33" name="ambree33" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="ambree75" name="ambree75" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<!-- Espace dans le tableau -->
<tr colspan="4" style ="background-color: transparent;border:none; height:5px;"></tr>

<!-- Biere blanche -->
<tr>
<td rowspan="2" class="titre_biere_commande">Bière blanche</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="blanche33" name="blanche33" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="blanche75" name="blanche75" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<!-- Espace dans le tableau -->
<tr colspan="4" style ="background-color: transparent;border:none; height:5px;"></tr>

<!-- Biere rousse -->
<tr>
<td rowspan="2" class="titre_biere_commande">Bière rousse miel et châtaignes</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="rousse33" name="rousse33" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="rousse75" name="rousse75" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<!-- Espace dans le tableau -->
<tr colspan="4" style ="background-color: transparent;border:none; height:5px;"></tr>

<!-- Biere cerise -->
<tr>
<td rowspan="2" class="titre_biere_commande">Bière cerise gingembre</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="cerise33" name="cerise33" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="cerise75" name="cerise75" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>

<!-- Espace dans le tableau -->
<tr colspan="4" style ="background-color: transparent;border:none; height:5px;"></tr>

<!-- Pack 6 bieres 33cl -->
<tr>
<td class="titre_biere_commande">Pack Découverte<br />des 6 bières</td>
<td>33 cl</td>
<td>13.45€</td>
<td><input id="pack1" name="pack33" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>

<!-- Espace dans le tableau -->
<tr colspan="4" style ="background-color: transparent;border:none; height:5px;"></tr>

<!-- Pack 3 bieres 75cl -->
<tr>
<td class="titre_biere_commande">Tripack Découverte<br />de 3 bières</td>
<td>75 cl</td>
<td>12.00€</td>
<td><input id="pack2" name="pack75" style="text-align:center;width:30px;" type="text" onkeypress="chiffres(event)" min="0" onBlur="calcul()" value="0"/></td>
</tr>
<!-- choix des 3 bieres du tri pack -->
<tr>
<td>Merci de choisir vos bières pour le tripack</td>
<td colspan="3" style ="text-align:left">
<input type="number" name="blonde" id="blonde" min="0" onClick="pluriel()" value="0" style="width: 30px;"/>Bière blonde</label><br />
<input type="number" name="ambree" id="ambree" min="0" value="0" style="width: 30px;"/><label for="ambree">Bière ambrée</label><br />
<input type="number" name="blanche" id="blanche" min="0" value="0" style="width: 30px;"/><label for="blanche">Bière blanche</label><br />
<input type="number" name="rousse" id="rousse" min="0" value="0" style="width: 30px;"/><label for="rousse">Bière rousse</label><br />
<input type="number" name="cerise" id="cerise" min="0" value="0" style="width: 30px;"/><label for="cerise">Bière cerise</label>
</td>
</tr>
<!-- Espace dans le tableau -->
<tr colspan="4" style ="background-color: transparent;border:none; height:5px;"></tr>
<tr>
<td colspan="2" style="background-color: transparent; border:none;"></td>
<td style="border:0px;">Total</td>
<td style="border:0px;"><input type="text" id="total" name="total" style="text-align:center;width:70px;" value="0" /></td>
</tr>
<tr>
<td style="border:0px;" colspan="4"><center><input name="Submit" type="submit" value="Valider la commande" /></center></td>
</tr>
</table>
</form>


Javascript


//calcul du prix global de la commande
function calcul(){

// valeur 0 si aucune valeur rentrée
var inputList = document.getElementById("formulaire").elements;
var alertTxt = "";
var n = inputList.length;
var i;

for (i=0; i<n; i++)
{
if (inputList[i].type.toLowerCase()=="text" && inputList[i].value.length==0)
{
inputList[i].value = "0";
}
}



// calcul du cout total de la commande
var euro = ('€')
var prix1 = "2.25"
var prix2 = "4"
var prix3 = "13.45"
var prix4 = "12.00"

var tot_blonde33 = parseFloat(document.getElementById('blonde33').value) * parseFloat(prix1);
var tot_blonde75 = parseFloat(document.getElementById('blonde75').value)* parseFloat(prix2);
var tot_ambree33 = parseFloat(document.getElementById('ambree33').value)* parseFloat(prix1);
var tot_ambree75 = parseFloat(document.getElementById('ambree75').value)* parseFloat(prix2);
var tot_blanche33 = parseFloat(document.getElementById('blanche33').value)* parseFloat(prix1);
var tot_blanche75 = parseFloat(document.getElementById('blanche75').value)* parseFloat(prix2);
var tot_rousse33 = parseFloat(document.getElementById('rousse33').value)* parseFloat(prix1);
var tot_rousse75 = parseFloat(document.getElementById('rousse75').value)* parseFloat(prix2);
var tot_cerise33 = parseFloat(document.getElementById('cerise33').value)* parseFloat(prix1);
var tot_cerise75 = parseFloat(document.getElementById('cerise75').value)* parseFloat(prix2);

var resultat = parseFloat(tot_blonde33) +
parseFloat(tot_blonde75) +
parseFloat(tot_ambree33) +
parseFloat(tot_ambree75) +
parseFloat(tot_blanche33) +
parseFloat(tot_blanche75) +
parseFloat(tot_rousse33) +
parseFloat(tot_rousse75) +
parseFloat(tot_cerise33) +
parseFloat(tot_cerise75);

var resultat = parseFloat(Math.round(resultat * 100) / 100).toFixed(2)
total.value = resultat + euro;
}







// script pour saisie numerique
function chiffres(event) {
// Compatibilité IE / Firefox
if(!event && window.event) {
event=window.event;
}
// IE
if(event.keyCode < 48 || event.keyCode > 57) {
event.returnValue = false;
event.cancelBubble = true;
}
// DOM
if(event.which < 48 || event.which > 57) {
event.preventDefault();
event.stopPropagation();
}
}




Toute aide est la bienvenue, merci

4 réponses

Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
115
Bonjour.

J'ai corrigé les erreurs.

ça fonctionne avec IE11.



<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="traitement/envoi_bdc_pepere.php" id="formulaire" method="post" name="formulaire" onsubmit='return window.confirm("Voulez vous valider cette commande ?");'>
<table id="tableau2">
<tr>
<td colspan="4" style="border:0px;">
<center>
<a href="http://www.labrasseriedupepere.fr/"><img alt="LA BRASSERIE DU PEPERE" src="image/brasserie_pepere/logo-brasseriedupepere.png" title=""></a>
</center>
</td>
</tr>
<tr>
<td colspan="4" style="border:0px;">La brasserie Pépère accorde 20% de remise sur l'ensemble de ses produits</td>
</tr>
<tr>
<td style="border:none; background-color: transparent;"></td>
<td style="width:80px;">Capacité</td>
<td style="width:80px;">Prix CE</td>
<td style="width:60px;">Quantité<br>
désirée</td>
</tr><!-- Espace dans le tableau -->
<tr style="background-color: transparent;border:none; height:5px;">
<td></td>
</tr><!-- Biere blonde -->
<tr>
<td class="titre_biere_commande" rowspan="2">Bière blonde</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="blonde33" min="0" name="blonde33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="blonde75" min="0" name="blonde75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr><!-- Espace dans le tableau -->
<tr style="background-color: transparent;border:none; height:5px;">
<td></td>
</tr><!-- Biere ambree -->
<tr>
<td class="titre_biere_commande" rowspan="2">Bière ambrée</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="ambree33" min="0" name="ambree33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="ambree75" min="0" name="ambree75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr><!-- Espace dans le tableau -->
<tr style="background-color: transparent;border:none; height:5px;">
<td></td>
</tr><!-- Biere blanche -->
<tr>
<td class="titre_biere_commande" rowspan="2">Bière blanche</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="blanche33" min="0" name="blanche33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="blanche75" min="0" name="blanche75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr><!-- Espace dans le tableau -->
<tr style="background-color: transparent;border:none; height:5px;">
<td></td>
</tr><!-- Biere rousse -->
<tr>
<td class="titre_biere_commande" rowspan="2">Bière rousse miel et châtaignes</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="rousse33" min="0" name="rousse33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="rousse75" min="0" name="rousse75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr><!-- Espace dans le tableau -->
<tr style="background-color: transparent;border:none; height:5px;">
<td></td>
</tr><!-- Biere cerise -->
<tr>
<td class="titre_biere_commande" rowspan="2">Bière cerise gingembre</td>
<td>33 cl</td>
<td>2.25€</td>
<td><input id="cerise33" min="0" name="cerise33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr>
<tr>
<td>75 cl</td>
<td>4.00€</td>
<td><input id="cerise75" min="0" name="cerise75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr><!-- Espace dans le tableau -->
<tr style="background-color: transparent;border:none; height:5px;">
<td></td>
</tr><!-- Pack 6 bieres 33cl -->
<tr>
<td class="titre_biere_commande">Pack Découverte<br>
des 6 bières</td>
<td>33 cl</td>
<td>13.45€</td>
<td><input id="pack1" min="0" name="pack33" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr><!-- Espace dans le tableau -->
<tr style="background-color: transparent;border:none; height:5px;">
<td></td>
</tr><!-- Pack 3 bieres 75cl -->
<tr>
<td class="titre_biere_commande">Tripack Découverte<br>
de 3 bières</td>
<td>75 cl</td>
<td>12.00€</td>
<td><input id="pack2" min="0" name="pack75" onblur="calcul()" onkeyup="calcul()" onkeypress="chiffres(event)" style="text-align:center;width:30px;" type="text" value="0"></td>
</tr><!-- choix des 3 bieres du tri pack -->
<tr>
<td>Merci de choisir vos bières pour le tripack</td>
<td colspan="3" style="text-align:left"><input id="blonde" min="0" name="blonde" onclick="pluriel()" style="width: 30px;" type="number" value="0"><label for="blonde">Bière
blonde</label><br>
<input id="ambree" min="0" name="ambree" style="width: 30px;" type="number" value="0"><label for="ambree">Bière ambrée</label><br>
<input id="blanche" min="0" name="blanche" style="width: 30px;" type="number" value="0"><label for="blanche">Bière blanche</label><br>
<input id="rousse" min="0" name="rousse" style="width: 30px;" type="number" value="0"><label for="rousse">Bière rousse</label><br>
<input id="cerise" min="0" name="cerise" style="width: 30px;" type="number" value="0"><label for="cerise">Bière cerise</label></td>
</tr><!-- Espace dans le tableau -->
<tr style="background-color: transparent;border:none; height:5px;">
<td></td>
</tr>
<tr>
<td colspan="2" style="background-color: transparent; border:none;"></td>
<td style="border:0px;">Total</td>
<td style="border:0px;"><div style="min-width:100px;"><input id="total" name="total" style="text-align:center;width:70px;" type="text" value="0">€</div></td>
</tr>
<tr>
<td colspan="4" style="border:0px;">
<center>
<input name="Submit" type="submit" value="Valider la commande">
</center>
</td>
</tr>
</table>
</form>
<script>



//calcul du prix global de la commande
function calcul(){

var total = document.getElementById('total');

// valeur 0 si aucune valeur rentrée
var inputList = document.getElementById("formulaire").elements;
var alertTxt = "";
var n = inputList.length;
var i;

for (i=0; i<n; i++)
{

if (inputList[i].type.toLowerCase()=="text" && inputList[i].value.length==0)
{
inputList[i].value = "0";
}
}



// calcul du cout total de la commande
var prix1 = "2.25"
var prix2 = "4"
var prix3 = "13.45"
var prix4 = "12.00"

var tot_blonde33 = parseFloat(document.getElementById('blonde33').value) * parseFloat(prix1);
var tot_blonde75 = parseFloat(document.getElementById('blonde75').value)* parseFloat(prix2);
var tot_ambree33 = parseFloat(document.getElementById('ambree33').value)* parseFloat(prix1);
var tot_ambree75 = parseFloat(document.getElementById('ambree75').value)* parseFloat(prix2);
var tot_blanche33 = parseFloat(document.getElementById('blanche33').value)* parseFloat(prix1);
var tot_blanche75 = parseFloat(document.getElementById('blanche75').value)* parseFloat(prix2);
var tot_rousse33 = parseFloat(document.getElementById('rousse33').value)* parseFloat(prix1);
var tot_rousse75 = parseFloat(document.getElementById('rousse75').value)* parseFloat(prix2);
var tot_cerise33 = parseFloat(document.getElementById('cerise33').value)* parseFloat(prix1);
var tot_cerise75 = parseFloat(document.getElementById('cerise75').value)* parseFloat(prix2);

var resultat = parseFloat(tot_blonde33) +
parseFloat(tot_blonde75) +
parseFloat(tot_ambree33) +
parseFloat(tot_ambree75) +
parseFloat(tot_blanche33) +
parseFloat(tot_blanche75) +
parseFloat(tot_rousse33) +
parseFloat(tot_rousse75) +
parseFloat(tot_cerise33) +
parseFloat(tot_cerise75);

var resultat = parseFloat(Math.round(resultat * 100) / 100).toFixed(2)
total.value = resultat;
}







// script pour saisie numerique
function chiffres(event) {
// Compatibilité IE / Firefox
if(!event && window.event) {
event=window.event;
}
// IE
if(event.keyCode < 48 || event.keyCode > 57) {
event.returnValue = false;
event.cancelBubble = true;
}
// DOM
if(event.which < 48 || event.which > 57) {
event.preventDefault();
event.stopPropagation();
}
}
</script>
</body>
</html>

Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
115
IE disait dans le console que total n'existait pas.
J'ai donc mis en évidence que total était l’élément html avec un id total.

var total = document.getElementById('total');
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
Grand merci Codeurh24 pour la correction et surtout l'explication :) .
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
Je viens de le tester c'est vraiment ce que je voulais.
Encore un grand merci Codeurh24 :)
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
J'abuse encore un peu mais est il possible lors de la validation du formulaire d'afficher une petite page avec le recapitulatif de la commande avec le choix de validation ou non ?

Juste une piste me suffit, je chercherai par moi même.
Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
115
Si j'ai bien compris tu souhaite afficher une petite fenêtre et en fond garder la page ?

Le plus simple c'est de faire une page php récapitulatif une fois le formulaire validé.

tu peux aussi stocker les informations dans une session php.
comme ça lors du récapitulatif il peut revenir en arrière ou sinon avancer au payement.
Messages postés
237
Date d'inscription
samedi 19 juillet 2008
Statut
Membre
Dernière intervention
28 mai 2016
4
merci pour le conseil je vais essayer de faire comme vous dites, cela parait effectivement le mieux a faire.
Encore merci :)