Do I use Javascript for HTML <select> needs to affect two variables?

I'm currently working on a paypal checkout form. The form allows the user to specify a few options and when they submit the form, it submits the order to paypal for processing.

The form has a <select> droplist that allows a user to select how many times they want a subscription to recur. It is set up like this:

<select name="srt">                         <!-- User specifies amount of times payment should recur -->
    <option value="1"></option>
    <option value="2"></option>  
    <option value="3"></option>  
</select>
<input type="hidden" name="src" value="1">   <!-- Specifies that payment should be recurring-->

This works in most cases, however when the user selects the first option with the srt value="1", paypal instead wants this to be submitted with srt blank or omitted and src (the hidden input below the form) with value="0". The reason for this seems to be that if the payment is to recur 1 time, meaning to charge the customer only once, then this is not a recurring payment at all, so srt is not valid and instead src, which specifies if payments should recur or not, should be set to 0.

I'm wondering what is the best way to handle this. The only thing I can think of is to use javascript to set hidden form values depending on what the user selects in a <select> drop list.

Is that the best way to handle this, or is there a better w开发者_StackOverflow社区ay that does not require the browser to handle javascript?

Thanks!

First of all I would like to make it clear that all values computed in the browser must be validated on the server. There really is no substitute for server side validation. Client-side scripts must only be used to improve user experience. Failing to do so is a security hole waiting to be exploited.

1. To solve the issue at hand you could exploit the fact that disabled inputs aren't submitted when a form is posted. Thus if the user doesn't select to make a recurring payment srt will never get posted.
2. Start out with srt both disabled and hidden.
3. The hidden input src should have a value of 0 to start with.
4. Add a "Recurring Payment?" checkbox to the form.
5. If the user selects the checkbox, enable and show srt via Javascript.
6. Set the value of src equal to whatever the user selects in srt.
7. Disable and blank out srt and src if the user ever unchecks the checkbox.

DEMO

Markup:

<p><input type="checkbox" value="recurring" id="recurring"/>Recurring Payment?</p>
<select disabled id="srt" name="srt">                         
    <option selected value="2">2</option>  
    <option value="3">3</option>  
</select>
<input type="hidden" id="src" name="src" value="0"> 

jQuery:

$('#recurring').click(function() {
    var $srt = $('#srt'),
        $src = $('#src');
    if (this.checked) {
        $srt.prop('disabled', false).toggle();
        $src.val($srt.val());
    } else {
        $srt.prop('disabled', true).toggle();
        $src.val(0);
    }
});

$('#srt').change(function() {
    $('#src').val($(this).val());
});