javascript - 带有条件 JavaScript 的在线表单？

问题描述

在此表单上，我需要对单击的前 2 个按钮设置条件。
如果按钮 1 和按钮 2，则显示divid。
我确实switch在单独的脚本上有一些语句，但它与下一个/上一个按钮的 JavaScript 冲突，因为它们也设置为隐藏/显示。
我确实有隐藏所有class“标签”的 CSS。
有任何想法吗？
我可以添加到我现在拥有的当前 JavaScript 吗？
<form id="auto_form" novalidate action="action.php"  method="post">
<link rel="stylesheet" href="./three.css">
 <h4> Auto Insurance Quote </h4> <br>
 <div id= "year">
 <div class="tab">
 <input type= "button" id="2019" value="2019" name="showform" 
 onclick="findmodel(this.value)";</button>
 <input type= "button" id="2018" value="2018" name="showform" 
 onclick="findmodel(this.value);"</button>
 <input type= "button" id="2017" value="2017" name="showform" 
  onclick="findmodel(this.value);"</button>
  <input type= "button" id="2016" value="2016" name="showform" 
 onclick="findmodel(this.value);"</button>
 </div>
  </div>


 <div id= "make">
 <div class="tab">
  <input type= "button" id="chevrolet" value="CHEVROLET" 
  onclick="findmodel(this.value)";</button>
  <input type= "button" id="dodge" value="DODGE" name="showform" 
  onclick="findmodel(this.value);"</button>
  <input type= "button" id="ford" value="FORD" name="showform" 
 onclick="findmodel(this.value);"</button>
  <input type= "button" id="honda" value="HONDA" name="showform" 
  onclick="findmodel(this.value);"</button>
  <input type= "button" id="hyundai" value="HYUNDAI" name="showform" 
  onclick="findmodel(this.value);"</button>
  <input type= "button" id="kia" value="KIA" name="showform" 
  onclick="findmodel(this.value);"</button>
  <input type= "button" id="nissan" value="NISSAN" name="showform" 
  onclick="findmodel(this.value);"</button>
  <input type= "button" id="toyota" value="TOYOTA" name="showform" 
   onclick="findmodel(this.value);"</button>
   </div>
   </div>


  <div id= "chevy_2018">

   <div class="tab">
     <input type= "button" id="bolt_ev" value="BOLT EV" name="showform" 
   onclick="findmodel(this.value)";</button>
    <input type= "button" id="showform" value="CAMARO" name="showform" 
   onclick="findmodel(this.value);"</button>
   <input type= "button" id="showform" value="CITY EXPRESS" name="showform" 
   onclick="showhideForm(this.value);"</button>
   <input type= "button" id="showform" value="CRUZE" name="showform" 
  onclick="showhideForm(this.value);"</button>
   <input type= "button" id="showform" value="EQUINOX" name="showform" 
  onclick="showhideForm(this.value);"</button>
   <input type= "button" id="showform" value="EQUINOX LIMITED" 
  name="showform" onclick="showhideForm(this.value);"</button>
   <input type= "button" id="showform" value="EXPRESS G2500" name="showform" 
   onclick="showhideForm(this.value);"</button>
   <input type= "button" id="showform" value="EXPRESS G3500" name="showform" 
   onclick="showhideForm(this.value);"</button>
   <input type= "button" id="showform" value="IMPALA" name="showform" 
    onclick="showhideForm(this.value);"</button>
     <input type= "button" id="showform" value="MALIBU" name="showform" 
   onclick="showhideForm(this.value);"</button>
    <input type= "button" id="showform" value="SILVERADO" name="showform" 
     onclick="showhideForm(this.value);"</button>
     <input type= "button" id="showform" value="SONIC" name="showform" 
    onclick="showhideForm(this.value);"</button>
        <input type= "button" id="showform" value="SPARK" name="showform" 
    onclick="showhideForm(this.value);"</button>
    <input type= "button" id="showform" value="SUBURAN" name="showform" 
   onclick="showhideForm(this.value);"</button>
     <input type= "button" id="showform" value="TAHOE" name="showform" 
     onclick="showhideForm(this.value);"</button>
     <input type= "button" id="showform" value="TRAVERSE" name="showform" 
    onclick="showhideForm(this.value);"</button>
     <input type= "button" id="showform" value="TRAX" name="showform" 
    onclick="showhideForm(this.value);"</button>
    <input type= "button" id="showform" value="VOLT" name="showform" 
    onclick="showhideForm(this.value);"</button>
     <input type= "button" id="showform" value="OTHER" name="showform" 
     onclick="showhideForm(this.value);"</button>
     </div>

    <div id= "gender">

    <div class="tab">
    <input type= "button" id="male" value="MALE" name="showform" 
    onclick="showhideForm(this.value);"</button>
     <input type= "button" id="female" value="FEMALE" name="showform" 
    onclick="showhideForm(this.value);"</button>
        </div>

     <div id= "name">

        <div class="tab">
     First name:<br>
      <input type="text" name="firstname"><br>
         Last name:<br>
            <input type="text" name="lastname"><br>
        </div>

     <div id= "dob">
      <div class="tab">
    <input type= "button" id="jan" value="JAN" name="showform" 
   onclick="next(this.value);"</button>
      <input type= "button" id="feb" value="FEB" name="showform" 
      onclick="next(this.value);"</button>
      <input type= "button" id="march" value="MARCH" name="showform" 
      onclick="next(this.value);"</button><br>
       <h6> Day You Were Born </h6> <br>
      <input type= "button" id="1" value="1" name="showform" 
    onclick="next(this.value);"</button>
      <input type= "button" id="2" value="2" name="showform" 
      onclick="next(this.value);"</button>
     <input type= "button" id="3" value="3" name="showform" 
     onclick="next(this.value);"</button><br>
    <h6> Year You Were Born </h6> <br>
    <input type= "button" id="2000" value="2000" name="showform" 
    onclick="next(this.value);"</button>
      <input type= "button" id="2001" value="2001" name="showform" 
      onclick="next(this.value);"</button>
     <input type= "button" id="2002" value="2002" name="showform" 
      onclick="next(this.value);"</button>
        </div>


     <div style="overflow:auto;">
        <div style="float:right;">
       <button type="button" id="prevBtn" 
       onclick="nextPrev(-1)">Previous</button>
          <button type="button" id="nextBtn" 
      onclick="nextPrev(1)">Next</button>
        </div>

       <!-- Circles which indicates the steps of the form: -->
       <div style="text-align:center;margin-top:40px;">
         <span class="step"></span>
        <span class="step"></span>
        <span class="step"></span>
        <span class="step"></span>
          <span class="step"></span>
         <span class="step"></span>
        <span class="step"></span>
        </div>

        </form>


      <script>
      var currentTab = 0; // Current tab is set to be the first tab (0)
      showTab(currentTab); // Display the current tab

        function showTab(n) {
     // This function will display the specified tab of the form ...
     var x = document.getElementsByClassName("tab");
          x[n].style.display = "block";
            // ... and fix the Previous/Next buttons:
            if (n == 0) {
         document.getElementById("prevBtn").style.display = "none";
            } else {
          document.getElementById("prevBtn").style.display = "inline";
     }
         if (n == (x.length - 1)) {
     document.getElementById("nextBtn").innerHTML = "Submit";
     } else {
       document.getElementById("nextBtn").innerHTML = "Next";
        }
        // ... and run a function that displays the correct step indicator:
         fixStepIndicator(n)
          }

     function nextPrev(n) {
     // This function will figure out which tab to display
      var x = document.getElementsByClassName("tab");
       // Exit the function if any field in the current tab is invalid:
       if (n == 1 && !validateForm()) return false;
        // Hide the current tab:
        x[currentTab].style.display = "none";
        // Increase or decrease the current tab by 1:
           currentTab = currentTab + n;
        // if you have reached the end of the form... :
      if (currentTab >= x.length) {
           //...the form gets submitted:
          document.getElementById("regForm").submit();
           return false;
              }
          // Otherwise, display the correct tab:
          showTab(currentTab);
           }

            function validateForm() {
          // This function deals with validation of the form fields
        var x, y, i, valid = true;
       x = document.getElementsByClassName("tab");
          y = x[currentTab].getElementsByTagName("input");
           // A loop that checks every input field in the current tab:
            for (i = 0; i < y.length; i++) {
            // If a field is empty...
             if (y[i].value == "") {
              // add an "invalid" class to the field:
              y[i].className += " invalid";
              // and set the current valid status to false:
               valid = false;
                }
           }
                 // If the valid status is true, mark the step as finished 
         and valid:
          if (valid) {
          document.getElementsByClassName("step")[currentTab].className += " 
         finish";
            }
          return valid; // return the valid status
             }

              function fixStepIndicator(n) {
        // This function removes the "active" class of all steps...
           var i, x = document.getElementsByClassName("step");
                 for (i = 0; i < x.length; i++) {
              x[i].className = x[i].className.replace(" active", "");
                   }
              //... and adds the "active" class to the current step:
           x[n].className += " active";
             }
          </script>
标签： javascriptformsconditional
javascript - 带有条件 JavaScript 的在线表单？

问题描述

解决方案

推荐阅读
