Как я могу использовать одни и те же поля для двух разных форм?

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, поместите эти данные в сам JavaScriptиспользуя document.write («поля здесь»);

Конечным результатом будет то, что эти поля появляются, когда JavaScript включен, и не появляются, когда JavaScript отключен.

Надеюсь, это поможет.