JQuery: le formulaire continue de se soumettre sans l'intervention de l'utilisateur dans firefox

Je construis une petite expérience en php/javascript, où les gens doivent évaluer la familiarité des réponses à certaines définitions de mots. Lorsque la définition est donnée, le participant doit appuyer sur espace pour voir la réponse, et doit la noter sur une échelle de 1 à 7. En cliquant sur l'un des boutons radio, la définition suivante est affichée. Cela fonctionne très bien dans Chrome, mais dans Firefox, après la première définition, le formulaire avec les boutons radio continue à se soumettre: il apparaît pour une instance, puis passe à la définition suivante. En outre, dans IE, rien ne semble fonctionner du tout. Je n'ai aucune idée de ce qui cause ce comportement. Voici le code:JQuery: le formulaire continue de se soumettre sans l'intervention de l'utilisateur dans firefox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 

<head> 
<title>Experiment</title> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection"> 
<script type="text/javascript" src="jquery.js"></script> 


</head> 
<body> 
<script type="text/javascript" > 
    $(document).ready(function(){ 
     var definitions = ['Solipsism: The philosophical position that I alone exist.', 
          'Ribosomes: The site of protein synthesis in the cell.', 
          'Microglia: Very small cells that remove waste material.' 
          ]; 
     var responses = []; 

     var defCount = -1; 

     var loadDefinition = function() { 
      defCount++; 

      if (defCount < definitions.length) { 
       var defString = definitions[defCount]; 

       var definition = defString.split(': '); 

       $('#sentence').text(definition[1]); 
       $('#sentence').show(); 

      } 
      else { 
       // done 
       $('#sentence').html('<b>The experiment is done. Thank you for participating!</b>'); 
       $('#sentence').show(); 

       saveData(); 
      } 

     }; 

     var handleResponse = function() { 
      // get sentence + id 
      var defString = definitions[defCount]; 
      var definition = defString.split(': '); 

      responses[responses.length] = 999; 

      $('#sentence').hide(); 
      $('#scale').show(); 

      $('#answer').html('The answer was: <b>'+definition[0]+'</b><br><br>'); 
     }; 

     // capture space press 
     $(document).keypress(function(e) { 
      if (e.charCode == 32 || e.keyCode == 32) { 
       handleResponse(); 
      } 
      return false; 
     }); 

     // capture likert scale response 
     $('#init-form').submit(function() { 
      $('#init').hide(); 
      loadDefinition(); 

      return false; 
     }); 

     $("[name=likert]").click(function(){ 
      // get the value 
      var fam_val = $("[name=likert]:checked").val(); 

      $('[name=likert]').attr('checked', false); 

      $('#scale').hide(); 
      // load new definition 
      loadDefinition(); 

      return false; 
     }); 

     // some init 
     $('#sentence').hide(); 
     $('#scale').hide(); 
    }); // $(document) 
</script> 

<div class="mainarea"> 
    <h1>Definition Familiarity Experiment</h1><br> 
    <div id="box"> 
     <div id="init"> 
      <form id="init-form"> 
       <input type="submit" value="Begin Experiment" /> 
      </form> 
     </div> 
     <div id="sentence"></div> 
     <div id="scale"> 
      <div id="answer"></div> 
      <form id="scale-form"> 
       <table width="100%"> 
        <tr> 
        <td></td> 
        <td align="center">1</td> 
        <td align="center">2</td> 
        <td align="center">3</td> 
        <td align="center">4</td> 
        <td align="center">5</td> 
        <td align="center">6</td> 
        <td align="center">7</td> 
        <td></td> 
        </tr> 
       <tr><td align="center">totally unfamiliar</td> 
       <td align="center"><input type="radio" name="likert" value="1"></td> 
       <td align="center"><input type="radio" name="likert" value="2"></td> 
       <td align="center"><input type="radio" name="likert" value="3"></td> 
       <td align="center"><input type="radio" name="likert" value="4"></td> 
       <td align="center"><input type="radio" name="likert" value="5"></td> 
       <td align="center"><input type="radio" name="likert" value="6"></td> 
       <td align="center"><input type="radio" name="likert" value="7"></td> 
       <td align="center">knew the answer</td> 
       </tr> 
       </table> 
      </form> 
      <input id="scale-form-submit" type="submit" value="Submit"> 
     </div> 
    </div> 
</div> 



</body> 
</html>

Source

2010-11-03 Menno

Dans Firefox, apparemment, après avoir cliqué sur un bouton radio la première fois, il conserve le focus. Cela signifie que l'événement de pression de touche suivant sera reçu par le bouton radio, exécutant ainsi son gestionnaire d'événements "click".

Je vous suggère de capturer le « keyup » événement au lieu, en utilisant la méthode objet événement preventDefault() au lieu de retourner « false »:

$(document).keyup(function(e) { 
    if (e.which==32) { 
    e.preventDefault(); 
    handleResponse(); 
    } 
});

Par ailleurs, vous devriez être bien en utilisant le « qui » propriété de l'objet événement pour déterminer quelle touche a été enfoncée.

Source

2010-11-03 15:42:10 TataBlack

JQuery: le formulaire continue de se soumettre sans l'intervention de l'utilisateur dans firefox

Répondre

Questions connexes