Question

我正在使用html表单控件和javascript创建一个表单，以帮助简化工作中的某些进程。我暂时将表格放在网上here。

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

这是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循环经过并找到所选的正确无线电的值，但在“other”的情况下，你不会分配一个值。您需要确定何时选择其他，然后再为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()事件中，只需检查以下内容（或者您可以更详细地说明）：

如果（$（ '＃agentfirstname'）。VAL（）== ''）{
  警报（'缺少名字'）;
  返回;
  }
另外，我使用了一些相当新的jQuery，templates。这比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;" />

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

（意识到我错过了onblur =“”声明末尾的分号。）
你试过这个吗？

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

2 个答案:

更新