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”，而不是其键入的内容。我不知道“ 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（）

组合单选按钮和文本字段

2 个答案: