How can I get the Freeform (free v.) Recipient Name value into a notification template?

Question

My question is very similar to this one:

Getting Recipient Names/email address in Notification

However I need to use a select field rather than checkboxes.

I've tried this but it doesn't work (I used .change instead of .click and :selected instead of :checked):

$(function($){
    var $chosenRecipients   = $('[name="freeform_product"]');
    var $recipientChecks    = $('[name^="the_product"]');

    $recipientChecks.change(function(){
        setTimeout(function(){
            $chosenRecipients.val('');
            var newVal = [];
            $('input[name^="the_product"] option').each(function(){
                if ($(this).is(':selected'))
                {
                    newVal.push($(this).val());
                }
            });
            $chosenRecipients.val(newVal.join(', '));
        },0);
    });
});

The relevant HTML/EE code:

{exp:freeform:form
    collection="Contact Us"
    form:id="contact_us"

    recipients="yes"   
    recipient_template="contact_us_page"

    recipient1="name|[email protected]"  
    recipient2="name|[email protected]"  
    recipient3="name|[email protected]"  
    recipient4="name|[email protected]" 
    recipient5="name|[email protected]"
}

<input type="text" value="" id="freeform_product" name="freeform_product">
<label for="the_product" class="span6">Product<br>
<select name="the_product" id="the_product">
    <option value="">------Select------</option>
    {freeform:recipients}
    <option value="{freeform:recipient_name}">{freeform:recipient_name}</option>
    {/freeform:recipients}
</select>
</label>

Any ideas on what I'm missing?

Thanks!

UPDATE: I've added a fiddle here: http://jsfiddle.net/yL432nvc/

Answer 1

Using your fiddle, use this as your JS :

    var newVal = [];
    $('select[name="the_product"]').change(function(e){
        $('input#freeform_product').val('');
        $('select[name="the_product"] option').each(function(){
            if ($(this).is(':selected')) {
                newVal.push($(this).attr('value'));
            }
        });
        $('input#freeform_product').val(newVal.join(', '));
    });

Very much simplified, you had a scope issue around newVal...

PS> JUST this, no other JS...

Answer 2

Is your JS at issue here or getting the value in the notification template itself?

If it's the JS, you have the each() iteration wrong. you're targetting the <select> element on the each, but what you want is the child <options>.

Try this, replace :

[...]
        $recipientChecks.each(function(){
            if ($(this).is(':selected'))
            {
                newVal.push( $('label[for="' + $(this).attr('id') + '"]').text());
            }
        });
[...]

With :

[...]
        $('input[name^="the_product"] option').each(function(){
            if ($(this).is(':selected'))
            {
                newVal.push($(this).val());
            }
        });
[...]

Edit : I also notice you're getting the id's not the values of the option's, ammended example..

You can also make your hidden input a text input for debugging so you can see if its working without inspection...