在javascript里面需要更改隐藏输入字段的值

Question

I have tried several things but its not working. Can someone help me to understan the problem with this code. This is a file upload script. I'm using it with codeigniter. My requirement is after user upload files(works right now) those file names should added to the hidden field.

<input type="hidden" name="extra_images" value="" />

<label for="deal_duration">Deal Extra Images</label>
<div id="uploads"></div>
<div class="dropzone" id="dropzone">Drop files here to upload</div>



<script type="text/javascript">
(function(){
    var dropzone = document.getElementById('dropzone');
    var uploads = new Array();
    var hidden = document.getElementsByName('extra_images');

    var displayUploads = function(data){
        var uploads = document.getElementById('uploads'),
                        anchor,
                        x;
        var errors = new Array();
        for(x=0;x<data.length;x=x+1){
            if((typeof(data[x].file) === 'undefined') && (typeof(data[x].error) != 'undefined'))
            {
                errors.push(data[x].error);
            }
            else
            {
                anchor = document.createElement('a');  
                anchor.href = 'http://localhost/project-cg/'+ data[x].file;
                anchor.innerText = data[x].name;
                anchor.target = '_blank';
                uploads.appendChild(anchor);
                uploads.push(data[x].data[x].name);
            }
        }
        if(errors.length > 0){
            alert(errors);   
        }
        if(uploads.length > 0){
            //This is what I tried so far.But its not working
            hidden.value = uploads.join("|");  
        }              
    }

    var upload = function(files){
        var formData = new FormData(),
            xhr = new XMLHttpRequest(),
            x;
        for(x=0;x<files.length;x=x+1){
            formData.append('file[]',files[x]);
        }

        xhr.onload = function(){
            var data = JSON.parse(this.responseText);
            displayUploads(data);    
        }
        xhr.open('post','http://localhost/project-cg/image_upload');   
        xhr.send(formData);
    }

    dropzone.ondrop = function(e){
       e.preventDefault();
       this.className = 'dropzone'; 
       upload(e.dataTransfer.files);               
    }

    dropzone.ondragover = function(){
        this.className = 'dropzone dragover';
        return false;
    }
    dropzone.ondragleave = function(){
        this.className = 'dropzone';
        return false;
    } 
}());
</script>

After I post data hidden field is still empty.

Answer 1

var hidden = document.getElementsByName('extra_images'); // returns a list of nodes

Try something like this :

hidden[0].value = uploads.join("|");  

see mdn