-1

I have a problem with a code that works when I only use conditions for years, but when I add conditions for type, name and place the function does not produce the expected result (change the button status to disabled = false).

I use a document event listener to check for user actions:

document.addEventListener("blur", enableSaveButton());

I have the following code to check for conditions on when to set a button's disabled value to false:

function enableSaveButton() {
startyear = document.getElementById('start_year');
endyear = document.getElementById('end_year');
type = document.getElementById('type');
place = document.getElementById('place');
name = document.getElementById('name');
if (!(startyear.className === "form-group has-success")) { return; }; // works
if (!(endyear.className === "form-group has-success")) { return; }; // works
if (!(type.className === "form-group has-success")) { return; };// does not work
if (!(place.className === "form-group has-success")) { return; };// does not work
if (!(name.className === "form-group has-success")) { return; }; // does not work
document.getElementById("savebutton").disabled = false; } // this code works

startyear and endyear both use the same function, validateYear(year, id) (when field onblur) for setting form group status to either "form-group has-success" or "form-group has-error".

type, name and place use another function, faultyChars(stringen, id) for producing the same result.

The both work according to purpose (even though the code may not be state-of-the-art...) =)

If I only use startyear and endyear in the enableSaveButton() function it works perfectly. But if I add the type, place and name the error kicks in, even though it contains virtually the same code. Any ideas on this? All and any help is appreciated!

Here are the functions I mentioned:

function validateYear(year, id){
console.log("Inne i validateYear");
var x = document.getElementById(id);
if (year === "") {  x.className="form-group has-error"; return false; }
if (isNaN(year)) {  x.className="form-group has-error"; return false; }
if (year.length !== 4) {  x.className="form-group has-error"; return false; }
if ((year.substr(0,2) !== "19") && (year.substr(0,2) !== "20")) { x.className="form-group has-error"; return false; }
else { 
    x.className="form-group has-success";
    enableSaveButton(year);
    return true; }

}

function enableSaveButton() {
startyear = document.getElementById('start_year');
endyear = document.getElementById('end_year');
type = document.getElementById('type');
place = document.getElementById('place');
name = document.getElementById('name');
if (!(startyear.className === "form-group has-success")) { return; };works
if (!(endyear.className === "form-group has-success")) { return; }; // works
if (!(type.className === "form-group has-success")) { return; };// does not work
if (!(place.className === "form-group has-success")) { return; };// does not work
if (!(name.className === "form-group has-success")) { return; }; // does not work
document.getElementById("savebutton").disabled = false; // this code works

}

Quoalquo
  • 11
  • 3
  • What isn't working? What are the errors? – Matheno Feb 13 '15 at 11:02
  • Try changing the names of your variable. `name`/ `place`/ `type` – NewToJS Feb 13 '15 at 11:02
  • _“and the function 'crashes'”_ – since you set “crashes” in quotes yourself already, you seem to be aware that this is not the most precise of problem descriptions … so please edit your question and include a proper one that actually gives us some useful information. – CBroe Feb 13 '15 at 11:39
  • I have now updated the question somewhat. What I really don't understand is that the code works when I use 'startyear' and 'endyear' but not for 'type', 'place' and 'name'. I would understand it if is was something else than a div status I was checking (i.e they are of different types and use differen functions to set the 'form-group has-success' status). – Quoalquo Feb 13 '15 at 14:17
  • @NewToJS - what in the variable names would cause an error? – Quoalquo Feb 13 '15 at 14:18
  • It's a suggestion, not an answer hence me posting in the comments and not into the answer form. – NewToJS Feb 13 '15 at 14:21

2 Answers2

0

Without knowing what the error you are seeing is, this is only a guess, but: it's likely that there is no element in the document with an id of type, thus getElementById() is returning null, and trying to reference type.className causes the error. Make sure that 1) you used the name type and not something else, 2) you remembered to add an id="type" attribute to that element, and 3) no other code removes that element from the DOM prior to when enableSaveButton() runs.

radiaph
  • 4,001
  • 1
  • 16
  • 19
0

I found part of the answer. The problem was that you have to go back to one of the year fields and leave it. Then, when the onblur kicks in, the button becomes active.

So the code is functioning allright, the problem is that is it not working as I would expect it to. I have a whole lot of console-logging to do, but the original question is no longer.

Quoalquo
  • 11
  • 3