Bootstrap 中的分阶段捐赠表格

Posted 2023-05-08

【中文标题】Bootstrap 中的分阶段捐赠表格

【英文标题】：Staged Donation Form in Bootstrap

【发布时间】：2015-07-09 01:26:56

【问题描述】：

我一直在尝试在 Bootstrap 中创建一个分阶段的捐赠表单，您可以在其中使用前进和后退按钮移动到同一表单的另一部分。它的顶部会有一个很好的指示器，表示您处于完成的哪个步骤。分阶段的捐赠表格平均提高了 4.8% 的捐赠率，所以我真的很想拥有它。

我找到了一个tutorial online 这样做，它非常好，但它有一些问题我希望有人可以帮助我解决（链接中的代码）：

1) 如果与另一列并排放置，当按下下一个按钮时，它会出现故障，将内容向下移动一行。

2) 我无法应用 CSS min-height 属性并在按下下一个按钮后使其保持为真。这将使表单的每个部分保持相同的高度，并且底部的按钮位于相同的位置。

3) 它不包括用于返回按钮的 javascript。

4) 我真的不需要表单验证，所以它是无用的批量。

感谢你们可以给我的任何帮助，我知道在一个问题中寻求很多帮助，但 JS 不是我的专长，它是慈善机构的无偿工作。

【问题讨论】：

尝试缩小您的问题范围并create a minimal example

好的，我有一份功能性草稿，有帮助吗？还是我应该删除它并重新开始？

【参考方案1】：

对于后退按钮，您要做的是创建一个新按钮以转到上一步并将其添加到 html 中以用于第 2 步和第 3 步。然后，您基本上可以复制nextBtn 功能并将其重用于上一个按钮（但您可以删除输入验证，因为上一个按钮不需要它）。

这是按钮代码：

<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Back</button>

还有 Javascript：

allPrevBtn.click(function()
      var curStep = $(this).closest(".setup-content"),
          curStepBtn = curStep.attr("id"),
          prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

          prevStepWizard.trigger('click');
  );

Working example

【讨论】：

谢谢！效果很好，我也设法删除了表单验证（反复试验）。现在我唯一的主要问题是当与另一列并排放置时，该列被向下推。我将使用中断标签来平衡高度。

我的 CSS 问题完全是结构性的。感谢您为我解决了我的问题！

没问题，很高兴您解决了问题！

我会在完成后发布最终的网站模板。你救了我的培根 :)