CODEWITHSUNDEEP
javascriptjqueryhtmlradio-buttontextfield
brianwantsblood
brianwantsblood

Reputation: 123

Combining radio buttons and a text field

I have four radio buttons, the last being an option for "other." Clicking this radio button reveals a hidden text field so the user can explain further. This is part of a larger form that creates an email based on the options the user chose. Basically, the four radio buttons/other field need to be combined so the user's answer to that section shows up in the email, whether they pick a radio button or type in their own response. Here's my 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>

I'm getting the selected value of this "Reason" section from jQuery:

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

But when "Other" is checked, the value of $(."reason") is "on" instead of whatever they typed. I have no idea why or how or where the word "on" comes from (it's nowhere in my code). I know I'm missing something but I don't know what. How would I make it so if the user selects the "other" radio button, whatever they type into the text field becomes the value for "reason"? I've tried a bunch of different if statements, but it's been hours and nothing is working. Please help! Thanks!

Edit - here is the Javascript code I'm using to display my values. Again, this is all a custom HTML form used to create an email based on the options the user chose. All of the other things here I'm getting the values of are working because they're straightforward.

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

I'm using a button at the end of my form to generate the email:

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

Upvotes: 1

Views: 1187

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

If you want to get the input value that the user typed you need to use :

$("#otherFreeTextField").val()

So you have to add a check if the other is checked then the reason will be the value of the input :

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

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

As a shortcut you could use :

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

In you context the condition should be injected like :

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

Upvotes: 1

Kartikey Kushwah
Kartikey Kushwah

Reputation: 1

This is happening because you are checking the status of textbox if visible or not.$(".reason:checked").val(). That's why it's giving on cause it's visible.

Try: $(‘.reason:textbox’).val()

Upvotes: 0

Related Questions