Javascript 如何使弹出窗口仅在表单实际提交时调用

我有以下表格：

名称
电子邮件
登记

我创建了一个小弹出窗口，上面写着感谢注册，用户输入数据后应该会出现这个窗口。然而，目前我遇到的问题是，当用户单击register按钮而不输入任何数据时，也会出现此问题（这意味着由于字段中有必需的标记，因此不会触发请求）。如何使弹出窗口仅在表单实际提交时出现

弹出窗口的Jquery：

$(window).load(function() {

    $(".form-button").click(function() {
        $('.popup').show();
    });
});

---

只需在每个

输入上定义
id
，即可验证两个字段中是否都有值。你喜欢这样吗

<form action="/signup" method="post" class="register-form">
  <div>
    <div class="form-element">
      <label class="form-label" for="name">Name</label>
      <input class="form-input-text" type="text" name="name" value="" id="text1">
    </div>
   <div class="form-element">
     <label class="form-label" for="email">E-Mail</label>
     <input class="form-input-text" type="email" autocomplete="email" name="email" value="" id="text2">
   </div>
   <button class="form-button" type="submit" name="submit">Register</button>
  </div>
</form>

$(window).load(function() {

   $(".form-button").click(function() {
      let input1 = $('#text1').val();
      let input2 = $('#input2').val();
      if(input1 && input2){
         //make your http req and then after getting your response open your popup
         $('.popup').show();
      }
   });
});


名称
电子邮件
登记
$（窗口）。加载（函数（）{
$（“.form按钮”）。单击（函数（）{
让input1=$（'#text1'）.val（）；
设input2=$（'#input2'）.val（）；
如果（输入1和输入2）{
//使您的http请求，然后在得到响应后打开弹出窗口
$（'.popup'）.show（）；
}
});
});
只需在每个
输入上定义
id
，即可验证两个字段中是否都有值。你喜欢这样吗

<form action="/signup" method="post" class="register-form">
  <div>
    <div class="form-element">
      <label class="form-label" for="name">Name</label>
      <input class="form-input-text" type="text" name="name" value="" id="text1">
    </div>
   <div class="form-element">
     <label class="form-label" for="email">E-Mail</label>
     <input class="form-input-text" type="email" autocomplete="email" name="email" value="" id="text2">
   </div>
   <button class="form-button" type="submit" name="submit">Register</button>
  </div>
</form>

$(window).load(function() {

   $(".form-button").click(function() {
      let input1 = $('#text1').val();
      let input2 = $('#input2').val();
      if(input1 && input2){
         //make your http req and then after getting your response open your popup
         $('.popup').show();
      }
   });
});


名称
电子邮件
登记
$（窗口）。加载（函数（）{
$（“.form按钮”）。单击（函数（）{
让input1=$（'#text1'）.val（）；
设input2=$（'#input2'）.val（）；
如果（输入1和输入2）{
//使您的http请求，然后在得到响应后打开弹出窗口
$（'.popup'）.show（）；
}
});
});
我想您可能正在寻找.submit事件

以你为例

$('.register-form').submit(function(e){
    e.preventDefault(); // Stop the form submitting
    $('.popup').show(); // Show the popup
    e.currentTarget.submit(); // Now submit it!
});

我想您可能正在寻找.submit事件

以你为例

$('.register-form').submit(function(e){
    e.preventDefault(); // Stop the form submitting
    $('.popup').show(); // Show the popup
    e.currentTarget.submit(); // Now submit it!
});

是一个事件，您可以收听该事件以触发弹出窗口。但是你可能想考虑这是最好的用户体验；我相信打开弹出窗口将阻止表单传输到服务器，直到弹出窗口关闭为止。您可以通过监听事件来触发弹出窗口。但是你可能想考虑这是最好的用户体验；我相信打开弹出窗口将阻止表单传输到服务器，直到弹出窗口关闭请仔细阅读问题。他希望只有在字段中输入数据后才会显示弹出窗口。所以，这意味着他必须检查输入框中是否插入了值。如果所需的输入没有任何值，onsubmit事件看起来不会被触发。请仔细阅读问题。他希望只有在字段中输入数据后才会显示弹出窗口。因此，这意味着他必须检查输入框中是否插入了值。如果所需的输入没有任何值，onsubmit事件看起来不会被触发