Sujet Précédent Sujet Suivant

[javascript] problème de compatibilité internet explorer

Résolu/Fermé
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 - 4 mai 2016 à 10:53
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 - 5 mai 2016 à 18:53
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

A voir également:

4 réponses

Réponse 1 / 4
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 5/05/2016 à 12:02
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>
0
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
5 mai 2016 à 12:06
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');
0
Réponse 2 / 4
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
5 mai 2016 à 13:51
Grand merci Codeurh24 pour la correction et surtout l'explication :) .
0
Réponse 3 / 4
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
5 mai 2016 à 14:03
Je viens de le tester c'est vraiment ce que je voulais.
Encore un grand merci Codeurh24 :)
0
Réponse 4 / 4
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
5 mai 2016 à 14:10
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.
0
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
5 mai 2016 à 14:37
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.
0
ced3c Messages postés 237 Date d'inscription samedi 19 juillet 2008 Statut Membre Dernière intervention 28 mai 2016 5
5 mai 2016 à 18:53
merci pour le conseil je vais essayer de faire comme vous dites, cela parait effectivement le mieux a faire.
Encore merci :)
0

Discussions similaires

Formaté mais pas de connexion Internet ?
VissErale -
VissErale -

4 réponses
App explorer Sa sert a quoi ?
Mada_alpha -
SATS_fr -

1 réponse
35 GO à l'étranger
Laurence -
Laurence -

2 réponses