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