0

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|email1@address.com"  
    recipient2="name|email1@address.com"  
    recipient3="name|email1@address.com"  
    recipient4="name|email1@address.com" 
    recipient5="name|email1@address.com"
}

<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/

2

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...

| improve this answer | |
  • Sweet, this totally works for populating the text field from the options... Thank you so much! Unfortunately the other piece of my issue still exists - it's not pulling that value into the notification template... – ByteMyPixel Apr 21 '15 at 18:22
  • No problemo, please mark as the answer though, it helps the site and it's other users (and bumps my rep a bit more, I must have meaningless points!! LOL) – Blatant Apr 21 '15 at 18:23
  • points, POINTS!!! Woot Woot!! hehe, Glad I could help you out mate :) – Blatant Apr 21 '15 at 18:25
0

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...

| improve this answer | |
  • Thanks so much for your help. I tried what you've suggested (I will update my question with the changes), but the text field - freeform_product isn't populating with the value of the selected the_product option... So I guess my issue at this time is in the JS. – ByteMyPixel Apr 21 '15 at 17:11
  • bah, darned <option> tags, you could try $(this).html() instead of $(this).val() to get the innards of each option. You could also drop the setTimeout as thats not helping anything!! – Blatant Apr 21 '15 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.