gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 15:33:57 25 4
gpt4 key购买 nike

我希望在 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 实际上放在了表单之外。如何纠正?

最佳答案

为确保 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
)

关于forms - 基础中表格的某些字段显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22525095/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com