无法在 HTML5 上使用此表单

Question

抱歉，这可能是一个菜鸟问题。我已经用这个表格摆弄了一段时间，但由于某种原因我似乎无法让它工作。颜色更改有效，但提交按钮根本不会导致 link..

<center>
    <form name="form1" method="POST">
        <input id="codebox1" type="text" onchange="checkFilled1();" />
        <input id="codebox2" type="text" onchange="checkFilled2();" />
        <input id="codebox3" type="text" onchange="checkFilled3();" />
        <br>
        <br>
        <input id="button1" type="submit" value="Submit" onClick="testResults(this.form)" />
    </form>
</center>

函数如下：

<script>
function checkFilled1() {
    var inputVal = document.getElementById("codebox1");
    if (inputVal.value == "1234") {
        inputVal.style.backgroundColor = "lightgreen";
    } else {
        inputVal.style.backgroundColor = "red";
    }
}
checkFilled1();
</script>

<script>
function checkFilled2() {
    var inputVal = document.getElementById("codebox2");
    if (inputVal.value == "1234") {
        inputVal.style.backgroundColor = "lightgreen";
    } else {
        inputVal.style.backgroundColor = "red";
    }
}

checkFilled2();
</script>

<script>
function checkFilled3() {
    var inputVal = document.getElementById("codebox3");
    if (inputVal.value == "1234") {
        inputVal.style.backgroundColor = "lightgreen";
    } else {
        inputVal.style.backgroundColor = "red";
    }
}

checkFilled3();
</script>

<script>
function testResults() {
    var inputVal1 = document.getElementById("codebox1");
    var inputVal2 = document.getElementById("codebox2");
    var inputVal3 = document.getElementById("codebox3");
    if (inputVal1.value == "1234") && (inputVal2.value == "1234") && (inputVal3.value == "1234") {
        window.open("http://google.com", "_parent");
    } else {

    }
}

testResults();
</script>

感谢您的帮助！

Answer 1

改变这个：

<form name="form1" method="POST">

[...]

<input id="button1" type="submit" value="Submit" onClick="testResults(this.form)" />

对此：

<form name="form1" onSubmit="testResults()" method="POST">

[...]

<input id="button1" type="submit" value="Submit" />

===

重构版本

var codeboxes = document.getElementsByClassName('codebox');

function testResults() {

    var correctValues = 0;

    for (var i = 0; i < codeboxes.length; i++) {
        if (codeboxes[i].value === '1234') {
            correctValues++;
        }
    }

    if (correctValues === codeboxes.length) {
     window.alert('You have entered all ' + codeboxes.length + ' values correctly.');
    }

    else {
 window.alert('You have not entered all ' + codeboxes.length + ' values correctly.');
    }
}

<form name="form1" onSubmit="testResults()" method="POST">
<input class="codebox" type="text" />
<input class="codebox" type="text" />
<input class="codebox" type="text" />
<input id="button1" type="submit" value="Submit" />
</form>

Answer 2

您正在调用不接受任何参数的方法 testResults。将提交按钮标记更改为以下内容，将调用 testResults 方法。

<input id="button1" type="submit" value="Submit" onClick="testResults()" />

没有参数。

Answer 3

您的 JavaScript 中存在语法错误。打开浏览器工具控制台并查看：

Unexpected token &&

您需要将整个 if 条件括在括号中，如下所示：

if ((inputVal1.value == "1234") && (inputVal2.value == "1234") && (inputVal3.value == "1234")) {
window.open("http://www.example.com", "_parent");

也就是说，这不会提交表单中的数据。如果条件为真，它只会打开 give URL——这就是你在问题中提出的问题。

Answer 4

function checkFilled(inp) {
  var inputVal = inp;
  if (inputVal.value == "1234") {
    inputVal.style.backgroundColor = "lightgreen";
  } else {
    inputVal.style.backgroundColor = "red";
  }
}

function testResults() {
  var inputVal1 = document.getElementById("codebox1");
  var inputVal2 = document.getElementById("codebox2");
  var inputVal3 = document.getElementById("codebox3");
  if ((inputVal1.value == "1234") && (inputVal2.value == "1234") && (inputVal3.value == "1234")) {
    alert('Here comes window opening...');
    //window.open("http://google.com", "_blank");
  } else {
    alert('Error ...');
  }
}

//testResults();

<form name="form1" method="POST">
  <input id="codebox1" type="text" onchange="checkFilled(this);" />
  <input id="codebox2" type="text" onchange="checkFilled(this);" />
  <input id="codebox3" type="text" onchange="checkFilled(this);" />
  <br>
  <br>
  <input id="button1" type="submit" value="Submit" onClick="testResults(this.form)" />
</form>

您在 testResults() 函数中犯了一个错误，在 if 处遗漏了 () ...查看代码片段（稍作优化）

Answer 5

按如下方式编辑您的表单标签，

<form name="form1" method="POST" onSubmit="testResults()">

如下所示编辑您的提交按钮，

<input id="button1" type="submit" value="Submit"/>

编辑 if 语句如下，

if((inputVal1.value == "1234") && (inputVal2.value == "1234") && (inputVal3.value == "1234"))
{
     window.open("http://www.google.com", "_parent");
}

无法在 HTML5 上使用此表单

Can't get this form to work on HTML5

html

javascript

if-statement

window.open

===