Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a really basic task of passing a selected value from a SELECT form element, but it is only passing the first option of the select statement, not the actual selected option.

Here is the FORM SELECT section:

    <p>Grade Level:
        <select id="gradeLevel">
            <option value="">Please select...</option>
            <option value="primary">Primary</option>
            <option value="levelk">Level K</option>
            <option value="level1">Level 1</option>
            <option value="level2">Level 2</option>
            <option value="level3">Level 3</option>
            <option value="level4">Level 4</option>
            <option value="level5">Level 5</option>
            <option value="level6">Level 6</option>
            <option value="level7">Level 7</option>
            <option value="level8">Level 8</option>
        </select>
    <p>Test:
        <select id="dropTest">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
And here is the function passing the values in the formData section.  As you can see I tried two variations of passing the value:
<script type="text/javascript">
    <?php $timestamp = time();?>
    $(function() {
        $('#file_upload').uploadifive({
            'auto'             : true,
            'checkScript'      : 'check-exists.php',
            'formData'         : {
                                   'timestamp' : '<?php echo $timestamp;?>',
                                   'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                                   'first'     : $("#firstName").val(),
                                   'last'      : $("#lastName").val(),
                                   'level'     : $("#gradeLevel").val(),
                                   'drop'      : $("#dropTest option:selected").val()
            'queueID'          : 'queue',
            'uploadScript'     : 'uploadifive.php',
            'onUploadComplete' : function(file, data) { console.log(data) }
</script>
Here is my console dump, where you can see both SELECT values are the first option, not the selected:
 /Smith_John/1array(7) {
 ["timestamp"]=>
 string(10) "1418341524"
 ["token"]=>
 string(32) "1d8a1c4e5db6c89dba913c0c620231ce"
 ["first"]=>
 string(4) "John"
 ["last"]=>
 string(5) "Smith"
 ["level"]=>
 string(0) ""
 ["drop"]=>
 string(1) "1"
 ["filename"]=>
 string(9) "tr205.pdf"
Now the interesting part... if I type in either of the JQuery commands $("#gradeLevel").val() or $("#dropTest option:selected").val() into the Console it pulls the correct selected values.
I am completely lost... somehow the correct values are being pulled, but the parameter passed is not?
                Is there a specific event that this is supposed to happen on? i.e. button click or select item change?
– Master Yoda
                Dec 11, 2014 at 23:59
                No, the user inputs their information in the form, then they select files to upload...  the upload triggers the event.  I just need all the form data as soon as they upload to create the directory structure for the uploaded files.
– PaulC
                Dec 12, 2014 at 18:06
                Here is a screen recording I made so you can see the actual process, and what I run into:  youtube.com/watch?v=mRZ4G3roxfM
– PaulC
                Dec 12, 2014 at 18:34
The problem is that values of $("#gradeLevel").val() and $("#dropTest option:selected").val() are resolved at the moment of this script execution and thus they are always set to first (default) elements. Changing another items doesn't affect them because they are already set.
According to this doc, you should do it like this:
$(function() {
    $('#file_upload').uploadifive({
        'auto'             : true,
        'checkScript'      : 'check-exists.php',
        'onUploadStart'    : function(file) {
            // set formData here.
            $('#file_upload').uploadifive('settings', 'formData', {
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                'first'     : $("#firstName").val(),
                'last'      : $("#lastName").val(),
                'level'     : $("#gradeLevel").val(),
                'drop'      : $("#dropTest option:selected").val()
        'queueID'          : 'queue',
        'uploadScript'     : 'uploadifive.php',
        'onUploadComplete' : function(file, data) { console.log(data) }
Related question: Uploadify: Dynamic FormData does not change
                This might work for the Uploadify set, but not the UploadFive.  The uploadStart event is not an option.  I have tried a variation of this with the onUpload and onUploadFile event, but no luck.  uploadify.com/documentation/#uploadifive
– PaulC
                Dec 12, 2014 at 18:18
You are getting $("#gradeLevel").val() on document ready.. 
In that moment, you have selected first option in both [select], right?
You should get the values after you have chosen the right option..
                I choose different values in the SELECT option, but it only passes the first option value, not the selected.  Using Dev Tools in Chrome, I can type $('#gradeLevel').val() or $('#dropText option:selected).val() and get the selected values, they just don't pass for some reason, just the first option.
– PaulC
                Dec 12, 2014 at 18:20
                I suggest you to add a "Send" button and bind the events when you click it.. otherwise, if someone uploads the picture first, and then try to complete data, they won't be able to complete, or to send the form afterwards.. That should also fix your little problem..
– Joaquín O
                Dec 15, 2014 at 21:18
This first will give you the associated option value that is selected.  The second option will give you the text of the option.
Reference: HERE
        $('#file_upload').uploadifive({
            'auto'             : true,
            'checkScript'      : 'check-exists.php',
            'formData'         : {
                                   'timestamp' : '<?php echo $timestamp;?>',
                                   'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                                   'first'     : $("#firstName").val(),
                                   'last'      : $("#lastName").val(),
                                   'level'     : $("#gradeLevel").val(),
                                   'drop'      : $("#dropTest option:selected").val()
            'queueID'          : 'queue',
            'uploadScript'     : 'uploadifive.php',
            'onUploadComplete' : function(file, data) { console.log(data) }
If you want it to happen when a select option is changed then try this
$("select").on("change", function()
  //Your code here
Basically this will allow the javascript to execute after DOM load. 
                Unfortunately there is no button they click, it auto uploads as soon as they select a file or files.  The will only enter the form information once (student information), so a change on the form won't be feasible for an event change.
– PaulC
                Dec 12, 2014 at 18:22
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.