Question

我的主页上有一个简单的表格。它需要使用按钮在简单版本和详细版本之间切换（是一个单词吗？）。我在哪里放置按钮的代码，在表单元素的内部或外部？我在网上看到提交按钮应该在表单中，所以我猜测切换按钮也应该在那里？但我宁愿问更有经验的人。另外，如何使表单保留与用户在切换时键入的内容相同的内容？

这是我在Wordpress上制作的表格。

Answer 1

我建议将切换按钮放在<form>元素之外，然后使用jQuery（或普通javascript）来处理表单的简单版本和详细版本之间的切换。对于表单的简单和详细版本，我并不清楚您的想法，但这种方法应该很容易适应您的目的。

您可以为高级表单字段指定相同的类（例如“详细”），默认情况下将它们隐藏在CSS中，然后在使用jQuery单击切换按钮时显示它们。

切换按钮时，输入详细表格字段的值不会丢失;值仍然存在，但只是隐藏。单击表单提交按钮时，它们仍然会被提交。

这是切换和<form>代码。

<button id="form-toggle">Toggle Detailed Form Fields</button>
<form id="test-form" action="action_page.php">
    <p>First name: <input type="text" name="firstname" value=""></p>
    <p>Last name: <input type="text" name="lastname" value=""></p>
    <p class="detailed">Email: <input type="email" name="email" value=""></p>
    <p class="detailed">Phone: <input type="tel" name="phone" value=""></p>
    <p><input type="submit" value="Submit"></p>
</form>

这是您应该放在样式表中的CSS，它会默认隐藏详细的表单字段：

.detailed {
    display: none;
}

这是您可以在 functions.php 文件中或在 footer.php </body>之前作为外部.js文件排队的jQuery代码>文件：

<script type="text/javascript"> jQuery(document).ready(function($){ $('#form-toggle').click(function() { $('.detailed').toggle('fast'); }); }); </script>

我应该在<form> </form>之外放置一个切换表单按钮吗？

1 个答案: