时间戳

首页 > 解决方案 > 如果表单字段未填写，如何不打开窗口？

javascript - 如果表单字段未填写，如何不打开窗口？

问题描述

我的表单上有这个提交按钮，带有一个 jQuery 操作，可以根据用户的选择打开一个窗口。但是，如果字段已填满，我只想打开窗口。我有这段代码，我想将它与if.

$(function() {
  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });

  $('#btnget').click(function() {
    window.open($('#chkveg').val());
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://formmail.kinghost.net/formmail.cgi" method="POST">
  <input name="nome" type="text" class="nome" id="nome" required width="100%" placeholder="Nome:">
  <input name="cpf" type="text" class="cpf" id="cpf" placeholder="CPF:">
  <div style="clear:both"></div><br/>
  <input name="nascimento" type="text" class="nascimento" id="nascimento" placeholder="Data de nascimento:">
  <select id="chkveg">
    <option value="https://pag.ae/7ULKPL7TH">Associados Ancord + C.Dados = R$700,00</option>
    <option value="https://pag.ae/7ULKQ8Zm2">Associados Ancord = R$800,00</option>
    <option value="https://pag.ae/7ULKQLB9m">Associados Entidades Apoiadoras + C.Dados = R$800,00</option>
  </select>
  <input id="btnget" class="submit-btn" type="submit" value="INSCREVER-SE">
</form>

举个例子：

IF (#FORM).REQUIRED = TRUE {
  (#BUTTON).WINDOWOPEN
}

谢谢

标签： javascriptjquery

解决方案

因为您使用提交按钮return false，所以如果您不想做任何事情，您将需要这样做。在此之前，您还需要检查您的必填字段是否为空。（即$(your field).val() === ""它是空的，如果你需要的话，然后调用该window.open()函数。注意：您可以合并多个字段以进行检查，即：$(".your_field1, .your_field2, .your_field3").val() === ""但是这是一个 OR 操作。

一种可能的解决方案：

$(function() {
  $('#btnget').click(function() {
    let isEmpty = false;
    $('#data_form input,textarea,select').filter(':visible').each(function(i) {
      if ($(this).val() === "") {
        isEmpty = true;
        return false;
      }
    });
    
    if (isEmpty) {
      return false;
    }
    
    window.open($('#chkveg').val());
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="data_form" action="http://formmail.kinghost.net/formmail.cgi" method="POST">
  <input name="nome" type="text" class="nome" id="nome" required width="100%" placeholder="Nome:">
  <input name="cpf" type="text" class="cpf" id="cpf" placeholder="CPF:">
  <div style="clear:both"></div><br/>
  <input name="nascimento" type="text" class="nascimento" id="nascimento" placeholder="Data de nascimento:">
  <select id="chkveg">
    <option value="https://pag.ae/7ULKPL7TH">Associados Ancord + C.Dados = R$700,00</option>
    <option value="https://pag.ae/7ULKQ8Zm2">Associados Ancord = R$800,00</option>
    <option value="https://pag.ae/7ULKQLB9m">Associados Entidades Apoiadoras + C.Dados = R$800,00</option>
  </select>
  <input id="btnget" class="submit-btn" type="submit" value="INSCREVER-SE">
</form>

如果您只想要必填字段，请使用filter('[required]:visible')而不是filter(':visible').

推荐阅读