时间戳

首页 > 解决方案 > 如何使弹出窗口仅在实际提交表单时调用javascript

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

问题描述

我有以下表格：

<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="" required>
    </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="" required>
    </div>
    <button class="form-button" type="submit" name="submit">Register</button>

  </div>
</form>

我建立了一个小弹出窗口，表示感谢您在用户输入他的数据后进行注册。但是，目前我遇到的问题是，当用户在未输入任何数据的情况下单击注册按钮时也会出现此问题（这意味着由于字段中的必需标签，请求不会触发）。如何使弹出窗口仅在实际提交表单时出现？

弹出窗口的 Jquery：

$(window).load(function() {

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

标签： javascripthtmljquery

解决方案

只需ids在每个字段上定义input以验证两个字段是否都具有价值。这样做

<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();
      }
   });
});

推荐阅读