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

Answer 2

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

对于存在JavaScript时处于活动状态的字段，请使用document.write（“fields here”）;将该数据放在JavaScript本身中。

最终结果将是这些字段在启用JavaScript时显示，并且在禁用JavaScript时不会显示。

希望这有帮助。

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

2 个答案: