Невозможно заставить JavaScript отправить форму при выполнении условия
Я пытаюсь использовать JavaScript, чтобы убедиться, что все четыре входных параметра в теге совпадают друг с другом, и если они соответствуют, отправить форму или, по крайней мере, разрешить отправку формы. Однако даже если условие else выполнено, форма не будет отправлена.
$(document).ready(function() {
$('#bca').submit(function(e) {
var form = bca;
e.preventDefault();
// Check Passwords are the same
if ($('#InitialsP1').val() != $('#InitialsP2').val() || $('#InitialsP2').val() != $('#InitialsP3').val()) {
alert('Fields do not match. Correct Fields where necessary');
} else {
document.getElementById("bca").submit();
}
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class = "invoice-box">
<form id = "bca" action = "bca" method = "post">
<input id = "InitialsP1" name = "InitialsP1" type = "text"
placeholder = "Initials" size = "5" value = "" required
style=”float: right”>
<input id = "InitialsP2" name = "InitialsP2" type = "text"
placeholder = "Initials" size = "5" value = "" required
style=”float: right”>
<input id = "InitialsP3" name = "InitialsP3" type = "text"
placeholder = "Initials" size = "5" value = "" required
style=”float: right”>
<input id = "InitialsP4" name = "InitialsP4" type = "text"
placeholder = "Initials" size = "5" value = "" required
style=”float: right”>
<div class = "form-group">
<div class = "col-md-12 text-center">
<button id = "submit" type = "submit" class = "btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
У вас есть первоначальная проблема: onclick = "getSignature();" выдает ошибку, потому что ее не существует.
Вы также получаете сообщение об ошибке «отправка не является функцией» в журнале консоли при отправке формы (вы можете увидеть это при отправке формы из фрагмента кода):
{
"message": "Uncaught TypeError: document.getElementById(...).submit is not a function",
"filename": "https://stacksnippets.net/js",
"lineno": 46,
"colno": 38
}
Это какой-то конфликт с id="submit" на кнопке отправки, из-за которого форма не отправляется. Если вы измените HTML-код кнопки отправки на
<button id = "btn-submit" type = "submit" class = "btn btn-primary btn-lg">Submit</button>
это должно сработать.
Я отредактировал вопрос, чтобы исключить нажатие кнопки мыши из отправки, поскольку здесь это не имеет значения. Вы были правы, это был конфликт в представлении. Изменение его на id = "btn-submit" сработало. Могу я спросить, откуда ты это узнал? Я бы никогда этого не поймал.
Я отредактировал свой ответ, так как изначально он был немного расплывчатым - я просто погуглил ошибку «.submit не является функцией», которая отображалась в журнале консоли. Этот ответ о переполнении стека появился stackoverflow.com/questions/833032/… поэтому я поигрался с идентификатором на кнопке. Javascript может быть довольно эксцентричным, и я бы об этом даже не узнал, если бы не погуглил!
В вашей форме уже используется автоматическая проверка HTML5 (использование атрибута required)
вы должны добавить проверку равенства на свои 4 элемента.
действуйте следующим образом:
const
myForm = document.querySelector('#bca')
, errMsg = { badField : `this Field doesn't match.` }
, setError = elm =>
{
elm.setCustomValidity( errMsg.badField );
elm.oninput =_=>
{
elm.setCustomValidity(''); // clear error message
elm.oninput = null; // self remove setError assignation
}
};
myForm.onsubmit = e =>
{
let ErrField = null;
if ( badEQ( myForm.InitialsP2 )
|| badEQ( myForm.InitialsP3 )
|| badEQ( myForm.InitialsP4 )
) {
setError( ErrField );
myForm.reportValidity();
return false
}
function badEQ( fielElm )
{
let notEQ = myForm.InitialsP1.value !== fielElm.value;
if (notEQ) ErrField = fielElm;
return notEQ;
}
}label {
display : block;
margin : .6rem 0;
font-size : .8rem;
}
label > input {
display : block;
font-size : 1rem;
width : 8rem;
padding : 0 1rem;
}
button {
width: 5em;
}<form id = "bca" action = "bca" method = "post">
<label>
Initials:
<input name = "InitialsP1" type = "text" value = "" autocomplete = "off" required >
</label>
<label>
Initials:
<input name = "InitialsP2" type = "text" value = "" autocomplete = "off" required >
</label>
<label>
Initials:
<input name = "InitialsP3" type = "text" value = "" autocomplete = "off" required >
</label>
<label>
Initials:
<input name = "InitialsP4" type = "text" value = "" autocomplete = "off" required >
</label>
<button>Submit</button>
<button type = "reset">Reset</button>
</form>Если вы хотите сначала выполнить проверку, форма будет отправлена, поэтому это можно сделать, изменив событие отправки на событие нажатия кнопки.
$(document).ready(function() {
$('#submit').click(function(e) {
// Check Passwords are the same
if ($('#InitialsP1').val() != $('#InitialsP2').val() || $('#InitialsP2').val() != $('#InitialsP3').val()) {
alert('Fields do not match. Correct Fields where necessary');
} else {
document.getElementById("bca").submit();
}
});
});<button id = "submit" class = "btn btn-primary btn-lg">Submit</button>И нет необходимости в onclick="getSignature();"
Что вы пытались решить проблему? Где ты застрял? Это так мало кода, что консоль разработчика вашего браузера сможет вам помочь.