Disable Upload Until Field Filled

5 posts by 2 authors in: Forums > CMS Builder
Last Post: January 29, 2015   (RSS)

By Perchpole - January 28, 2015

Hello, All -

I've been working quite a lot with UploadForm3 and there's just one tiny bit of functionality I'm missing.

I want to force users to provide a file "title" before uploading a file. I've tried and failed using "$errorsAndAlerts" code - because none of this stops a user uploading a file.

What I think I need is a way of disabling the upload button until field "info1" has content.

I'm assuming this is a job for jQuery!

:0/

Perch

By claire - January 28, 2015

Hi Perch

Yes, it's a jQuery thing. You'll want to look at the .change handler, like so:

$('input[name=title]').change(function(){
  if(this.length < 1) {
    $('#uploadfile').hide();
  }
  else {
    $('#uploadfile').show();
  }
});

What this should do is show the upload field as long as the length of the string in the title field is greater than zero. You will also have to change 'uploadfile' to whatever ID you're using right now for the upload field.

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By Perchpole - January 29, 2015

Hi, Claire

Thanks for your help with this. It's kept me up most of the night - but I could be close to cracking it!

I tried your code but it didn't quite work as expected. I couldn't get the "else" statement to fire with the .length handler in the code - so I removed it. I ended up with this....

$(document).ready(function(){
  $("input[name=info1]").change(function(){
    if ($("#uploadfile").attr("disabled")) {
      $("#uploadfile").removeAttr("disabled");
    } else {
      $("#uploadfile").attr("disabled", "disabled");
    }
  });
});


I changed the html code of the form so that the submit button is set to disabled as default. The script then works as expected.

However, there is one small caveat. In order to un-disable the submit button the user needs to put some text into "info1" and then click outside the box. This step will cause some confusion. I want to un-disable the button as soon as the any text is added to the box.

I did some searching on the Interweb and came up with this...

$(document).ready(function(){
  $('input[name=info1]').each(function() {
    var elem = $(this);

    // Save current value of element
    elem.data('oldVal', elem.val());


    // Look for changes in the value
    elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
     if (elem.data('oldVal') != elem.val()) {
        // Updated stored value
        elem.data('oldVal', elem.val());


        $("#uploadfile").removeAttr("disabled");
      }
    });
  });
});

With this script, the button becomes enabled as soon as the user starts typing - which is perfect.

There's just one question...

If for some reason the user backspaces and deletes their text, how to I disable the button again?!

I hope you can help.

:0)

Perch

By Perchpole - January 29, 2015

Thanks, Claire.

I know nothing. But for a moment I thought I did!

;o)

Perch