如何为两种不同的形式使用相同的字段？

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());
});

这似乎引发了一个警告:"无效区域无法集中" - 我理解 - 但是,这可以解决并做得好吗？没有JavaScript,有没有办法做到这一点？有更好的方法吗？

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

Answer 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