Блог

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

 <input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Daily 
Newsletter
</label>

<input type="submit" value="Subscribe" onclick="myFunction1()">
 

Теперь с помощью js он показывает всплывающее окно, которое я создал, благодаря человека за подписку, когда я нажимаю кнопку подписки, независимо от того, заполнены поля или нет.

 function myFunction1() {
    alert("Thanks for subscribing!")
}
 

Вы должны включить все входные данные в тег формы, как так:

 <form id='myForm'>
    <input type="text" placeholder="Name" name="name" required>
    <input type="text" placeholder="Email address" name="mail" required>
    <label>
    <input type="checkbox" checked="checked" name="subscribe"> Daily 
    Newsletter
    </label>

    <input type="submit" value="Subscribe" onclick="myFunction1()">
</form>
 

Этот подход лучше, потому что тогда все входные данные объединяются в один объект, без него ввод «отправить» не будет работать. Он не будет знать, что отправляется. В теге формы он знает, что отправляет форму вместе со всеми входными данными, содержащимися внутри.

Тег формы имеет свой собственный набор событий, к которым вы можете добавлять прослушивателей. Включая событие отправки.

Чтобы добавить прослушиватель событий для запуска вашей функции всякий раз, когда в форме происходит отправка, вы можете сделать так:

 document.getElementById('myForm').addEventListener('submit', myFunction1)
 

Кроме того, вы также можете установить прослушиватель в html:

 <form onsubmit='myFunction1()'>
 

Но имейте в виду, что с помощью метода ‘addEventListener’ вы можете добавить несколько прослушивателей к одному и тому же событию. В то время как свойство onsubmit принимает только одну функцию.

Дополнительная информация о событиях и методе addEventListener:

https://developer.mozilla.org/en-US/docs/Web/Events

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

внутри функции проверьте значения полей. Подтвердите, являются ли поля пустыми. Если нет, то покажите предупреждение

 function myFunction1() {
  var f1 = ; // get value of field1;
  var f2 = ; // get value of field2;
  if (f1 != '' amp;amp; f2 != ''){
      alert("Thanks for subscribing!");
  }
}
 

укажите все входные данные класса, например: ‘myInput’, и перебирайте их, чтобы проверить их значение перед предупреждением.

 function myFunction1() {

    var inputs = Array.fom(document.getElementsByClassName('myInput'));
    var allChecked = false;

    inputs.map(function(input){
        if (input.value == '') { allChecked = false }
    });

    if (allChecked) { alert("Thanks for subscribing!") }
};