jQuery Puzzler for Claire!
3 posts by 2 authors in: Forums > CMS Builder
Last Post: February 20, 2015 (RSS)
Hi, Claire -
Can you please help me with this jQuery puzzler?!
I am using this code to disable a submit button until the user adds a #title:
$(document).ready(function(){
$('#title').is(function() {
if(!$.trim(this.value).length) {
$('#saveButton').attr("disabled", "disabled");
}
});
$('#title').keyup(function() {
if ($.trim($(this).text()) !== '') {
$("#saveButton").removeAttr("disabled");
}
}).keyup(function() {
if (!$(this).text().length) {
$('#saveButton').attr("disabled", "disabled");
}
});
});
It seems to work perfectly.
What I'd like to do is to extend this to ensure the user must also add some #content. I've tried all sorts of ways to do it but it just won't work. This what I came up with:
$(document).ready(function(){
$('#title, #content').is(function() {
if(!$.trim(this.value).length) {
$('#saveButton').attr("disabled", "disabled");
}
});
$('#title, #content').keyup(function() {
if ($.trim($('#title').text().length > 0) && $.trim($('#content').text().length > 0)) {
$("#saveButton").removeAttr("disabled");
}
}).keyup(function() {
if ($('#title').text().length == 0 || $('#content').text().length == 0) {
$('#saveButton').attr("disabled", "disabled");
}
});
});
It doesn't work because the button will activate if you add either a #title or the #content. I want the button to remain disabled until the user adds both.
Can you help, please?
:0/
Perch
By claire - February 19, 2015
Hi Perch
You've got two fields, title and content, alright? You want to write a function like so:
function readyCheck() {
var title = $('#title').val();
var content = $('#content').val();
if(title.length > 0 && content.length > 0) {
$("#saveButton").removeAttr("disabled");
}
else {
$('#saveButton').attr("disabled", "disabled");
}
}
Then you bind this function to keyup on both the title and the content, and on $(document).ready() so that it'll fire if the page is refreshed with those fields filled in. The idea is that the only time the save button becomes active is when the string length of both the title and content are greater than zero, otherwise it's disabled.
$(document).ready(function(){
readyCheck();
$('#title').keyup(function() { readyCheck(); });
$('#content').keyup(function() { readyCheck(); });
});
Something like this anyway. If you ever need to have more than one element make the same check, you should stick the check in its own function and call it on the handlers where you need it.
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Claire -
Thank you. This absolutely spot-on! :0)
I realised when implementing your solution that I was making a bit of an error. Both #title and #content are not input fields but contentEditable divs. For that reason I changed the top of your code to this:
var title = $('#title').text(); //not .val()
var content = $('#content').text(); //not .val()
I think this is correct. Either way it works beautifully.
Thanks, again.
:0)
Perch