===

Question

抱歉这可能是一个noob问题..我已经在这个表单上摆弄了一段时间但是我似乎无法让它因某些原因而起作用。颜色更改有效，但提交按钮根本不会导致链接..

<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

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

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

没有参数。

Answer 2

改变这个：

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

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

意外的令牌＆amp;＆amp;

你需要在括号中包含整个if条件，如下所示：

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

也就是说，这不会提交表单中的数据。如果条件为真，它将打开给定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（）函数中犯了一个错误，缺少（）at 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

5 个答案:

===