带有“其他”文本框的单选按钮无法使用javascript正确输入值

Question

我正在使用html表单控件和javascript创建表单，以帮助简化工作中的某些流程。 我已经暂时将表格放在这里了 。

在表单的一部分中，我有一个与单选按钮关联的文本框。 当单击页面底部的“显示”按钮时，该部分中的其他单选按钮会正确显示其值，但带有文本框的单选按钮则不会。 看来我没有正确地将文本框的值分配给单选按钮的值。 我究竟做错了什么？

这是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 += "<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>

这是该部分的HTML：

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

Answer 1

您的第一个for循环将遍历并查找所选正确无线电的值，但是在“其他”情况下，您将不会分配值。 您需要确定何时选择其他，然后为radio_paymenttype_val分配文本框的值。 效果：

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);
  }

}

---

更新资料

因此，请原谅延迟（使用表单字段并运行它）。 （我相信）这就是您要寻找的。 注意事项：

• 我不进行任何形式验证。 这可能是您想修改的东西，并且可能非常简单。 在.click()事件中，只需检查类似以下内容的内容（否则您就可以进行更详细的介绍）：

  if（$（'＃agentfirstname'）。val（）==''）{
  alert（'Missing First Name'）;
  返回;
  }

• 另外，我对jQuery使用了相当新的东西template 。 这比var+='html html'+var+'html';更加容易var+='html html'+var+'html'; （您可以在<script>标记中看到ID为'FormTemplate`的内容）。
• 最后，我在FF4，Chrome4和IE8上进行了测试，它应该可以工作，但是请告诉我它是否不能在您使用的任何环境下使用。

无论如何，这是代码，希望对您有所帮助！

放置在文档的<head>元素内

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

放置在文档的<body>元素内：

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

Answer 2

您可以简单地为Payment_other设置onblur（）来设置单选选项的值吗？

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

然后，如果已设置，它将自动将值复制到单选选项。 然后，当调用Display（）函数时，我认为将设置该值。

（意识到我错过了onblur =“”语句末尾的分号。）
你有尝试过吗？