forms - 基础中表格的某些字段显示

Question

我希望在 foundation reveal 中显示我的表单的一些字段以及提交按钮。

类似于:

<form action="" method="POST">
    {% csrf_token %}
        <div class="large-8 columns">
            <input type="text" name="name" label="name"></input>
        </div>

        <a href="" class="button" data-reveal-id="display_detail">Submit</a>

        <div id="display_detail" class="reveal-modal" data-reveal>

            <input type="text" name="age" label="name"></input>
            <input type="submit" value="Submit" class="button">
        </div>
</form>

但是当单击“提交”链接时，我看到 reveal-data div 实际上放在了表单之外。如何纠正？

Answer 1

为确保 Reveal 模态实际上悬停在页面上方，而不是在某个相对定位的元素内，有必要将 html 移动到顶级 body 元素。

为了解决这个问题，我没有尝试侵入 Reveal 插件来阻止这种行为，而是向复制条目的新表单添加了一个事件监听器:

<form action="" method="POST" id="baseform">
    {% csrf_token %}
    <div class="large-8 columns">
        <input type="text" name="name" label="name"></input>
    </div>

    <a href="" class="button" data-reveal-id="display_detail">Submit</a>


    <div>
        <!-- preferably hide this block using JS -->
        <input type="text" name="age" label="name"></input>
        <input type="submit" value="Submit" class="button">
    </div>
</form>

<div id="display_detail" class="reveal-modal" data-reveal>
    <form data-linked-form="baseform">
        <input type="text" name="age" label="name"></input>
        <input type="submit" value="Submit" class="button">
    </form>
</div>

然后使用 coffeescript:

# duplicate values
$(document).on('input', 'form[data-linked-form]', (e)->
  form = e.currentTarget
  input = e.target
  document.forms[form.dataset.linkedForm].elements[input.name].value = input.value
)

# submit the linked form, instead of itself
$(document).on('sumit', 'form[data-linked-form]', (e)->
  form = e.target
  document.forms[form.dataset.linkedForm].submit
)