jQuery Puzzler for Claire!

3 posts by 2 authors in: Forums > CMS Builder
Last Post: February 20, 2015   (RSS)

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/

By Perchpole - February 20, 2015

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