Не могу получить эту форму для работы над HTML5

Question

извините за то, что может быть вопросом о нобе. Я уже некоторое время занимаюсь этой формой, но по какой-то причине я не могу заставить ее работать. Изменения цвета работают, но кнопка отправки просто не приводит к ссылке ..

<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) { 
 
    \t window.alert('You have entered all ' + codeboxes.length + ' values correctly.'); 
 
    } 
 

 
    else { 
 
\t 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 ((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() функцию, отсутствуют() в случае ... увидеть фрагмент кода (с небольшой оптимализацией)

Answer 5

Корректировать форму тега как показано ниже,

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

редактировать свои кнопки, как показано ниже представить

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

Редактировать, если заявление, как следует,

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