Сочетание переключателей и текстового поля

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

Это происходит потому, что вы проверяете состояние текстового поля, если оно отображается или нет. $ (". Причина: проверено "). Val (). Вот почему это дает, потому что это видно.

Попробуйте: $ (reason. Причина: текстовое поле ’). Val ()

Answer 2

Если вы хотите получить введенное пользователем значение, которое вам нужно ввести:

$("#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;
};