组合单选按钮和文本字段

Question

我有四个单选按钮，最后一个是 "other." 的选项单击此单选按钮会显示一个隐藏的文本字段，以便用户可以进一步解释。这是根据用户选择的选项创建电子邮件的更大表单的一部分。基本上，需要组合四个单选 buttons/other 字段，以便用户对该部分的回答显示在电子邮件中，无论他们选择单选按钮还是输入自己的回复。这是我的 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" 部分的选定值

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

，但是当检查"Other"时，$(."reason")的值是"on"而不是它们键入的任何内容。我不知道 "on" 这个词的来源、方式或来源（我的代码中没有）。我知道我错过了什么，但我不知道是什么。如果用户选择 "other" 单选按钮，我将如何做到这一点，无论他们在文本字段中键入什么，都会成为 "reason" 的值？我尝试了很多不同的 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()

组合单选按钮和文本字段

Combining radio buttons and a text field

html

javascript

jquery

textfield

radio-button