[JS]Problème d'execution de fction sur onchange() avec IE7

Problème d'execution de fction sur onchange() avec IE7 [JS] - HTML/CSS - Programmation

Marsh Posté le 13-08-2007 à 19:00:20    

Bonjour à tous et à toutes.
Voici mon problème j'ai une petit fonction js qui est appelée sur un onchange() d'une liste déroulante HTML.
Or cette fonction JS fonctionne très bien sous Mozila FF et pas du tout sous IE 7 :/
IE m'indique "erreur d'execution inconnue" Code 0.
J'ai également un problème d'affichage de la liste déroulante. Quand je clic dessus je ne voit pas les valeurs présentes dans la liste!
 
 
Liste HTML

Code :
  1. <select name="map1" size="1" class="mon_sel" onchange="map();">
  2.    <option selected value=""></option>
  3.    <option value="de_dust2">de_dust2</option>
  4.    <option value="de_train">de_train</option>
  5.    <option value="de_cbble">de_cbble</option>
  6.    <option value="de_inferno">de_inferno</option>
  7.    <option value="de_nuke">de_nuke</option>
  8.    <option value="cpl_mil">cpl_mil</option>
  9.    </select>


Fonction JS

Code :
  1. <script language="javascript">
  2. function map(){
  3. if(document.frm_ajout_war.map1.value!="" ){
  4.   document.getElementById('map1').innerHTML='<td>'+
  5.   'Map 1:'+
  6.  '</td>'+
  7.  '<td>'+
  8.   '<input name="score_map1_rebirth" type="text" value="0" size="1" maxlength="2" />'+
  9.   '-'+
  10.   '<input name="score_map1_adv" type="text" value="0" size="1" maxlength="2" />'+
  11.  '</td>';
  12.  }
  13.  else{
  14.  document.getElementById('map1').innerHTML=''
  15.  }
  16. if(document.frm_ajout_war.map2.value!="" ){
  17.  document.getElementById('map2').innerHTML='<td>'+
  18.  'Map 2:'+
  19. '</td>'+
  20. '<td>'+
  21.  '<input name="score_map2_rebirth" type="text" value="0" size="1" maxlength="2" />'+
  22.  '-'+
  23.  '<input name="score_map2_adv" type="text" value="0" size="1" maxlength="2" />'+
  24. '</td>';
  25. }
  26. else{
  27. document.getElementById('map2').innerHTML=''
  28. }
  30. if(document.frm_ajout_war.map3.value!="" ){
  31. document.getElementById('map3').innerHTML='<td>'+
  32. 'Map 3:'+
  33. '</td>'+
  34. '<td>'+
  35.  '<input name="score_map3_rebirth" type="text" value="0" size="1" maxlength="2" />'+
  36.  '-'+
  37.  '<input name="score_map3_adv" type="text" value="0" size="1" maxlength="2" />'+
  38. '</td>';
  39. }
  40. else{
  41. document.getElementById('map3').innerHTML=''
  42. }
  43. }
  44. </script>


 
CSS de la liste déroulante

Code :
  1. SELECT.mon_sel {
  2. WIDTH: 150px;
  3. }


Message édité par Stuntman le 13-08-2007 à 19:00:55
Reply

Marsh Posté le 13-08-2007 à 19:00:20   

Reply

Marsh Posté le 14-08-2007 à 14:27:28    

<select name="map1" size="1"
 
[:pingouino dei]


---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 14-08-2007 à 16:37:51    

