Submit button uses both methods at the same time, instead of one, how can I fix this?

Question

I've got an HTML/jQuery Mobile project and I have a dialogue box with a 'create button'. When the 'create button' is pressed I need it to go back to previous page (however it can't access the previous page because the VisualStudio won't let me redirect to a page not in the same folder as my dialogue?) So two questions really, the first is how can I redirect to previous page through this button click. It works like this, you start off on a page and click new profile to create a new profile, once Create is clicked on the dialogue it needs to go back to the main page with new methods, which brings me to the second question.

The button accesses two methods which are checkNewUser(); and toggle(); checkNewUser is basically validation in the form and toggle is to make some DIVs appear and disappear when redirected back to the original page. My main question is how do I get the submit button to do the checkNewUser method first, and if the credentials entered are valid then do the toggle method and redirect to my main page, I hope this makes sense and I don't get down voted into oblivion :-)

<a href="C:\Users\A569417\Documents\AppsMaintenance\UI\Privileges.html"  önclick="checkNewUser(); toggle();" data-role="button" data-theme="b"
                data-inline="true" data-mini="true" data-icon="check">Create</a>

Here is the checkNewUser method:

function checkNewUser() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;

console.log("Attempted login with " + profileName + " and " + companyCode);

if (checkTextboxesValid()) {
}
else {
    console.log("failed")
}

and the checkTextboxesValid method that it uses:

function checkTextboxesValid() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;

var error_message = "";
// check the fields aren't empty
if (profileName == "") {

    error_message = "You must enter a profile name";
} else {
    $("#profilename").removeClass("ui-body-f").addClass("ui-body-a");
}

if (companyCode == "" || companyCode == "Company") {

    error_message = "You must select a company code";
} else {

}


if (error_message != "") {
    $("#message_table").removeClass("hide_element");
    $("#login_status_message").html(error_message);
    return false;
} else {
    return true;
}

then finally this is the Toggled method that hides the divs. I'm not sure how I can get both methods to be used by the submit button and the toggle method only works if the validation is okay. I'm guessing I'd have to combine the two methods or maybe there's a simpler way?

var toggled = false,
div1 = document.getElementById("OldProfile"),
div2 = document.getElementById("NewProfile"),
div3 = document.getElementById("OldProfileButtons"),
div4 = document.getElementById("NewProfileButtons"),

toggle = function () {
   if( toggled ) {
       div1.style.display = "block";
       div2.style.display = "none";
       div3.style.display = "block";
       div4.style.display = "none";
   } else {
       div1.style.display = "none";
       div2.style.display = "block";
       div3.style.display = "none";
       div4.style.display = "block";
   }
   toggled = !toggled;
  };

tried using the one answer posted but that one didn't work, the div's weren't affected in that method but I can't see why not, anyone help me out?

Answer 1

Since you have tagged jQUery I would consider changing getElementById to $("#.. However (embed your toggle inside your check):

function checkNewUser() {
   var profileName = document.getElementById("profilename").value;
   var companyCode = document.getElementById("companycode").value;

   console.log("Attempted login with " + profileName + " and " + companyCode);

   if (checkTextboxesValid()) {
      var toggled = false,
      div1 = document.getElementById("OldProfile"),
      div2 = document.getElementById("NewProfile"),
      div3 = document.getElementById("OldProfileButtons"),
      div4 = document.getElementById("NewProfileButtons"),

      toggle = function () {
         if( toggled ) {
             div1.style.display = "block";
             div2.style.display = "none";
             div3.style.display = "block";
             div4.style.display = "none";
         } else {
             div1.style.display = "none";
             div2.style.display = "block";
             div3.style.display = "none";
             div4.style.display = "block";
         }
         toggled = !toggled;
        };
   }
   else {
       console.log("failed")
   }

Glad I could help. I think you should use this refactored code instead:

function checkNewUser() {
   var profileName = $("#profilename").value;
   var companyCode = $("#companycode").value;

   console.log("Attempted login with " + profileName + " and " + companyCode);

   if (checkTextboxesValid()) {
      var toggled = false,
      div1 = $("#OldProfile"),
      div2 = $("#NewProfile"),
      div3 = $("#OldProfileButtons"),
      div4 = $("#NewProfileButtons"),

      toggle = function () {
         if( toggled ) {
             $(div1).css('display','block');
             $(div2).css('display','none');
             $(div3).css('display','block');
             $(div4).css('display','none');
         } else {
             $(div1).css('display','none');
             $(div2).css('display','block');
             $(div3).css('display','none');
             $(div4).css('display','block');
         }
         toggled = !toggled;
        };
   }
   else {
       console.log("failed")
   }