Radio button with an "other" text box not inputting value properly using javascript

I'm creating a form using html form controls and javascript to help streamline some processes at work. I've temporarily put the form online here.

In one section of the form, I have a text box associated with a radio button. The other radio buttons in the section display their values properly when the "Display" button is hit at the bottom of the page, but the radio button with the text box does not. It seems that I'm not correctly assigning the value of the text box to the value of the radio button. What am I doing wrong?

Here's the javascript:

<script LANGUAGE="JavaScript" type="text/javascript">

function display() {
  for (var i=0; i < document.form2.paymenttype.length; i++)
   {
   if (document.form2.paymenttype[i].checked)
      {
      var radio_paymenttype_val = document.form2.paymenttype[i].value;
      }
   }

  for (var i=0; i < document.form2.contracts.length; i++)
   {
   if (document.form2.contracts[i].checked)
      {
      var radio_contracts_val = document.form2.contracts[i].value;
      }
   }

  DispWin = window.open('','NewWin', 'toolbar=no,status=no,scrollbars=yes,width=800,height=600')

  message = "<h2>Royalty Advance Payment Letter</h2>";
  message开发者_Python百科 += "<hr />";
  message += "<span STYLE=\'font-family: Garamond\'>";
  message += "<p>" + document.form2.agentfirstname.value + "&nbsp;" + document.form2.agentlastname.value + "<br />";
  message += document.form2.agencyname.value + "<br />";
  message += document.form2.agentaddress1.value + "<br />";
  message += document.form2.agentaddress2.value + "<br />";
  message += document.form2.agentcity.value + ",&nbsp;" + document.form2.agentstate.value + "&nbsp;" + document.form2.agentzip.value + "<br />";
  message += document.form2.agentcountry.value + "<br />";
  message += "</p>";
  message += "<p>Dear&nbsp;" + document.form2.agentfirstname.value + ",</p>";
  message += "<p>Please find enclosed a check in the amount of&nbsp;$";
  message += document.form2.paymentamount.value + "&nbsp;representing the amount due upon&nbsp;";
  message += radio_paymenttype_val + "&nbsp;";
  message += document.form2.authorfirstname.value + "&nbsp;";
  message += document.form2.authorlastname.value + "'s&nbsp;<em>";
  message += document.form2.booktitle.value + "</em>.";
  message += radio_contracts_val + "</p>";
  message += "<p>Regards,<br /><br /><br /><br />My Name<br />Associate Editor</p>";
  message += "</span>";

  DispWin.document.write(message);
}
</script>

And here's the HTML for that section:

  <div class="required">
    <fieldset>

    <legend>Payment Type:</legend>
      <label for="payment_sig" class="labelRadio"><input type="radio" name="paymenttype" id="payment_sig" class="inputRadio" value="signature for" /> Signature</label>
      <label for="payment_danda" class="labelRadio"><input type="radio" name="paymenttype" id="payment_danda" class="inputRadio" value="delivery and acceptance of" /> Delivery & Acceptance</label>
      <label for="payment_pub" class="labelRadio"><input type="radio" name="paymenttype" id="payment_pub" class="inputRadio" value="publication of" /> Publication</label>
      <label for="payment_pbpub" class="labelRadio"><input type="radio" name="paymenttype" id="payment_pbpub" class="inputRadio" value="paperback publication of" /> Paperback Publication</label>

      <label for="payment_otherlabel" class="labelRadio"><input type="radio" name="paymenttype" id="payment_otherlabel" class="inputRadio" onclick="this.form.payment_other.focus()" onfocus="this.form.payment_other.focus()" value="" checked="checked"  /> Other:</label>
      <input type="text" name="payment_other" id="payment_other" class="inputText" value="" />
      <small>Remember, this text will be in the middle of a sentence. This text should always end in "of" or "for."</small>
    </fieldset>
  </div>

---

Your first for loop goes through and finds the value of the correct radio selected, but in the case of "other" you're not going to have a value assigned. You need to determine when other is selected, then assign radio_paymenttype_val the value of the text box instead. Something to the effect of:

