How not to open a window if the form fields are not filled?

Question

I have this submit button on my form with a jQuery action to open a window depending on the users choice. However, I just want the window to open if the fields are filled. I have this code and I want to merge it with an 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> 

For exemple:

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

Thanks

Answer 1

Because you using a submit button you will need to return false , in case if you don't want to do anything. Before that, you need also to check if your required field are empty or not. (ie $(your field).val() === "" then it's empty, if all you need have, then call the window.open() function. Note: you can merge multiple fields for checking ie: $(".your_field1, .your_field2, .your_field3").val() === "" however this is an OR operation.

One possible solution:

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

If you want only for the required fields, than use filter('[required]:visible') instead of filter(':visible') .