Невозможно одновременно использовать 2 функции формы javascript
Итак, я сделал две функции в JavaScript. одна функция - проверить, заполнен ли какой-либо требуемый ввод в форме. Если требуемый ввод не заполнен, я хочу, чтобы на странице было указано, что ввод пуст.
Это функция, которую я сделал в Javascript:
function checkform(form) {
//Krijg all het input van de ingevulde form
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].hasAttribute("required")){
if (inputs[i].value == ""){
// Als er een leegveld is meld deze alert code:
alert("Vul alle vereisten velden in");
return false;
}
}
}
return true;
}
У меня также есть функция для кнопки, чтобы сделать предупреждение о том, что форма была отправлена следующим образом:
function alertpopup()
{
alert("Uw email is verzonden! U krijgt binnen 24 uur bericht van ons.")
}
Дело в том, что оба работают, но не одновременно. Если я удалю функцию alertpopup, функция checkform будет работать, когда обязательное поле пусто, но когда я использую функцию alertpopup, при отправке формы появляется только всплывающее окно, но функция checkform не показывает никаких сообщений, когда обязательное поле пусто.
Это моя форма в HTML:
<form action = "" id = "form" onsubmit = "return checkform(this)">
<label for = "naam"><strong>Naam*</strong></label><br>
<input type = "text" id = "naam" name = "naam" value = "Tom" required/>
<br><br>
<label for = "email"><strong>Email*</strong></label><br>
<input type = "text" id = "email" name = "email" value = "[email protected]" required/>
<br><br>
<label for = "telefoonnummer"><strong>Telefoonnummer</strong></label><br>
<input type = "text" id = "telefoonnummer" name = "telefoonnummer" value = "020-694-0232" readonly = "readonly"/>
<br><br>
<label for = "textarea"><strong>Uw vraag</strong></label><br>
<textarea id = "textarea" type = "textarea" rows = "10" cols = "50" value = "Hoe kan ik een vluchtnummer toevoegen?"required/></textarea>
<br><br>
<input type = "submit" value = "Versturen" onclick = "alertpopup()">
</form>
Итак, как мне заставить всплывающее окно засеять, когда пользователь нажимает кнопку отправки и когда все необходимые поля заполнены?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Если вы хотите, чтобы alertpopup () вызывал даже пустые входные данные, вы можете вызвать его перед возвратом false; также.
function checkform(form) {
//Krijg all het input van de ingevulde form
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].hasAttribute("required")){
if (inputs[i].value == ""){
// Als er een leegveld is meld deze alert code:
alert("Vul alle vereisten velden in");
return false;
}
}
}
alertpopup();
return true;
}
Than I also have a function for the button to make an alert that the form was send like this:
Просто поместите его в метод onsubmit в конце, если форма верна. нравится:
function submitForm(form) {
if (checkform(form)) {
// send form code
alert('form was sent')
}
}
Когда я нажимаю кнопку, используя этот код, всплывающее предупреждение не появляется.
@ Thijs1996 Есть что-то с названием метода. Попробуйте использовать другой. И также удалите onclick.
Попробуйте создать другую функцию, которая объединит все ваше поведение в одно:
function checkFormAndAlert(form) {
const formIsValid = checkform(form);
if (formIsValid) {
alertpopup();
}
// Here you can put 'else' conditions.
}
Я бы также предложил два улучшения: нехорошо смешивать обязанности (а в вашей функции checkform есть alert внутри. Попробуйте параметризовать функцию popupalert, чтобы вы передавали предупреждение внутри, а затем вы можете сделать что-то вроде этого:
if (formIsValid) {
alertpopup('Correct form message');
} else {
alertpopup('Incorrect form message');
}
Это должно вас подтолкнуть и стать хорошей отправной точкой :)
Вы можете использовать функцию отправки jQuery, например
$( "#form" ).submit(function( event ) {
var isvalid=checkform();
if (!isvalid){
alertpopup();
event.preventDefault();
}
});
Документация jQuery ссылка
Почему бы вам просто не вызвать
alertpopupв концеcheckform?