无法使此表单在HTML5上运行

Question

sorry for what might be a noob question.. I've been fiddling with this form for some time now but I can't seem to make it work for some reason. The colour changes work but the submit button simply does not lead to the 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>

And here are the functions:

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

Thanks for the help!

Answer 1

You're calling the method, testResults which does not accept any parameters. Change the submit button markup to the following and the testResults method will be invoked.

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

No parameters.

Answer 2

Change this:

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

[...]

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

to this:

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

[...]

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

===

Refactored Version

 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

You have a syntax error in your JavaScript. Open up your browser tools console and see:

Unexpected token &&

You need to wrap the whole if condition in parentheses, like this:

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

That said, this won't submit the data in the form. It will just open the give URL if the conditions are true — which is what you asked in your question.

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> 

you've done one mistake at testResults() function, missing () at if ... see the snippet (with a little optimalization)

Answer 5

Edit your form tag as below,

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

Edit your submit button as below,

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

Edit the if statement as follow,

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