我试图只显示一个窗体完成后，然后形式2，窗体2不会显示？

Question

我想在完成后隐藏第一个表单，然后在第一个表单的同一位置显示第二个表单，之后我会将输入的信息发送到电子邮件。

社区可以提出我需要改变我的代码，谢谢。

function showhide() { 
 
    var myDiv = document.getElementById("form2"); 
 
    var div = document.getElementById("form1"); 
 
    if (div.style.display !== "none") { 
 
    div.style.display = "none"; 
 
    } else { 
 
    div.style.display = "form2"; 
 
    } 
 
};

#form2 { 
 
    display: none; 
 
}

<div class="col-md-4" id="form1"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h3>Help is here!</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <!-- HTML Form (wrapped in a .bootstrap-iso div) --> 
 
     <div class="bootstrap-iso"> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
      <div class="col-md-12 col-sm-3 col-xs-12"> 
 
       <form method="post"> 
 
       <div class="form-group "> 
 
        <label class="control-label " for="name"> 
 
        First name 
 
        </label> 
 
        <input class="form-control" id="name" name="name" type="text" required/> 
 
       </div> 
 
       <div class="form-group "> 
 
        <label class="control-label " for="name1"> 
 
        Last name 
 
        </label> 
 
        <input class="form-control" id="name1" name="name1" type="text" required/> 
 
       </div> 
 
       <div class="form-group "> 
 
        <label class="control-label " for="tel"> 
 
        Telephone # 
 
        </label> 
 
        <input class="form-control" id="tel" name="tel" type="text" required/> 
 
       </div> 
 
       <div class="form-group "> 
 
        <label class="control-label requiredField" for="email"> 
 
        Email 
 
        <span class="asteriskField"> 
 
     * 
 
    </span> 
 
        </label> 
 
        <input class="form-control" id="email" name="email" type="text" required/> 
 
       </div> 
 
       <div> 
 
        <button id="button" onclick="showhide()">Click Me</button> 
 
       </div> 
 
      </div> 
 
      </form> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-12 " id="form2"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3>One more step</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <!-- HTML Form (wrapped in a .bootstrap-iso div) --> 
 
      <div class="bootstrap-iso"> 
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
       <div class="col-md-12 col-sm-3 col-xs-12"> 
 
        <form method="post"> 
 
        <div class="form-group "> 
 
         <label class="control-label " for="state"> 
 
         What state are you in? 
 
         </label> 
 
         <select class="form-control"> 
 
         <option>Alabama</option> 
 
         <option>Alaska</option> 
 
         <option>Arizona</option> 
 
         <option>Arkansas</option> 
 
         <option>California</option> 
 
         <option>Colorado</option> 
 
         <option>Connecticut</option> 
 
         <option>Delaware</option> 
 
         <option>Florida</option> 
 
         <option>Georgia</option> 
 
         <option>Hawaii</option> 
 
         <option>Idaho</option> 
 
         <option>Illinois Indiana</option> 
 
         <option>Iowa</option> 
 
         <option>Kansas</option> 
 
         <option>Kentucky</option> 
 
         <option>Louisiana</option> 
 
         <option>Maine</option> 
 
         <option>Maryland</option> 
 
         <option>Massachusetts</option> 
 
         <option>Michigan</option> 
 
         <option>Minnesota</option> 
 
         <option>Mississippi</option> 
 
         <option>Missouri</option> 
 
         <option>Montana Nebraska</option> 
 
         <option>Nevada</option> 
 
         <option>New Hampshire</option> 
 
         <option>New Jersey</option> 
 
         <option>New Mexico</option> 
 
         <option>New York</option> 
 
         <option>North Carolina</option> 
 
         <option>North Dakota</option> 
 
         <option>Ohio</option> 
 
         <option>Oklahoma</option> 
 
         <option>Oregon</option> 
 
         <option>Pennsylvania Rhode Island</option> 
 
         <option>South Carolina</option> 
 
         <option>South Dakota</option> 
 
         <option>Tennessee</option> 
 
         <option>Texas</option> 
 
         <option>Utah</option> 
 
         <option>Vermont</option> 
 
         <option>Virginia</option> 
 
         <option>Washington</option> 
 
         <option>West Virginia</option> 
 
         <option>Wisconsin</option> 
 
         <option>Wyoming</option> 
 
         </select> 
 
        </div> 
 
        <div class="form-group "> 
 
         <label class="control-label " for="owe"> 
 
         How much do you owe on your house? 
 
         </label> 
 
         <select class="form-control"> 
 
         <option>Select one</option> 
 
         <option>owe less than $75,000 on home</option> 
 
         <option>owe between $75,000 to 100,000</option> 
 
         <option>owe between $100,000 to $200,000</option> 
 
         <option>owe between $300,000 to $400,000</option> 
 
         <option>owe between $400,000 to $500,000</option> 
 
         <option>owe more than $500,000 on home</option> 
 
         </select> 
 
        </div> 
 
        <div class="form-group "> 
 
         <label class="control-label " for="lender"> 
 
         Who is your lender? 
 
         </label> 
 
         <input class="form-control" id="lender" name="lender" type="text" /> 
 
        </div> 
 
        <div class="form-group "> 
 
         <label class="control-label requiredField" for="foreclose-date"> 
 
         Is there a foreclosure sales auction date set? 
 
         <label class="radio-inline"> 
 
          <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">Yes 
 
         </label> 
 
         <label class="radio-inline"> 
 
          <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">No 
 
         </label> 
 
         </label> 
 
        </div> 
 
        <div class="form-group "> 
 
         <label class="control-label " for="property"> 
 
         Property address 
 
         </label> 
 
         <input class="form-control" id="property" name="property" type="text" /> 
 
        </div> 
 
        <div class="form-group"> 
 
        </div> 
 
        <div> 
 
         <button class="btn btn-primary " name="submit" type="submit"> 
 
         Submit 
 
         </button> 
 
        </div> 
 
       </div> 
 
       </form> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>

Answer 1

如果你想发送在一个步骤中，你必须只使用一个<form>

因此，在输入栏外“完全”使用<form> DS。

，你想交换，你可以用一个简单的javascript禁用像

function showhide() { 
    document.getElementById("form2").style.display = "block"; 
    document.getElementById("form1").style.display = "none"; 
}; 

队的第一个按钮type="button"防止提交的组件。

这里完整版本：https://jsfiddle.net/6e2otxvq/1/更新：整洁的HTML

Answer 2

更改您的功能显示隐藏（），如下图所示

function showhide(){ 
    var myDiv = document.getElementById("form2"); 
    var div = document.getElementById("form1"); 

    //to hide form-1 
    div.style.display = "none"; 

    //to display form-2 
    myDiv.style.display = "block"; 
}