Ba wé pour qu'il affiche qu'un seul élément à la fois non?  :??:  :(

Message cité 1 fois
Reply

Marsh Posté le 14-08-2007 à 16:42:46    

on pourrait voir le code HTML associé s'il te plait. Car là tu essaye de melanger les name et les id ce qui n'est pas bon pour IE et de plus on ne fait pas de innerHTML dans un <table> ca pete à la gueule sous IE

Message cité 1 fois
Reply

Marsh Posté le 14-08-2007 à 17:20:55    

Stuntman a écrit :

Ba wé pour qu'il affiche qu'un seul élément à la fois non?  :??:  :(


ah oui dsl c'est moi qui chie :D


---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 14-08-2007 à 20:38:38    

gatsu35 a écrit :

on pourrait voir le code HTML associé s'il te plait. Car là tu essaye de melanger les name et les id ce qui n'est pas bon pour IE et de plus on ne fait pas de innerHTML dans un <table> ca pete à la gueule sous IE


 
Ok, mais moi j'en ai besoin de tableau dans mon inner (pour la présentation).

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. </head>
  6. <body>
  7. <center><b>- Ajouter une war -</b></center>
  8. <?php
  9. if($erreur>0)
  10. {
  11.  echo '<center><font color="red"><i>Tous les champs sont obligatoires.</i></font></center><br /><br />';
  12. }
  13. ?>
  14. <br /><br />
  15. <script language="javascript">
  16. function map(){
  17. if(document.frm_ajout_war.map1.value!="" ){
  18.   document.getElementById('map1').innerHTML='<td>'+
  19.   'Map 1:'+
  20.  '</td>'+
  21.  '<td>'+
  22.   '<input name="score_map1_rebirth" type="text" value="0" size="1" maxlength="2" />'+
  23.   '-'+
  24.   '<input name="score_map1_adv" type="text" value="0" size="1" maxlength="2" />'+
  25.  '</td>';
  26.  }
  27.  else{
  28.  document.getElementById('map1').innerHTML=''
  29.  }
  30. if(document.frm_ajout_war.map2.value!="" ){
  31.  document.getElementById('map2').innerHTML='<td>'+
  32.  'Map 2:'+
  33. '</td>'+
  34. '<td>'+
  35.  '<input name="score_map2_rebirth" type="text" value="0" size="1" maxlength="2" />'+
  36.  '-'+
  37.  '<input name="score_map2_adv" type="text" value="0" size="1" maxlength="2" />'+
  38. '</td>';
  39. }
  40. else{
  41. document.getElementById('map2').innerHTML=''
  42. }
  44. if(document.frm_ajout_war.map3.value!="" ){
  45. document.getElementById('map3').innerHTML='<td>'+
  46. 'Map 3:'+
  47. '</td>'+
  48. '<td>'+
  49.  '<input name="score_map3_rebirth" type="text" value="0" size="1" maxlength="2" />'+
  50.  '-'+
  51.  '<input name="score_map3_adv" type="text" value="0" size="1" maxlength="2" />'+
  52. '</td>';
  53. }
  54. else{
  55. document.getElementById('map3').innerHTML=''
  56. }
  57. }
  58. </script>
  59. <?php
  60. if (isset($_POST['saisie']))
  61. {
  62. if (($_POST['saisie'])=='oui')
  63. {
  64.  $erreur;
  65.  if (isset($_POST['date']))
  66.  {
  67.   $date=$_POST['date'];
  68.   if (($_POST['date'])=='')
  69.   {
  70.    $erreur=$erreur+1;
  71.   }
  72.  }
  73.  if (isset($_POST['type_match']))
  74.  {
  75.   $type_match=$_POST['type_match'];
  76.   if (($_POST['type_match'])=='')
  77.   {
  78.    $erreur=$erreur+1;
  79.   }
  80.  }
  81.  if (isset($_POST['adv']))
  82.  {
  83.   $adv=$_POST['adv'];
  84.   if (($_POST['adv'])=='')
  85.   {
  86.    $erreur=$erreur+1;
  87.   }
  88.  }
  89.  if (isset($_POST['map1']))
  90.  {
  91.   $map1=$_POST['map1'];
  92.   if (empty($map1))
  93.   {
  94.    $erreur=$erreur+1;
  95.   }
  96.  }
  97.  if (isset($_POST['map2']))
  98.  {
  99.   $map1=$_POST['map2'];
  100.   if (empty($map2))
  101.   {
  102.    $erreur=$erreur+1;
  103.   }
  104.  }
  105.  if (isset($_POST['map3']))
  106.  {
  107.   $map1=$_POST['map3'];
  108.   if (empty($map3))
  109.   {
  110.    $erreur=$erreur+1;
  111.   }
  112.  }
  113.  if (isset($_POST['rapport']))
  114.  {
  115.   $rapport=$_POST['rapport'];
  116.  }
  117. }
  118. if ($date!='')
  119. {
  120.  // connexion à la base
  121.  include('sql/startsql.php');
  122.  //  requête sql
  123.  $req = "INSERT INTO wars(adversaire,date,map1,map2,map3,typematch,rapport) VALUES('$adv','$date','$map1','$map2','$map3','$type_match','$rapport')";
  125.  // on insère les informations du formulaire dans la table
  126.  mysql_query($req) or die('Erreur SQL !'.$req.'<br>'.mysql_error());
  127.  mysql_close();  // on ferme la connexion
  128. ?>
  129.  <?php $ajout=true?>
  130.  <center><font color="red"><i>Wars ajoutée.</i></font></center><br /><br />
  131.  <script language="javascript">
  132.   setTimeout("window.location.replace('index.php')",3000)
  133.  </script>
  134. <?php
  135. }
  136. }
  137. ?>
  138. <?php
  139. if(empty($_SESSION['pseudo'])) // si non logué
  140. {
  141. echo "<br /><br />Vous n'êtes pas autorisé a accèdez à l'administration du site.<br /><br />";
  142. }
  143. else{ // si logué
  144. ?>
  145. <?php
  146. $date=date("d/m/Y" )
  147. ?>
  148. <?php
  149. if($ajout==false)
  150.  {
  151. ?>
  152. <form method="post" action="#" name="frm_ajout_war">
  153. <input type="hidden" name="saisie" value="oui" />
  154. <table align="center" border="0">
  155.  <tr align="center">
  156.   <td width="199">
  157.    Date  </td>
  158.   <td width="210">
  159.    <input name="date" type="text" maxlength="10" size="10"value="<?php echo $date ?>">
  160.    </td>
  161.  </tr>
  162.  <tr>
  163.   <td>
  164.    <br />
  165.   </td>
  166.  </tr>
  167.  <tr align="center">
  168.   <td colspan="2">
  169.    <b>Détails Match</b>
  170.   </td>
  171.  </tr>
  172.  <tr>
  173.   <td>
  174.    <br />
  175.   </td>
  176.  </tr>
  177.  <tr align="center">
  178.   <td>
  179.    Type de match
  180.   </td>
  181.   <td align="center">
  182.    <select name="type_match" size="1" class="mon_sel">
  183.     <option value="WCG Qualification">WCG Qualification</option>
  184.     <option value="ESL">ESL</option>
  185.    </select>
  186.   </td>
  187.  </tr>
  188.   <tr align="center">
  189.   <td>
  190.    Adversaire
  191.   </td>
  192.   <td align="center">
  193.    <input name="adv" type="text" size="20" maxlength="20" />
  194.   </td>
  195.  </tr>
  196.  <tr align="center">
  197.   <td>
  198.    Map 1
  199.   </td>
  200.   <td>
  201.    <select name="map1" size="1" class="mon_sel" onchange="map();">
  202.     <option selected value=""></option>
  203.     <option value="de_dust2">de_dust2</option>
  204.     <option value="de_train">de_train</option>
  205.     <option value="de_cbble">de_cbble</option>
  206.     <option value="de_inferno">de_inferno</option>
  207.     <option value="de_nuke">de_nuke</option>
  208.     <option value="cpl_mil">cpl_mil</option>
  209.     </select>
  210.   </td>
  211.  </tr>
  212.  <tr align="center">
  213.   <td>
  214.    Map 2
  215.   </td>
  216.   <td>
  217.    <select name="map2" size="1" class="mon_sel" onchange="map();">
  218.     <option selected value=""></option>
  219.     <option value="de_dust2">de_dust2</option>
  220.     <option value="de_train">de_train</option>
  221.     <option value="de_cbble">de_cbble</option>
  222.     <option value="de_inferno">de_inferno</option>
  223.     <option value="de_nuke">de_nuke</option>
  224.     <option value="cpl_mil">cpl_mil</option>
  225.     </select>
  226.   </td>
  227.  </tr>
  228.  <tr align="center">
  229.   <td>
  230.    Map 3
  231.   </td>
  232.   <td>
  233.    <select name="map3" size="1" class="mon_sel" onchange="map();">
  234.     <option selected value=""></option>
  235.     <option value="de_dust2">de_dust2</option>
  236.     <option value="de_train">de_train</option>
  237.     <option value="de_cbble">de_cbble</option>
  238.     <option value="de_inferno">de_inferno</option>
  239.     <option value="de_nuke">de_nuke</option>
  240.     <option value="cpl_mil">cpl_mil</option>
  241.     </select>
  242.   </td>
  243.  </tr>
  244.  <tr>
  245.   <td>
  246.    <br />
  247.   </td>
  248.  </tr>
  249.  <tr align="center">
  250.   <td colspan="2">
  251.    <b>Scores</b>
  252.   </td>
  253.  </tr>
  254.  <tr>
  255.   <td>
  256.    <br />
  257.   </td>
  258.  </tr>
  259.  <tr align="center" id="map1">
  260.  </tr>
  261.  <tr align="center" id="map2">
  262.  </tr>
  263.  <tr align="center" id="map3">
  264.  </tr>
  265.  <tr>
  266.   <td>
  267.    <br />
  268.   </td>
  269.  </tr>
  270.  <tr align="center">
  271.   <td colspan="2">
  272.    <b>Commentaires</b>
  273.   </td>
  274.  </tr>
  275.  <tr>
  276.   <td>
  277.    <br />
  278.   </td>
  279.  </tr>
  280.  <tr align="center">
  281.   <td colspan="2">
  282.    <textarea name="rapport" cols="50" rows="10">Votre texte ici, maximum 255 caractères.</textarea>
  283.   </td>
  284.  </tr>
  285.  <tr>
  286.   <td>
  287.    <br />
  288.   </td>
  289.  </tr>
  290.  <tr align="center">
  291.   <td align="right">
  292.    <input type="submit" value="Ajouter" name="submit" />
  293.   </td>
  294.   <td align="left">
  295.    <input type="reset" value="Effacer" name="reset" />
  296.   </td>
  297.  </tr>
  298. </table>
  299. </form>
  300. <br />
  301. <?php
  302. }
  303. }
  304. ?>
  305. <a href="?CONTENT=gestionnews"><center><b>- Retour -</b></center> </a>
  306. </body>
  307. </html>

Reply

Marsh Posté le 15-08-2007 à 12:47:25    

Citation :

XHTML 1.0 Strict


+

Citation :

<center><font color="red"><i>Wars ajoutée.


=
panpan cucu :D

 

et sinon pour remplacer le innerHTML il faut que tu utilises le DOM.

 

pour le reste je sais pas.


Message édité par theredled le 15-08-2007 à 12:50:00

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 15-08-2007 à 13:44:04    

Humm, c'est pas très clair pour moi...
Tu peux préciser?

Message cité 1 fois
Reply

Marsh Posté le 15-08-2007 à 16:11:23    

Stuntman a écrit :

Humm, c'est pas très clair pour moi...
Tu peux préciser?


Le DOM en gros c'est un ensemble de fonctions (intégrées entre autres à javascript) qui permettent de manipuler une page HTML. Pour plus de détails, et la doc -> Google
tiens je t'aide : http://www.xul.fr/xml-dom.html

 


Pour le reste, le but du XHTML (surtout strict !), est comme chacun sait de séparer le contenu de la présentation des pages (XHTML + CSS), donc les balises <font> <center> etc sont méga-over à bânir et pas valides. Et même sans parler de validité, la séparation présentation/contenu c'est quand même une base du dev web... Disons que je souhaite à personne d'avoir à faire des modifs sur ton site :D


Message édité par theredled le 15-08-2007 à 16:13:29

---------------
Contes de fées en yaourt --- █ --- zed, souviens-toi de ma dernière lettre. --- Rate ta musique
Reply

Marsh Posté le 16-08-2007 à 15:03:08    

Merci de cette précision, mais ca résolue toujours pas mon problème de JS :/  
Faire du DOM ca me paraît au dessus de mes connaissances.

Reply

Marsh Posté le 16-08-2007 à 15:03:08   

Reply

Marsh Posté le 16-08-2007 à 19:00:32    

En fait si on veut comprendre ce que c'est le DOM c'est simple :  
 
d'un coté on a le JS et d'un autre le HTML
JS ---------- HTML
 
Le DOM est tout simplement une interface entre le JS et le HTML, et plus précisément une répresentation Objet de ta page HTML
JS----DOM----HTML

Reply

Marsh Posté le 16-08-2007 à 21:29:33    

Ok merci.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed