javascript - 我试图在完成后仅显示表格，然后显示表格 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> “完全”超出输入字段。

并且您想要交换的组件可以使用简单的 JavaScript 禁用，例如

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

将第一个按钮强制设置为 type="button"以防止提交。

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