Automatically populate input field with data on clicking radio buttons
<p>When the user selects a radio button in the 2 categories Plan details and Plan Duration the input field should populate with the relevant data through JavaScript.</p>

<p>Please check the html markup and JavaScript below and suggest corrections or an alternate method that would work.</p>



<pre><code>&lt;h3 class="fltClear"&gt;Plan Details&lt;/h3&gt;
&lt;div id="spryradio1"&gt;
&lt;dt&gt;Plan Type: &lt;span class="required"&gt;*&lt;/span&gt;&lt;/dt&gt;
&lt;dd&gt;
&lt;label&gt;
  &lt;input type="radio" name="RadioGroup1" value="Silver" id="RadioGroup1_0" onClick="changeplanprice();" class="RadioGroup1" /&gt;
  Silver&lt;/label&gt;
&lt;br&gt;
&lt;label&gt;
  &lt;input type="radio" name="RadioGroup1" value="Gold" id="RadioGroup1_1" onClick="changeplanprice();" class="RadioGroup1" /&gt;
  Gold&lt;/label&gt;
&lt;br&gt;
&lt;label&gt;
  &lt;input type="radio" name="RadioGroup1" value="Platinum" id="RadioGroup1_2" onClick="changeplanprice();" class="RadioGroup1" /&gt;
  Platinum&lt;/label&gt;
&lt;br&gt;
&lt;label&gt;
  &lt;input type="radio" name="RadioGroup1" value="All-in-one" id="RadioGroup1_3" onClick="changeplanprice();" class="RadioGroup1" /&gt;
  All-in-one&lt;/label&gt;
&lt;br&gt;
&lt;span class="radioRequiredMsg"&gt;Please make a selection.&lt;span class="hint-pointer"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;
&lt;/dd&gt;
&lt;/div&gt;

&lt;!--Plan Duration--&gt;

&lt;div id="spryradio2"&gt;
&lt;dt&gt;Plan Duration: &lt;span class="required"&gt;*&lt;/span&gt;&lt;/dt&gt;
&lt;dd&gt;
&lt;label&gt;
  &lt;input type="radio" name="RadioGroup2" value="Yearly" id="RadioGroup2_0" onClick="changeplanprice();" class="RadioGroup2" /&gt;
  Yearly&lt;/label&gt;
&lt;br&gt;
&lt;label&gt;
  &lt;input type="radio" name="RadioGroup2" value="Quaterly" id="RadioGroup2_1" onClick="changeplanprice();" class="RadioGroup2" /&gt;
  Quaterly&lt;/label&gt;
&lt;br&gt;
&lt;label&gt;
  &lt;input type="radio" name="RadioGroup2" value="Monthly" id="RadioGroup2_2" onClick="changeplanprice();" class="RadioGroup2" /&gt;
  Monthly&lt;/label&gt;
&lt;br&gt;
&lt;label&gt;
  &lt;input type="radio" name="RadioGroup2" value="Other" id="RadioGroup2_3" onClick="changeplanprice();" class="RadioGroup2" /&gt;
  Other&lt;/label&gt;
&lt;br&gt;
&lt;span class="radioRequiredMsg"&gt;Please make a selection.&lt;span class="hint-pointer"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;
&lt;/dd&gt;
&lt;/div&gt;

&lt;!--Plan Price--&gt;
&lt;div&gt;

     &lt;script&gt;
     function changeplanprice() {
         var plantype=document.getElementByClassName('RadioGroup1').value;
         var planduration=document.getElementByClassName('RadioGroup2').value;
         if(plantype=="Silver") {
             if(planduration=="Monthly")     {
                 document.getElementById('Price').value='£ 39.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Quaterly")  {
                 document.getElementById('Price').value='£ 79.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Yearly")    {
                 document.getElementById('Price').value='£ 124.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Other")     {
                 document.getElementById('Price').value='';
                 document.getElementById('Price').readOnly=false;
                 }
                 }
             else if(plantype=="Gold")  {
                 if(planduration=="Monthly")    {
                 document.getElementById('Price').value='£ 49.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Quaterly")  {
                 document.getElementById('Price').value='£ 99.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Yearly")    {
                 document.getElementById('Price').value='£ 179.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Other")     {
                 document.getElementById('Price').value='';
                 document.getElementById('Price').readOnly=false;
                 }
                 }
             else if(plantype=="Platinum")  {
                 if(planduration=="Monthly")    {
                 document.getElementById('Price').value='£ 59.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Quaterly")  {
                 document.getElementById('Price').value='£ 199.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Yearly")    {
                 document.getElementById('Price').value='£ 279.98';
                 document.getElementById('Price').readOnly=true;
                 }
             else if(planduration=="Other")     {
                 document.getElementById('Price').value='';
                 document.getElementById('Price').readOnly=false;
                 }
                 } }
        &lt;/script&gt;
</code></pre>

<p></p>

<pre><code>&lt;div&gt;
&lt;dt&gt;&lt;label for="Price"&gt;Plan Price:&lt;/label&gt;&lt;/dt&gt;
&lt;dd class="bg"&gt;&lt;input type="text" name="Price" id="Price" size="80" class="input" readonly="readonly"  /&gt;
&lt;/dd&gt;
&lt;/div&gt;
</code></pre>
