结合单选按钮和文本字段

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

所以你必须添加一个检查，如果另一个是 checked 然后 reason 将是输入的值：

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

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

作为一种快捷方式，您可以使用：

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

在您的上下文中，条件应该像这样注入：

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

Answer 2

发生这种情况是因为您正在检查文本框的状态是否可见。$(".reason:checked").val()。这就是为什么它会放弃，因为它是可见的。

试试：$(‘.reason:textbox’).val()