javascript - 组合单选按钮和文本字段

Question

我有四个单选按钮，最后一个是“其他”选项。单击此单选按钮会显示一个隐藏的文本字段，以便用户可以进一步解释。这是根据用户选择的选项创建电子邮件的更大表单的一部分。基本上，需要组合四个单选按钮/其他字段，以便用户对该部分的回答显示在电子邮件中，无论他们选择单选按钮还是输入自己的回复。这是我的 HTML:

<h1>Reason</h1>
  <input type="radio" name="reason" class="reason" value="Customer requesting escalation" onclick="document.getElementById('hiddenOtherField').style.display='none'" checked>Customer requesting escalation<br>
  <input type="radio" name="reason" class="reason" value="Workaround lost" onclick="document.getElementById('hiddenOtherField').style.display='none'">Workaround lost<br>
  <input type="radio" name="reason" class="reason" value="Resolution overdue" onclick="document.getElementById('hiddenOtherField').style.display='none'">Resolution overdue<br>
  <input type="radio" name="reason" class="reason" id="otherRadioBtn" onclick="document.getElementById('hiddenOtherField').style.display='block'">Other...<br>
  <div id="hiddenOtherField" style="display: none">
    <input type="text" name="reason" id="otherFreeTextField" placeholder="Please explain...">
  </div><br>

我正在从 jQuery 获取这个“原因”部分的选定值:

$(".reason:checked").val()

但是当选中“其他”时，$(."reason") 的值是“on”，而不是他们键入的任何值。我不知道“开”这个词为什么、如何或从哪里来(我的代码中没有)。我知道我错过了什么，但我不知道是什么。如果用户选择“其他”单选按钮，我将如何做到这一点，无论他们在文本字段中键入什么，都会成为“原因”的值？我尝试了很多不同的 if 语句，但已经好几个小时了，没有任何效果。请帮忙!谢谢!

编辑 - 这是我用来显示我的值的 Javascript 代码。同样，这都是一个自定义 HTML 表单，用于根据用户选择的选项创建电子邮件。我在这里得到的所有其他东西都在起作用，因为它们很简单。

function generateEmail() {
  var emailTo = $("#teamName").val();
  var emailCC = $("#CC").val();
  var emailSubject = $("#ticketNumber").val();
  var emailBody = "Issue: " + $("#issue").val() + "%0A%0ACustomer Contact Information: " + $("#contactInformation").val() + "%0A%0ARequested Action: " + $(".requestedAction:checked").val() + "%0A%0AReason: " + $(".reason:checked").val() + "%0A%0AWorkaround Available? " + $(".workaround:checked").val();
  location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
};

我使用表单末尾的按钮生成电子邮件:

<input type="submit" value="Generate email" onclick="generateEmail()">

Answer 1

如果你想获取用户输入的输入值，你需要使用:

$("#otherFreeTextField").val()

所以你必须添加一个检查，如果另一个被检查那么原因将是输入的值:

var reason = $(".reason:checked").val();

if( $('#otherRadioBtn').is(':checked') ) {
    reason = $("#otherFreeTextField").val();
}

作为快捷方式，您可以使用:

$('#otherRadioBtn').is(':checked')?$("#otherFreeTextField").val():$(".reason:checked").val();

在你的上下文中，条件应该像这样注入(inject):

function generateEmail() {
    var emailTo = $("#teamName").val();
    var emailCC = $("#CC").val();
    var emailSubject = $("#ticketNumber").val();
    var reason = $('#otherRadioBtn').is(':checked')?$("#otherFreeTextField").val():$(".reason:checked").val();

    var emailBody = "Issue: " + $("#issue").val() + "%0A%0ACustomer Contact Information: " + $("#contactInformation").val() + "%0A%0ARequested Action: " + $(".requestedAction:checked").val() + "%0A%0AReason: " + reason + "%0A%0AWorkaround Available? " + $(".workaround:checked").val();
    location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
};