Fatal编程技术网
  • jquery/
  • JQuery：表单在firefox中不断提交自己，而无需用户输入

JQuery：表单在firefox中不断提交自己，而无需用户输入

jquery forms

JQuery：表单在firefox中不断提交自己，而无需用户输入,jquery,forms,radio-button,submit,Jquery,Forms,Radio Button,Submit,我正在用php/javascript做一个小实验，在这个实验中，人们必须对某些单词定义的答案的熟悉程度进行评分。给出定义后，参与者必须按空格键才能看到答案，并且必须在1到7的范围内对答案进行评分。单击其中一个单选按钮后，将显示下一个定义。这在Chrome中运行良好，但在Firefox中，在第一次定义之后，带有单选按钮的表单会不断提交：它显示一个实例，然后进入下一个定义。此外，在IE中，似乎什么都不起作用。我不知道是什么导致了这种行为。代码如下： <!DOCTYPE HTML PUBLIC

我正在用php/javascript做一个小实验，在这个实验中，人们必须对某些单词定义的答案的熟悉程度进行评分。给出定义后，参与者必须按空格键才能看到答案，并且必须在1到7的范围内对答案进行评分。单击其中一个单选按钮后，将显示下一个定义。这在Chrome中运行良好，但在Firefox中，在第一次定义之后，带有单选按钮的表单会不断提交：它显示一个实例，然后进入下一个定义。此外，在IE中，似乎什么都不起作用。我不知道是什么导致了这种行为。代码如下：

<!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>


实验
$（文档）.ready（函数（）{
var定义=[“唯我论：我独自存在的哲学立场。”，
“核糖体：细胞中蛋白质合成的场所。”，
小胶质细胞：清除废物的非常小的细胞
];
var响应=[]；
var defCount=-1；
var loadDefinition=函数（）{
defCount++；
if（defCount
'）；
};
//捕捉太空新闻
$（文档）。按键（功能（e）{
if（e.charCode==32 | | e.keyCode==32）{
HandlerResponse（）；
}
返回false；
});
//捕获利克特标度响应
$（'#init form'）。提交（函数（）{
$（'#init'）.hide（）；
loadDefinition（）；
返回false；
});
$（“[name=likert]”。单击（函数（）{
//获取值
var fam_val=$（“[name=likert]：选中”）.val（）；
$（'[name=likert]'）.attr（'checked'，false）；
$（'#scale'）.hide（）；
//加载新定义
loadDefinition（）；
返回false；
});
//一些初始化
$（“#句”）.hide（）；
$（'#scale'）.hide（）；
}); // $（文件）
定义熟悉性实验

1.
2.
3.
4.
5.
6.
7.
完全陌生
我知道答案
在Firefox中，显然，在第一次单击单选按钮后，它保留了焦点

这意味着单选按钮将接收后续的按键事件，从而执行其“单击”事件处理程序

我建议您使用event object preventDefault（）方法捕获“keyup”事件，而不是返回“false”：

顺便说一下，您可以使用事件对象的“which”属性来确定按下了哪个键

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