How can i get my JS to return true or false?

Question

I want to return either TRUE or FALSE when the variable 'f' i FALSE. But the return never reaches the browser and the form does its default action.

How can i get my ELSE to return a value? I have tried to hard code a return value instead of writing 'return myFunction();' this works but it doesn't help me as i need the return from 'myFunction()'.

Don't think to much about what the code is supposed to do, it doesn't make sense, its just for demonstration.

$('#theForm').submit(function()
{

    var f = $('#theInput').val(); // input value

    if(f == TRUE)
    {
        alert('Lorem ipsum');

        return false;
    }
    else // If f is FALSE
    {
        $.post('/php/check.php',{check: f, function(data){myFunction(data);});

        function myFunction(data)
        {

            if(data == 'false')
            {
                // Do something
                return false;
            }
            else
            {
                // Do something
                return true;
            }
        }

        return myFunction();
    }

 });

I have tried this, but it is still not returning a value to the form from 'return myFunction()'

$('#theForm').submit(function()
{

    var f = $('#theInput').val(); // input value

    if(f == true)
    {
        alert('Lorem ipsum');

        return false; // Stop default form action
    }
    else // If f is FALSE
    {

     var request = $.ajax({
        async: false,
        url: "/php/checkArea.php",
        type: "POST",
        data: {data: f},
        dataType: "text"
        });

        request.done(function(data) {
            myFunction(data);
        });

        function myFunction(data)
        {

            if(data == 'false')
            {
                // Do something
                return false; // Stop default form action
            }
            else
            {
                // Do something
                return true; // YES PLEASE, do the default form action
            }
        }

        return myFunction();
    }

 });

---

I finally figured out a solution, with help from you, regarding the async part.

$('#theForm').submit(function()
{

    var f = $('#theInput').val(); // input value

    if(f == true)
    {
        alert('Lorem ipsum');

        return false; // Stop default form action
    }
    else // If f is FALSE
    {

     var request = $.ajax({
        async: false,
        url: "/php/checkArea.php",
        type: "POST",
        data: {data: f},
        dataType: "text"
        });

        request.done(function(data) {
            globalData = data; // Global variable
        });

        function myFunction(globalData)
        {

            if(globalData == 'false')
            {
                // Do something
                return false; // Stop default form action
            }
            else
            {
                // Do something
                return true; // YES PLEASE, do the default form action
            }
        }

        return myFunction(globalData); // Call the function with the global variable
    }

 });

This works perfectly :-)

Answer 1

Create a DIV that will hold your false or true value from the $.ajax

<div id="result"></div>

Now structure your javascript

   $('#theForm').submit( function() {

      var f = $('#theInput').val(); // input value

      if(f == TRUE) {

         alert('Lorem ipsum');
         return false;

      } else { // If f is FALSE

         var rVal = $('div#result');

         $.ajax({
            type : 'POST',
            data : f,
            url : '/php/check.php',
            context: rVal,
            async : false,

            success : function (msg) {
               (msg == 'false') ?  $(this).html('FALSE') : $(this).html(msg);
            }

         });

        function myFunction(data) {

            if(data == 'FALSE'){
               // Do something
               return false;
            } else {
               // Do something
               return true;
            }

        }

       return myFunction( rVal.html() );

      }

Answer 2

Case-sensitivity may be an issue. Javascript uses true and false, not TRUE and FALSE.

In your else clause, you have a callback for your POST which handles the data returned. However, the callback myFunction will be run after the code has reached return myFunction() which — as it doesn't have an argument — will cause the anonymous function to return true.

You need to make your asynchronous call synchronous, but even then, where is myFunction returning its result to?

You might try forcing myFunction to return its result to the right context like the following (I prefer to declare the function before it's used), but you may still run into synchronicity issues. It appears from the docs that $.post cannot be forced to be synchronous.

else // If f is FALSE
{
    function myFunction(data)
    {
        if(data == 'false')
        {
            // Do something
            return false;
        }
        else
        {
            // Do something
            return true;
        }
    }
    return ($.post('/php/check.php',{check: f}, function(data){myFunction(data);}));
}

Answer 3

This part should do what you want:

if(f == TRUE)
{
    alert('Lorem ipsum');

    return false;
}

This, however, should not:

    $.post('/php/check.php',{check: f, function(data){myFunction(data);});

    function myFunction(data)
    {

        if(data == 'false')
        {
            // Do something
            return false;
        }
        else
        {
            // Do something
            return true;
        }
    }

    return myFunction();

The $.post will always return immediately. myFunction will be called when the Ajax call is finished, but by then you have already returned from the .submit block!

You may check out the jQuery.ajax, which have a setting to make it synchronous (set async to false). This may lock the browser from doing anything else while waiting for the Ajax call, but it's the only way to make a synchronous call.