CODEWITHSUNDEEP
javascriptjqueryhtmljsp
MGZero
MGZero

Reputation: 5983

Changing a text box value upon selecting a file

I have a form with a file selector on it as well as an alternative input box for entering a link to a file. When uploading, if the url box has a value, it takes precedence over the file selector and uploads that instead. My question is how do I clear out the url box upon selecting a file? This is what the form looks like..

<div id="video-attachment-section" class="attachment-section">
                   <div>
                       <label>URL: </label><form:input path="url" id="video-url" style="width:95%;margin-left:2%;"/>
                   </div>
                   <div>
                       OR
                   </div>
                   <div id="video-attachment-field">
                       <label>Local File: </label>
                       <input      type="file" 
                                   name="attachment"
                                   accept="${lookups.attachmentMimeTypesList}" 
                                   onchange="c.handleFileSelected(this.files)" 
                                   class="attachment-input"
                                   id="video-file" style="display:none;"/>
                       <label class="button button-low-priority" id="btn-select-file" for="video-file" style="margin-left:.5%;">Select File</label>
                       <span id="video-file-error" class="attachment-error"></span>
                       <span id="video-file-name" class="attachment-name">${videoUploadForm.uploadedFileName}</span>
                       <span id="video-file-size" class="attachment-size"></span>
                       <div class="upload-progress"></div>
                       <form:hidden path="uploadedFileName"/>
                   </div>
               </div>

So as you see, I'm using a different button to open the file dialog than whats on the input element (for styling purposes, that other button is hideous..)

This is what I've tried, but had no luck:

init:function(){
       $("#video-file").change = function(e){
           $("#video-url").val("");
       };
    }

Upvotes: 1

Views: 319

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28523

You have to bind change event instead of assigning a function to it, please see below code

init:function(){
   $("#video-file").bind("change",function(e){
       $("#video-url").val("");
   });
}

But as mentioned in comment that bind is deprecated for JQuery1.7 and if you are using 1.7 or beyond then please use below code :

init:function(){
       $("#video-file").change(function(e){
           $("#video-url").val("");
       });
    }

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

change is a method, not a property. Try this:

init:function(){
   $("#video-file").change(function(e){
       $("#video-url").val("");
   });
}

Upvotes: 2

Related Questions