Adding js variable to html input tag

Question

Trying to set up a paypal button for recurring donations to end at a specific date (dec 2017). We want the subscription length to be dynamic (someone who signs up in 2 months will not have as many recurrences as someone who signs up now bc less time until dec 2017). I'm new to programming but think I've set up the js code to determine the remaining months. My question is how to input that variable (numberOfMonths) into the html input tag. I need to somehow place the variable in the value for the input name srt in the line:

<input type="hidden" name="srt" value="MyVariable">

Right now the full code is:

<script>
var date1=new Date(); // blank uses current date 
var date2=new Date(2017,11,31); //months 0 based in js so actually dec
var year1=date1.getFullYear();
var year2=date2.getFullYear();
var month1=date1.getMonth();
var month2=date2.getMonth();
if(month1===0){ //Have to take into account
  month1++;
  month2++;
}
var numberOfMonths; 
numberOfMonths=(year2-year1)*12+(month2-(month1-1));
return numberOfMonths;

</script>


<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<!--You will need to set the email to your PayPal email or Secure Merchant ID -->
<input type="hidden" name="business" value="TEZ9LZK9B36X8">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Monthly Donation">
<input type="hidden" name="item_number" value="1234">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="src" value="1">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-SubscriptionsBF:btn_subscribeCC_LG.gif:NonHosted">
<input type="hidden" name="srt" value="35">
<input type="hidden" name="t3" value="M">
<table>
<tr><td>Enter Your Donation Amount</td></tr>
<tr><td>$ <input type="text" name="a3" maxlength="60"></td></tr>
</table>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0"        
name="submit" alt="PayPal - The safer, easier way to 
pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Answer 1

First of all, you have a return statement outside of a function in your script. Second, if you're using vanilla javascript (no jquery), you can give the input an id and use document.getElementById to select the input and change its value. The input can be:

<input type="hidden" name="srt" id="srtVal" value="MyVariable">

And the javascript:

function calcuateMonthsRemaining(){
    var date1=new Date(); // blank uses current date 
    var date2=new Date(2017,11,31); //months 0 based in js so actually dec
    var year1=date1.getFullYear();
    var year2=date2.getFullYear();
    var month1=date1.getMonth();
    var month2=date2.getMonth();
    if(month1===0){ //Have to take into account
      month1++;
      month2++;
    }
    return (year2-year1)*12+(month2-(month1-1));
}
document.getElementById('srtVal').value = calculateMonthsRemaining();

Note that you should move the javascript in your script tag below the html form, so that your input element is loaded before you try to modify its value.

Answer 2

You should add the id attribute:

<input type="hidden" name="srt" value="MyVariable" id="numberOfMonths" />

And then:

<script>
document.getElementById("numberOfMonths").value = (function(){
    var date1  = new Date(),
        month1 = date1.getMonth(),
        year1  = date1.getFullYear(),
        date2  = new Date(2017,11,31),
        month2 = date2.getMonth(),
        year2  = date2.getFullYear();

    if(month1===0){
        month1++;
        month2++;
    }
    return (year2-year1)*12+(month2-(month1-1));
}());
</script>