for (var i=0; i < document.form2.paymenttype.length; i++)
{
  if (document.form2.paymenttype[i].checked)
  {
    // assuming "other" is the only case where this radio's value property would be empty.
    var radio_paymenttype_val = (document.form2.paymenttype[i].value != ''
                              ? document.form2.paymenttype[i].value
                              : document.form2.payment_other.value);
  }

}

---

Update

So excuse the delay (took your form field and ran with it). This is (I believe) what you're looking for. Some things to note:

• I don't do any form validation. This is something you probably want to tinker with, and can be pretty simple. In the .click() event, just check something like the following (or you can get more elaborate):

  if($('#agentfirstname').val()==''){
      alert('Missing First Name');
      return;
  }

• Also, I use something fairly new to jQuery, templates. This makes it easier than var+='html html'+var+'html'; (as you can witness in the <script> tag with the ID 'FormTemplate`).
• Finally, I tested this on FF4, Chrome4 and IE8 and it should work, but let me know if it doesn't on whatever environment you use.

Anyways, here's the code, hope this helps!

Place inside <head> element of your document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<Script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
  $(function(){
    // bind to the "display" button ('.' means this is a class name reference)
    $('.inputSubmit').click(function(e){
      // build up the template values
      var tmplData = [{
        agentFirstName: $('#agentfirstname').val(),
        agentLastName: $('#agentlastname').val(),

        agencyName: $('#agencyname').val(),
        agentAddr1: $('#agentaddress1').val(),
        agentAddr2: $('#agentaddress2').val(),
        agentCity: $('#agentcity').val(),
        agentState: $('#agentstate').val(),
        agentZip: $('#agentzip').val(),

        paymentAmount: '$'+$('#paymentamount').val(),
        paymentType: $('input[name="paymenttype"]:checked').val() != '' ? $('input[name="paymenttype"]:checked').val() : $('#payment_other').val(),

        authorFirstName: $('#authorfirstname').val(),
        authorLastName: $('#authorlastname').val(),
        bookTitle: $('#booktitle').val(),
        contracts: $('input[name="contracts"]:checked').val()
      }];

      // create the template
      var template = $('#FormTemplate').template('letter');

      // Create a fake div we can push the template to and pass off to popup
      var tmplDiv = document.createElement('div');
      $(tmplDiv).attr('id','TemplateDiv').css('display','none');

      // Write the template and push it off
      $.tmpl('letter', tmplData).appendTo(tmplDiv);

      // create the window and populate it with the template
      var hWindow = window.open('','NewWin', 'toolbar=no,status=no,scrollbars=yes,width=800,height=600');
      hWindow.document.write(tmplDiv.innerHTML);

      // stop any further action
      e.preventDefault();
    });
  });
</script>

Place inside <body> element of your document:

<script id="FormTemplate" type="text/x-jquery-tmpl">
  <html>
    <head>
      <title>Letter</title>
    </head>
    <body>
      <h2>Royalty Advance Payment Letter</h2>
      <hr />
      <span type="font-family:Garamond;">
        <p>
          ${agentFirstName} ${agentLastName}<br />
          ${agencyName}<br />
          ${agentAddr1}<br />
          ${agentAddr2}<br />
          ${agentCity}, ${agentState} ${agentZip}<br />
        </p>
        <p>
          Dear ${agentFirstName},
        </p>
        <p>
          Please find enclosed a check in the amount of ${paymentAmount} representing the amount due upon ${paymentType}
          ${authorFirstName} ${authorLastName}'s <em>${bookTitle}</em>.
          ${contracts}
        </p>
        <p>
          Regards,<br />
          <br />
          <br />
          <br />
          Margaret Maloney<br />
          Associate Editor
        </p>
      </span>
    </body>
  </html>
</script>

---

Could you simply set a onblur() for the payment_other to set the radio option's value?

<input type="text" name="payment_other" id="payment_other" class="inputText" value="" onblur="document.getElementById('payment_otherlabel').value=this.value;" />

Then if it is ever set, it will automatically copy the value into the radio option. Then when your Display() function is called, I would think the value would be set.

(Realized I missed the semi-colon at the end of the onblur="" statement.)
Have you tried this yet?