stackoom
  简体   繁体   中英

JQuery - show/hide class and valdiation form

 原文  2022-03-08 17:49:48  0   1    javascript/ html/ jquery

Question

when I input the seconds form, the minutes form will hide and not show alert('Field Form minutes'); , and vice versa if I input the minutes form, then from seconds will hide and alert('Field Form seconds'); 

 $(document).ready(function () { $("#form-seconds, #form-minutes").hide(); $('select[name="type_time"]').change(function () { if ($(this).val() === "seconds") { $("#form-seconds").show(); $("#form-minutes").hide(); } else if ($(this).val() === "minutes") { $("#form-minutes").show(); $("#form-seconds").hide(); } else { $("#form-seconds, #form-minutes").hide(); } }); }); $("#buttonsubmit").click(function () { if ($("#email-input").val() == "") { $("#email-input").focus(); alert('Field Form Email'); } else if ($("#seconds-input").val() == "") { $("#seconds-input").focus(); alert('Field Form Seconds'); } else if ($("#minutes-input").val() == "") { $("#minutes-input").focus(); alert('Field Form minutes'); } });
 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <form> <div class="form-group"> <label>EMAIL.</label> <input type="email" class="form-control" id="email-input" placeholder="name@example:com"> </div> <div class="form-group"> <label>TYPE TIME.</label> <select class="form-control" name="type_time" id="type_time"> <option value="">SELECT TYPE..:</option> <option value="seconds">SECONDS</option> <option value="minutes">MINUTES</option> </select> </div> <div class="form-group" id="form-seconds"> <label>SECONDS:</label> <input type="text" class="form-control" id="seconds-input"> </div> <div class="form-group" id="form-minutes"> <label>MINUTES:</label> <input type="text" class="form-control" id="minutes-input"> </div> <button type="submit" class="btn btn-primary" id="buttonsubmit">Submit</button> </form> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min:js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

My Jsfiddle HERE

I've done several experiments, but can't find a solution to do it. whether to use .removeClass(); ?

1 answers

solution1
 1 ACCPTED  2022-03-08 18:18:32

You just need to know, which menu is open then! I have used simple global variable menu to find which menu is open. After declaring menu as 0, if something from drop-down is selected menu is changed to 1 for minutes and 2 for seconds:

     ...if ($(this).val() === "seconds") {
          $("#form-seconds").show();
          $("#form-minutes").hide();
          //menu's changed to 2
          menu = 2;
        } else if ($(this).val() === "minutes") {
          $("#form-minutes").show();
          $("#form-seconds").hide();
          //menu's changed to 1
          menu = 1;
        } else {
          $("#form-seconds, #form-minutes").hide();
        }

Lastly, don't forget to add conditions:

...else if ($("#seconds-input").val() == "") {
        //checking if selected menu is 2
        if (menu == 2) {
          $("#seconds-input").focus();
          alert('Field Form Seconds');
        }
      } else if ($("#minutes-input").val() == "") {
        //checking if selected menu is 1
        if (menu == 1) {
          $("#minutes-input").focus();
          alert('Field Form minutes');
        }

Here's the whole code: 

 //menu=0, means nothing selected, 1 means minutes form is selected and 2 means seconds-form. var menu = 0; $(document).ready(function() { $("#form-seconds, #form-minutes").hide(); $('select[name="type_time"]').change(function() { if ($(this).val() === "seconds") { $("#form-seconds").show(); $("#form-minutes").hide(); menu = 2; } else if ($(this).val() === "minutes") { $("#form-minutes").show(); $("#form-seconds").hide(); menu = 1; } else { $("#form-seconds, #form-minutes").hide(); } }); }); $("#buttonsubmit").click(function() { if ($("#email-input").val() == "") { $("#email-input").focus(); alert('Field Form Email'); } else if ($("#seconds-input").val() == "") { if (menu == 2) { $("#seconds-input").focus(); alert('Field Form Seconds'); } } else if ($("#minutes-input").val() == "") { if (menu == 1) { $("#minutes-input").focus(); alert('Field Form minutes'); } } });
 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <form> <div class="form-group"> <label>EMAIL.</label> <input type="email" class="form-control" id="email-input" placeholder="name@example:com"> </div> <div class="form-group"> <label>TYPE TIME.</label> <select class="form-control" name="type_time" id="type_time"> <option value="">SELECT TYPE..:</option> <option value="seconds">SECONDS</option> <option value="minutes">MINUTES</option> </select> </div> <div class="form-group" id="form-seconds"> <label>SECONDS:</label> <input type="text" class="form-control" id="seconds-input"> </div> <div class="form-group" id="form-minutes"> <label>MINUTES:</label> <input type="text" class="form-control" id="minutes-input"> </div> <button type="submit" class="btn btn-primary" id="buttonsubmit">Submit</button> </form> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min:js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery Hide & Show Form Use jquery show() and hide() on a form Span class with jQuery - show hide Form valdiation with boolean multiplication not working jquery show/hide on user selection and form validation show/hide fields with jQuery on contact form 7 plugin How to hide and show a <tr> on form load in jquery? Form validation using jquery method show() and hide() Show/hide selected form with jQuery/CSS Hide/Show Form Fields with CSS and jQuery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM