Disable Upload Until Field Filled
5 posts by 2 authors in: Forums > CMS Builder
Last Post: January 29, 2015 (RSS)
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/
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 claire - January 29, 2015
Hey Perch
The point of checking for the length is that you can disable the button or hide the upload field if there's nothing in the box. The only real measure of checking if the user deletes their text is checking for a string length on the input with a length of zero!
If you can show me the page, I might be able to debug the JS there alone.
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Thanks, Claire.
I know nothing. But for a moment I thought I did!
;o)
Perch