Inside javascript need to change value of a hidden input field

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.

user2227904 · Accepted Answer · 2014-08-04 15:39:00Z

1

I saw your error:

You have 2 variables called uploads. One is an instance of the div and the other is the array.

What you are basically doing is assigning it a new type whenever you launch the function and in the end you have no array to pull data from. Try renaming them.

answered Aug 4, 2014 at 15:39

user2227904

6791 gold badge9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dushan Over a year ago

Changed the code like you said.But the problem remains same

user2227904 Over a year ago

Ok try uploading a file and debug the code, can you provide me with the values of the array?

Dushan Over a year ago

Uploads array contains file names after debug. I'm sorry, but I hope you understood my problem here. Its not about uploading. Files do upload correctly. Problem is I can't add all uploaded image names to hidden field.

user2227904 Over a year ago

Yes, don't worry about that, because I am not with you to check everything myself that's why I asked you for this data.

user2227904 Over a year ago

If everything is correct with the array, here are solutions: Check if everything is correct with the hidden field. It is possible that the hidden field is not found. Try finding it by id, this is usually the best way to do it since the id should be unique. Try assigning value through the browser console and alert it's value to see what it holds. I am not sure if you are experienced developer so the best way is alert after you assign the value. BTW why do you do it after the cycle? Try inserting the values during the cycle to save time.

|

Camille Hodoul · Accepted Answer · 2014-08-04 15:27:18Z

0

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

Try something like this :

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

see mdn

answered Aug 4, 2014 at 15:27

Camille Hodoul

3862 silver badges13 bronze badges

Collectives™ on Stack Overflow

Inside javascript need to change value of a hidden input field

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related