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

Question

我正在尝试在 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());
});

这似乎触发了警告 "invalid field is not focusable" - 我理解 - 但是，这可以解决并做好吗？没有 JavaScript 有没有办法做到这一点？有没有更好的办法？

假设我将在用户浏览器上没有 JS 的情况下显示隐藏的内容。我们还假设我得到了这个设计并要求实现它，即这不是关于 UX.

的问题

Answer 1

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

就存在 JavaScript 时活动的字段而言，使用 document.write("fields here"); 将该数据放置在 JavaScript 本身内。

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

希望对您有所帮助。

Answer 2

只需将 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

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

How can I use the same fields for two different forms?

javascript

php

wordpress

login

woocommerce