CODEWITHSUNDEEP
javascriptjquery
kejo
kejo

Reputation: 161

How can I get "if true" result from two other functions and use it in a third function?

I have a simple "if true" function where I need to get the result from two other currently working functions. I have been scouring SO and the internet to find nothing that actually works. I made two initial functions. The first one checks the date and the second checks the time. I want this third script to check to see if the other two functions resulted in true and if so, do something. The script is as follows:

$(function() {
  // attempted global variables but this did not work
  //var dateA = $('#startdate').val();
  //var dateB = $('#enddate').val();    
  //var timeA = $('#starttime').val();
  //var timeB = $('#endtime').val();        

  //This function appears to work
  $("#startdate, #enddate").on("change.apple", function() {
    var dateA = $('#startdate').val();
    var dateB = $('#enddate').val();


    if (((dateA).length && (dateB).length) && (dateA == dateB)) {
      alert("Apple");
      return true;
    } else {
      return false;
    }
  });

  //This function appears to work
  $("#starttime, #endtime").on("change.banana", function() {
    var timeA = $('#starttime').val();
    var timeB = $('#endtime').val();


    if (((timeA).length && (timeB).length) && (timeA >= timeB)) {
      alert("Banana");
      return true;
    } else {
      return false;
    }
  });



  //This function does NOT work
  $("#startdate, #enddate, #starttime, #endtime").change(function() {
    if (apple() && banana()) {
      // when its true
      alert("Hello");
    } else {
      // when its false
      alert("Goodbye");
    }
  });
});

<form>
  <fieldset>
    <ul>
      <li>
        <p><input type="text" id="startdate"></p>
      </li>

      <li>
        <p><input type="text" id="starttime" </p>
      </li>

      <li>
        <p><input type="text" id="enddate" </p>
      </li>

      <li>
        <p><input type="text" id="endtime"></p>
      </li>
    </ul>
  </fieldset>
</form>

I cleaned up the code for this question so it can be inspected easily. I have tried using global variables but for some reason I can not get the inner function to view the external variables. I have tried to check for errors in naming and and possible incorrect placement but I can not seem to locate the problem. Can anybody assist me in getting this script to work? I am lost at this point. Thanks

Upvotes: 0

Views: 121

Answers (2)

ayyappa
ayyappa

Reputation: 57

Just for your reference i share this instead of return boolean values send it as string

and change conditions according to your need and pass those string values into the third

condition you want

//Updated the code as per change function if you want to execute the condition based on length then you can get the length value before the if condition no need to complicate it with inside the if conditon

Try the third condition like function.To avoid the unwanted confusion make sure every field is compulsory 

var valid_apple;
    var valid_banana;
    var dateA;
    var dateB;
    var timeA;
    var timeB;
  //This function appears to work
  $("#startdate, #enddate").on("change.apple",function() {
    dateA = $('#startdate').val().length;
    dateB = $('#enddate').val().length;

    if(dateA == dateB){
      alert("Apple");
      valid_apple ="true";
    }else{
      valid_apple ="false";
    }
  });

  //This function appears to work
  $("#starttime, #endtime").on("change.banana", function() {
    timeA = $('#starttime').val().length;
    timeB = $('#endtime').val().length;

    if(timeA!='' && timeB!=''){
    if(timeA >= timeB){
      alert("Banana");
      valid_banana = "true";
      third_fun();
    } else {
      valid_banana = "false";
      third_fun();
    }
  }
});


  function third_fun(){
    if(valid_apple == "true" && valid_banana == "true"){
      //when its true
      alert("Hello");
    }else{
      //when its false
      alert("Goodbye");
    }
  }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
  <fieldset>
    <ul>
      <li>
        <p><input type="text" id="startdate" placeholder="startdate"></p>
      </li>

      <li>
        <p><input type="text" id="starttime" placeholder="starttime"></p>
      </li>

      <li>
        <p><input type="text" id="enddate" placeholder="enddate"> </p>
      </li>

      <li>
        <p><input type="text" id="endtime" placeholder="endtime"></p>
      </li>
    </ul>
  </fieldset>
</form>

Upvotes: 0

Hogan
Hogan

Reputation: 70523

just make the named functions -- like this:

$(function() {
  // attempted global variables but this did not work
  //var dateA = $('#startdate').val();
  //var dateB = $('#enddate').val();    
  //var timeA = $('#starttime').val();
  //var timeB = $('#endtime').val();        

 function apple() {
    var dateA = $('#startdate').val();
    var dateB = $('#enddate').val();


    if (((dateA).length && (dateB).length) && (dateA == dateB)) {
      alert("Apple");
      return true;
    } else {
      return false;
    }
  }

  //This function appears to work
  $("#startdate, #enddate").on("change.apple", apple);

  function banana() {
    var timeA = $('#starttime').val();
    var timeB = $('#endtime').val();


    if (((timeA).length && (timeB).length) && (timeA >= timeB)) {
      alert("Banana");
      return true;
    } else {
      return false;
    }
  }


  //This function appears to work
  $("#starttime, #endtime").on("change.banana", banana );

  //This function does NOT work
  $("#startdate, #enddate, #starttime, #endtime").change(function() {
    if (apple() && banana()) {
      // when its true
      alert("Hello");
    } else {
      // when its false
      alert("Goodbye");
    }
  });
});

There is no magic to using anonymous functions... you can just use named ones instead.

Upvotes: 1

Related Questions