Append selected option to FormData

Mark C.

I am trying to append an <option> selected by the user into an ajax call sent to a php page. (I am not very familiar with ajax or jQuery)

I have built a JSFiddle and hopefully it will be more easily understood than how I can explain it. Here's the gist of it:

HTML

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

jQuery

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

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
    console.log(formData);
    $.ajax({
        url: self.settings.path + '?i=' + self.settings.app ,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            console.log(data);
            outcome = jQuery.parseJSON( data );
            self.handleOutcome(outcome);
        },
        cache: false,
        contentType: false,
        processData: false
    });
},

When I do var_dump($_POST); I receive the data that is passed from the inputs, but from the dropdown I receive a string that contains all of the values. E.g:

["internSelect"]=>
string(130) "
    Please Select
    Accounting
    Auditing
    Finance
    Human Resources
"

What am I doing wrong and how can I better trouble shoot what I am doing wrong?

Am I losing the selected value? The page never refreshes so I am not sure how that could be the case.

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

whoopah

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

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to dynamically append selected option to a div and update if selected option is changed?

From Dev

Append selected to option after form submission with error

From Dev

Unable to append and update option from select selected jquery

From Dev

Append var to FormData

From Dev

Cant append elements to FormData

From Dev

Append data to formData object

From Dev

Checkboxes with FormData.Append

From Dev

Selected option

From Dev

Select option selected an not selected

From Dev

Faking out FormData append with Jasmine

From Dev

FormData append doesn't work

From Dev

Can't append content to FormData()

From Dev

Can't append content to FormData()

From Dev

Append cordova fileEntry objet to formData

From Dev

Using .append() in a loop to add text from an object after a <select> based on the selected option

From Dev

Append div to selected text

From Dev

Append select option with space

From Dev

Append option in multiple select

From Java

'append' called on an object that does not implement interface FormData

From Dev

How to append datetime value to formdata and receive it in controller

From Dev

Javascript/jQuery Append to FormData() returns 'undefined'

From Dev

How to append an image from URL to a FormData - Javascript

From Dev

append formdata using document.getElementById

From Dev

How to append multiple files into formdata using jquery

From Dev

Append Value to $_POST Array with jQuery FormData.append

From Dev

If option selected do something

From Dev

Using setAttribute on a selected option

From Dev

changing value of a selected option

From Dev

Panes and selected css option