javascript - 如何将从表单收到的信息发送到将存储它们的按钮链接，并在点击时显示它们？

Question

我正在做某事，我只是被困在这里。我想将填写表格时收到的信息发送到使用 js 创建的按钮，当我按下该按钮时，它们需要显示在同一页面上（我将我的正文划分为 col-3 以获得我将获得的表格 -输入将存储在那里，剩下的 col-9 我想在按下每个按钮后用来显示这些信息。

表格：

<form class="container jumbotron">
        <div class="form-row">
          <div class="col-md-4 mb-3">
            <label for="FirstName">First Name</label>
            <input type="text" class="form-control" id="FirstName" required>
          </div>
          <div class="col-md-4 mb-3">
            <label for="LastName">Last Name</label>
            <input type="text" class="form-control" id="LastName" required>
          </div>
          <div class="col-md-2 mb-3">
              <label for="Age">Age</label>
              <input type="number" class="form-control" id="Age" required>
          </div>
          <div class="col-md-2 mb-3">
            <label for="Sex">Sex</label>
            <select class="custom-select" id="validationDefault04" required>
              <option selected disabled value="">Select gender</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
    </div>
        <div class="form-row">
            <div class="col-md-3 mb-3">
                <label for="City">Address</label>
                <input type="text" class="form-control" id="Address" required>
              </div>
              <div class="col-md-3 mb-3">
                <label for="PhoneNumber">Phone Number</label>
                <input type="tel" class="form-control" id="PhoneNumber" required>
              </div>
            <div class="col-md-3 mb-3">
                <label for="Email">Email</label>
                <input type="email" class="form-control" id="Email" required>
              </div>
            <div class="col-md-3 mb-3">
                <label for="Email">Secondary Email</label>
                <input type="email" class="form-control" id="Email">
              </div>
        </div>
        <div class="form-row">
        <div class="col-md-3 mb-3">
            <label for="date">Birthday</label><br>
            <input type="date" id="datemax" class="form-control" name="datemax" min="1900-01-01" max="2020-01-01" required>           
          </div>
        </div>

        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
            <label class="form-check-label" for="invalidCheck2">
              I agree to terms and conditions
            </label>
          </div>
        </div>
        <button class="btn btn-primary" type="submit">Add new contact</button>       
      </form>

这是创建按钮的代码

 function myFunction() {
 var para = document.createElement("button");
 para.innerText = "Hristijan Bosheski";
 document.body.appendChild(para);
 linebreak = document.createElement("br");
 document.body.appendChild(linebreak);
 var para = document.createElement("button");
 para.innerText = "Hristijan Bosheski";
 document.body.appendChild(para);
 linebreak = document.createElement("br");
 document.body.appendChild(linebreak);
 var para = document.createElement("button");
 para.innerText = "Hristijan Bosheski";
 document.body.appendChild(para);
 linebreak = document.createElement("br");
 document.body.appendChild(linebreak);
 var para = document.createElement("button");
 para.innerText = "Hristijan Bosheski";
 document.body.appendChild(para);
 linebreak = document.createElement("br");
 document.body.appendChild(linebreak);
 var para = document.createElement("button");
 para.innerText = "Hristijan Bosheski";
 document.body.appendChild(para);
 linebreak = document.createElement("br");
 document.body.appendChild(linebreak);
 var para = document.createElement("button");
 para.innerText = "Hristijan Bosheski";
 document.body.appendChild(para);

} 任何帮助将不胜感激。

标签： javascripthtml