Add selected option to FormData

I am trying to add a <option>

user selected to an ajax call sent to a php page. (I am not very familiar with ajax or jQuery)

I've built a JSFiddle and hopefully it will be easier to understand than I can explain. Here is its gist:


<select name="internType" style="width: 100%; display: block; color: #000;" id="internType">
    <option selected value="default">Please Select</option>
    <option value="accounting">Accounting</option>
    <option value="auditing">Auditing</option>
    <option value="finance">Finance</option>
    <option value="humanresources">Human Resources</option>



formData = new FormData( $(this)[0] );

sendData : function(formData){
    var self = this;
    var internChoice = $('#internType').val()   // This doesn't seem to hold the value
    formData.append('internChoice', internChoice);  // but rather the entire list
        url: self.settings.path + '?i=' + ,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            outcome = jQuery.parseJSON( data );
        cache: false,
        contentType: false,
        processData: false


When I do var_dump($_POST);

, I get the data that is passed from the inputs, but from the dropdown I get a string containing all the values. For example:

string(130) "
    Please Select
    Human Resources


What am I doing wrong and how can I best deal with what I am doing wrong?

Am I losing the selected value? The page never refreshes, so I'm not sure how this might be.

I am using jQuery 1.10.2 if you need to know that.


source to share

1 answer

You can try something like this to get the value: instead of: var internChoice = $ ('# internType'). val ()

try: var internChoice = $ ('# internType option: selected'). val ()



All Articles