Question

我正在为一个项目建立网站，并且已经添加了对新闻稿部分的订阅，并且当您单击订阅按钮时，我已经设置了一个弹出窗口。在添加该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!")
}

Answer 1

您应将所有输入内容包括在表单标签中，如下所示：

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

这种方法更好，因为然后所有输入都在一个实体中，如果没有它，“提交”输入将无法真正起作用。它不知道正在提交什么。在form标记中，它知道它正在提交表单以及其中包含的所有输入。

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

Answer 2

在功能内检查字段值。确认字段是否为空。如果没有，则显示警报

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

Answer 3

提供类的所有输入，例如：“ 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!") }
};

填写表单字段后如何显示弹出窗口？

3 个答案: