如何为两种不同的表单使用相同的字段？答案

【问题标题】：How can I use the same fields for two different forms?如何为两种不同的表单使用相同的字段？
【发布时间】：2018-05-23 00:56:01
【问题描述】：

我正在尝试在 WooCommerce/WordPress 网站上合并登录和注册表单。这个想法是一组字段，用户名和密码，可以通过两种不同的形式提交。我想到的第一种方法是（为清楚起见而简化）：

<form id="login">
    <input id="username">
    <input id="password">
    <button type="submit">LOG IN</button>
</form>
<form id="register">
    <div style="visibility:hidden!important;position:fixed!important;">
        <input id="register_username">
        <input id="register_password">
    </div>
    <button type="submit">REGISTER</button>
</form>

基本上，布局隐藏了第二对输入，但显示了两个按钮。然后，有一些JS反映了相应字段的值：

var u = $('#username');
var p = $('#password');
var ru = $('#register_username');
var rp = $('#register_password')

$('#login').on('change blur focus click keyup',function(){
    ru.val(u.val());
    rp.val(p.val());
});

这似乎触发了“无效字段不可聚焦”的警告 - 我理解 - 但是，这可以解决并做好吗？有没有办法在没有 JavaScript 的情况下做到这一点？有没有更好的方法？

假设我会在用户浏览器上没有 JS 的情况下显示隐藏的东西。我们还假设我得到了这个设计并被要求实现它，也就是说，这不是关于 UX 的问题。

【问题讨论】：

确认一下，您想创建一个带有“登录”和“注册”两个按钮的表单

标签： javascript php wordpress login woocommerce

【解决方案1】：

只需将 2 个表单合并为一个并设置 2 个按钮

<form id="login">
    <input id="username">
    <input id="password">
    <button name="submit" type="submit" value="login">LOG IN</button>
    <button name="submit" type="submit" value="registration">REGISTER</button>
</form>

提交表单后，您需要检查提交值，例如

if($_POST['submit'] == 'login')
    then do code for login
else if($_POST['submit'] == 'registration')
    then do code for registration

【讨论】：

这正是我想要的。方便的是，HTML5 规范规定默认按钮（即，通常按 Enter 键触发的按钮）是标记中最先出现的按钮。我确实必须在执行登录代码之前设置一个额外的变量，但这绝对是正确的答案。

【解决方案2】：

要在没有 javascript 的情况下显示隐藏字段，您可以将数据放在以下标签之间：

至于存在 JavaScript 时处于活动状态的字段，使用 document.write("fields here"); 将该数据放在 JavaScript 本身中。

最终结果将是这些字段在启用 JavaScript 时出现，而在禁用 JavaScript 时不出现。

希望这会有所帮助。

【讨论】：