点击按钮（嵌入表格）提交和更改表格

时间：2018-06-07 08:07:16

标签： javascript jquery html css

我正在尝试创建一个最初显示表单的弹出窗体。完成表单并单击下一步后，它将提交该表单并在其位置显示另一个表单。但是，由于我的JavaScript与＃34;不同步＆＃34;，我相信我没有使用正确的方法。

这是我到目前为止所拥有的：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".modal-content .hs-button").click(function() {
    var button = $(this);
    var currentSection = button.parents(".section");
    var currentSectionIndex = currentSection.index();
    var headerSection = $('.steps li').eq(currentSectionIndex);
    currentSection.removeClass("is-active").next().addClass("is-active");
    headerSection.removeClass("is-active").next().addClass("is-active");

    $(".form-wrapper").submit(function(e) {
      e.preventDefault();
    });

    if (currentSectionIndex === 3) {
      $(document).find(".modal-content .form-columns-2 .form-columns-1").first().addClass("is-active");
      $(document).find(".steps li").first().addClass("is-active");
    }
  });
});
＆＃13; 
a {
  cursor: pointer;
}

p {
  margin: 0 0 1rem;
  font-weight: 400;
}

a {
  color: inherit;
  cursor: pointer;
}

ul {
  padding-left: 0;
  margin: 0;
}

@media (max-width: 1900px) {
  .modal .modal-content {
    width: 50% !important;
  }
  .modal input[type=text],
  .modal input[type=email] {
    margin: 0 !important;
  }
  .modal textarea {
    margin: 0 !important;
  }
}

.input textarea {
  padding-left: 10px !important;
}

.modal {
  display: none;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal .modal-content {
  background-color: #097afb;
  margin: 4% auto 15% auto;
  width: 40%;
  padding-bottom: 30px;
  border-radius: 3px;
}

.modal .steps {
  text-align: center;
}

.modal .steps li {
  display: inline-block;
  margin: 20px;
  color: #fff;
  font-size: 0.875rem;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.modal .imgcontainer {
  text-align: center;
  position: relative;
  display: block;
}

.modal .imgcontainer h2 {
  font-size: 29px;
  padding-top: 50px;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}

.modal .imgcontainer p {
  font-size: 18px !important;
  padding-top: 10px;
  color: #fff;
}

.modal input[type=text],
.modal input[type=email] {
  width: 90%;
  padding: 12px 12px;
  margin: 10px 50%;
  display: inline-block;
  border-bottom: 1px solid #414141;
  box-sizing: border-box;
  font-size: 16px;
  background: transparent;
  text-transform: uppercase;
  border-top: none;
  border-left: none;
  box-shadow: none;
  border-right: none;
}

.modal textarea {
  width: 98% !important;
  padding: 12px 20px;
  margin: 8px 25%;
  display: inline-block;
  border-bottom: 1px solid #414141 !important;
  box-sizing: border-box;
  font-size: 16px !important;
  background: transparent;
  text-transform: uppercase;
  border-top: none !important;
  border-left: none !important;
  box-shadow: none !important;
  border-right: none !important;
  resize: none;
}

.modal form span:not(.close) {
  display: none !important;
}

.modal form .actions {
  padding: 0px 20px 0px 0px;
  width: 87%;
  display: inline-block;
}

.modal form .actions input[type=submit]:hover {
  background-color: #000;
  color: #fff;
  border: 2px solid #000;
}

.modal .close {
  position: absolute;
  right: 20px;
  top: 15px;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
}

.modal .close:hover {
  color: #000;
  cursor: pointer;
}

input.hs-input,
textarea.hs-input {
  display: inline-block;
  width: 210px;
  height: 18px;
  padding: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  color: #666;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}

textarea.hs-input {
  padding-top: 5px;
}

textarea.hs-input {
  height: auto;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="visible" class="button-outline hero-button button-arrow" onclick="document.getElementById('modal-wrapper').style.display='block'">Click here</a>

<div id="modal-wrapper" class="modal" style="display: none;">
  <div>
    <div>
      <div>
        <div>
          <span>
          <form class="modal-content animate">
<div class="imgcontainer"><span onclick="document.getElementById('modal-wrapper').style.display='none'" class="close" title="Close PopUp">×</span>
          <h2 style="text-align: center;">Title</h2>
          <p>Lorum Ipsum</p>
        </div>
        <div class="container">
          <!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
          <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
          <script>
            // <![CDATA[
            hbspt.forms.create({
              portalId: "103687",
              formId: "7c124354-e1ff-411d-9245-2b214e943a90"
            });
            // ]]>
          </script>
          <div></div>
          <ul class="steps">
            <li class="is-active"><a>Step 1</a></li>
            <li>/</li>
            <li><a>Step 2</a></li>
            <li>/</li>
            <li><a>Step 3</a></li>
          </ul>
        </div>
        </form>
        </span>
      </div>
    </div>
  </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

为简化起见，用户点击按钮＆gt;表单出现＆gt;用户填写表格＆gt;表格已提交，并显示第二个表格。

问题，表单本身已嵌入到弹出窗口中，因此我无法更改fieldset中显示的<!--[if lte IE 8]> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script> <![endif]--> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "103687", formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844" }); </script> 。

表单1嵌入代码显示在小提琴中。在表格1提交时，我需要表格2出现，即

import sys
import random
from PySide2 import QtCore, QtWidgets, QtGui

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()

        self.hello = ["Hallo Welt", "你好，世界", "Hei maailma",\
            "Hola Mundo", "Привет мир"]

        self.button = QtWidgets.QPushButton("Click me!")
        self.text = QtWidgets.QLabel("Hello World")
        self.text.setAlignment(QtCore.Qt.AlignCenter)

        self.text.setFont(QtGui.QFont("Titillium", 30))
        self.button.setFont(QtGui.QFont("Titillium", 20))

        self.layout = QtWidgets.QVBoxLayout()
        self.layout.addWidget(self.text)
        self.layout.addWidget(self.button)
        self.setLayout(self.layout)

        shortcut = QtWidgets.QShortcut(QtGui.QKeySequence('o'), self.button)
        shortcut.activated.connect(self.magic)

        self.button.clicked.connect(self.magic)


    def magic(self):
        self.text.setText(random.choice(self.hello))

if __name__ == "__main__":
    app = QtWidgets.QApplication([])

    widget = MyWidget()
    widget.resize(800, 600)
    widget.show()

    sys.exit(app.exec_())

我认为我的整个JS代码不是＆＃34;高效＆＃34;。我已经看到多步表单只是涉及单个表单，但不确定如何使用多个表单。

2 个答案:

答案 0 :(得分：0)

您可以使用bootstrap进行模态弹出：

https://codepen.io/creativedev/pen/VdKymZ

我刚刚使用过bootstrap并更改了HTML 

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">


<div class="containers">
    <div class="wrapper">
      <ul class="steps">
        <li class="is-active">Step 1</li>
        <li>Step 2</li>
        <li>Step 3</li>
      </ul>
      <form class="form-wrapper">
        <fieldset class="section is-active">
          <h3>Your Details</h3>
          <input type="text" name="name" id="name" placeholder="Name">
          <input type="text" name="email" id="email" placeholder="Email">
          <div class="button">Next</div>
        </fieldset>
        <fieldset class="section">
          <h3>Account Type</h3>
          <div class="row cf">
            <div class="four col">
              <input type="radio" name="r1" id="r1" checked>
              <label for="r1">
                <h4>Designer</h4>
              </label>
            </div>
            <div class="four col">
              <input type="radio" name="r1" id="r2"><label for="r2">
                <h4>Developer</h4>
              </label>
            </div>
            <div class="four col">
              <input type="radio" name="r1" id="r3"><label for="r3">
                <h4>Project Manager</h4>
              </label>
            </div>
          </div>
          <div class="button">Next</div>
        </fieldset>
        <fieldset class="section">
          <h3>Choose a Password</h3>
          <input type="password" name="password" id="password" placeholder="Password">
          <input type="password" name="password2" id="password2" placeholder="Re-enter Password">
          <input class="submit button" type="submit" value="Sign Up">
        </fieldset>
        <fieldset class="section">
          <h3>Account Created!</h3>
          <p>Your account has now been created.</p>
          <div class="button">Reset Form</div>
        </fieldset>
      </form>
    </div>
  </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

试试这个。

需要的是target选项告诉hubspot放置表单的位置：

<script>
hbspt.forms.create({ 
    portalId: "103687",
    formId: "555bd0a1-adb9-4e31-b71e-e09e4834e844",
    target: "#my_form",
});
</script>

Read this

相关问题
最新问题