JQuery: form keeps submitting itself without user input in firefox
I'm building a small experiment in php/javascript, where people have to rate the familiarity of answers to certain word definitions. When given the definition the participant has to press space to see the answer, and has to rate it on a scale of 1 to 7. Upon clicking one of the radio buttons, the next definition is shown. This works fine in Chrome, but in Firefox, after the first definition, the form with the radio buttons keeps submitting itself: it shows up for an instance, and then proceeds to the next definition. Also, in IE nothing seems to work at all. I have no idea what is causing this behaviour. Here is the code:
<!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>
In Firefox, apparently, after clicking a radio button the first time, it retains the focus.
This means that the subsequent keypress event will be received by the radio button, thus executing its "click" event handler.
I suggest you capture the "keyup" event instead, using the event object preventDefault() method instead of returning "false":
$(document).keyup(function(e) {
if (e.which==32 ) {
e.preventDefault();
handleResponse();
}
});
By the way, you should be fine using the "which" property of the event object to determine which key was pressed.
加载中,请稍侯......
精彩评论