表单上的Javascript重定向根据输入提交

时间:2013-06-09 06:21:03

标签: javascript html forms

我正在进行一个简单的javascript测验,我无法为我的生活获取Javascript提交表单并在同一页面打开结果,无论我是否使用location.href,open.window ,或者我是否将“_self”设为目标。我做什么似乎并不重要......

function answer() {
  var response = document.getElementById('answer').value;
  if (response == "correctanswer")
    location.href('right.html');
  else
    location.href('wrong.html');
}
<form onSubmit="answer()" id="answer" target="_self">
  <input type="text" maxlength="55" class="box" autofocus />
  <input type="submit" class="submit" value="SUBMIT" />
</form>

所以,我想要发生的是,当用户提交表单时,如果他们在文本框中输入 correctanswer ,则会转到“right.html”,如果用户输入

我已经运行良好,除了事实上无论我做什么我都无法在_self中打开生成的页面,而是在另一个窗口中打开。每一次。

一直让我疯狂。

1 个答案:

答案 0 :(得分:21)

五件事:

  1. 完全删除target的{​​{1}}属性。默认值是相同的窗口。虽然这并不重要,因为:

  2. 通过在form中返回submit来取消false事件,因为您在自己的代码中处理表单。一种简单的方法是让函数返回onSubmit,并在false中返回调用的结果。

  3. 此行不正确:

    onSubmit

    var response = document.getElementById('answer').value; 个元素没有form。您希望将value放在id元素上。

  4. input type="text"上的href不是函数,而是属性。您只需分配给它(或直接分配给location)。

  5. 这个有点微妙:因为你有一个名为location的全局函数,并且你有一个answer id的元素,所以存在冲突:两者都想要最终作为"answer"对象的属性(不使用旧DOM0 window属性或全局函数的众多原因之一)来到这一点。因此,您需要更改其中一个的名称,例如,将功能更改为onxyz或类似名称。

  6. 所以:

    checkAnswer

    <form onSubmit="return checkAnswer();">
    <input id="answer" type="text" maxlength="55" class="box" autofocus />
    <input type="submit" class="submit" value="SUBMIT" />
    </form>
    

    完整示例:Live Copy | Live Source

    function checkAnswer(){
        var response = document.getElementById('answer').value;
        if (response == "correctanswer")
            location = 'right.html';
        else
            location = 'wrong.html';
        return false;
    }
    

    我建议总是使用一致的,有用的代码缩进,并且我总是喜欢使用块,而不仅仅是语句,带有控制结构。