Лучший способ использовать один элемент управления в двух формах

Question

Я пытаюсь создать страницу, на которой пользователь выбирает тип подписки, который он хотел бы приобрести, а затем либо вводит данные своей кредитной карты, либо нажимает кнопку "Оплатить с помощью PayPal".

До сих пор лучший способ, которым я мог подумать, это сделать один раскрывающийся список, в котором пользователь выбирал бы тип подписки, а затем две формы рядом (одну, где они вводили бы информацию о CC и другой с большой кнопкой PayPal). Я пришел к такому решению, чтобы в одной форме я мог отправить параметр строки запроса ?paymentType=CreditCard, а в другой - ?paymentType=Paypal. Это избавляет меня от необходимости проверять, является ли buttonText == "Next" процесс как CC, иначе перенаправить на PayPal.

Однако, поскольку элемент управления подпиской не является частью формы или , я не могу получить доступ к выбранному типу без дублирования элемента управления в обеих формах (что не обеспечивает лучшего пользователя). опыт).

Есть ли лучший способ сделать это?

Answer 1

Зачем вам для этого две формы? Я определенно пошел бы с одной формой. Потому что даже если бы у вас было две формы, они все равно делали бы то же самое; подписка.

Вы можете использовать две кнопки-переключатели, подобные этой

<input id="radiobtn-paypal" name="PaymentType" type="radio" value="PayPal" />
<label for="radiobtn-paypal">PayPal</label>
<input id="radiobtn-cc" name="PaymentType" type="radio" value="CC" />
<label for="radiobtn-cc">Credit Card</label>

В зависимости от выбора, показывать текстовое поле кредитной карты или нет. А затем либо обработайте кредитную карту, либо сделайте то, что вам нужно сделать с помощью выбора PayPal для действия в зависимости от выбора пользователя. В конце концов, для чего нужны элементы управления вводом html.