I am new to web development and I'm trying to do this: I have a <select> and I want the value of the selected option to be one of the parameters of a method that is called whenever a button is clicked.

So for example:

<select id="instructorSelector">
   <option value='[email protected]'>Anna Brown</option>
   <option value='[email protected]'>Jane Doe</option>
   ...
</select>

<button onclick="sendEmail(($('#instructorSelector').val()),...,...)" type="button">Send Email</button>

The problem with this is that it doesn't seen to detect when I've actually selected someone. I'm using freemarker templates but a general response as to how I should do this would be helpful too.

Also, how could I make it so the button is not clickable (or even visible) until the user actually selects something from the <select> ?

Thanks in advance! Sorry if this is an overly simple question.

I am new to web development and I'm trying to do this: I have a <select> and I want the value of the selected option to be one of the parameters of a method that is called whenever a button is clicked.

So for example:

<select id="instructorSelector">
   <option value='[email protected]'>Anna Brown</option>
   <option value='[email protected]'>Jane Doe</option>
   ...
</select>

<button onclick="sendEmail(($('#instructorSelector').val()),...,...)" type="button">Send Email</button>

The problem with this is that it doesn't seen to detect when I've actually selected someone. I'm using freemarker templates but a general response as to how I should do this would be helpful too.

Also, how could I make it so the button is not clickable (or even visible) until the user actually selects something from the <select> ?

Thanks in advance! Sorry if this is an overly simple question.

• javascript
• jquery
• html
• freemarker

• 1 Do you have a please select instructor option in your select dropdown? If not, then technically you have the first option selected by default so loading the page and clicking the button will send an email to Anna Brown. – Karl Anderson Commented Jul 22, 2013 at 21:21
• To select an element by id with jQuery, you must prefix the id with #. – Kevin B Commented Jul 22, 2013 at 21:26

6 Answers 6

You don't need to pass anything, what you need is a proper event handler:

<select id="instructorSelector">
   <option value='[email protected]'>Anna Brown</option>
   <option value='[email protected]'>Jane Doe</option>
   ...
</select>

<button id="btn" type="button">Send Email</button>

JS

$(function() {
    $('#btn').hide();

    $('#instructorSelector').on('change', function() {
        $('#btn').show();
    });

    $('#btn').on('click', function() {
        var select_value = $('#instructorSelector').val();

        // use the value here
    });
});

I would solve it like this:

• disable the button in the beginning using the proper disabled-attribute
• toggle this attribute if the value of the box changes, depending on something is selected or not
• store the selectors in variables, so you don't need to re-query them all the time

HTML

<select id="instructorSelector">
    <option value="">Please select</option>
    <option value="[email protected]">Anna Brown</option>
    <option value="[email protected]">Jane Doe</option>
</select>

<button class="send_email" type="button" disabled="disabled">Send E-mail</button>

JavaScript

// example of a selector using a class name
var button = $('button.send_email');
// example of using a selector using the id of an element
var selector = $('#instructorSelector');

selector.change(function () {
    if ('' == selector.val()) {
        button.attr('disabled', 'disabled');
    } else {
        button.removeAttr('disabled');
    }
});

button.click(function(event) {
    sendEmail(selector.val());
    event.preventDefault();
});

Demo

Try before buy

Try to use .chage() from jQuery http://api.jquery./change/ to make button visible

$('#instructorSelector').change(function () {
    $('#id-of-the-button').show();
});

In this chang function you can also capture values of option $(this).val()

I highly remend that you read jQuery Event Basics

You will need to understand how you can use selectors along with events to truly leverage the power of jQuery.

I think after reading about events you will see how click and change will greatly benefits the goals you have for your page.

Simplest Way: http://jsfiddle/rA4VJ/

<select id="instructorSelector">
   <option value='none' selected>Choose Someone</option>
   <option value='[email protected]'>Anna Brown</option>
   <option value='[email protected]'>Jane Doe</option>
</select>

<button id="btn" type="button">Send Email</button>

var btn = document.getElementById("btn");
var elm = document.getElementById("instructorSelector");

elm.onchange = function (e) {
    if (elm.value != 'none') {
        console.log(elm.value);
        btn.removeAttribute('disabled');
    } else {
        btn.setAttribute('disabled', 'disabled');
    }
}

If you are using JavaScript, you can have the property onchange on the select, that can trigger a method that could check the value and make visible the the button. Use an option to indicate that there is no selection, and if that is the one selected, hide the button.

<select id="instructorSelector" onchange="something()">
   <option value='selectone'>Select one</option>
   <option value='[email protected]'>Anna Brown</option>
   <option value='[email protected]'>Jane Doe</option>
   ...
</select>
<button id="button" style="display:none;" onclick="sendEmail(($('instructorSelector').val()),...,...)" type="button">Send     Email</button>


function something(){
if ( $('#instructorSelector').val()!='selectone' ) {
    document.getElementById("button").style.display = 'block';
}
else{
    document.getElementById("button").style.display = 'none';
}
}