Best way to use one control in two forms

Question

I'm trying to create a page where a user selects the type of subscription they'd like to purchase and then either enters their credit card info or hits the "Pay with PayPal" button.

So far, the best way I could think to do it was to have a single drop down where the user would select the subscription type and then two forms side-by-side (one where they would enter in the CC info and another with just a big PayPal button). I arrived at this decision so that in the one form, I could send a ?paymentType=CreditCard querystring parameter and in the other, I could send ?paymentType=Paypal. This gets me out of having to check if buttonText == "Next" process as CC, else redirect to PayPal.

However, seeing as the subscription control is not part of either form, I can't access the type that has been selected without duplicating the control in both forms (which doesn't provide the best user experience).

Is there a better way to do this?

Answer 1

Why do you need two forms for that? I would definitely go with one form. Because even if you had two forms, they'd be still doing the same thing ; subscription.

You can have two radio buttons like this

<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>

Depending on the selection, show the credit card textbox or not. And then either process the credit card or do what you need to do with PayPal selection on the action depending on the user's selection. After all these are what the html input controls are for.