How return true or false function of data response ajax?

Question

I want return true if data is empty or false if data is not empty.If data is empty continue with form action else stay in current page.

Code is:

<script type="text/javascript">
    function error()
    { 
        var response = false;
        $.ajax({
            url: BASE_URL + 'auth/validateForm',
            type: 'POST',
            data: {
                surname: $("#r-surname").val()
            },
            dataType: "json",
            success: function(data) { 
                if(data.surname)
                { 
                    $('#error_surname').html(data.surname);
                    response = false;
                }else{
                    $('#error_surname').html('');
                    response = true;
                }

            },
            error: function(data) { 
                        return false;
            }
        });
        alert(response);
            return response;
    }

</script>

<form action="{$BASE_URL}contul-meu" method="post" name="registration" onsubmit="return error()">
                        <table>                              
                            <tr>
                                <td>
                                    <label for="r-surname">Prenume*</label>
                                </td>
                                <td>
                                    <input type="text" class="text" id="r-surname" name="surname"  value="{$user['surname']}"/>
                                </td>
                                <td><small id="error_surname" class="err"></small></td>
                            </tr>
                        </table>
 </form>

php:

public function validateForm()
{
    $surname = $this->input->post('surname');
    $data = array();
    if(strip_tags($surname) == '')
    {
        $data['surname'] = 'Prenumele este invalid!';
    }

    echo json_encode($data);
}

var response is only false.How make response true if no error?

score 2 · Answer 1 · answered Oct 13 '13 at 12:51

You can't return the result of a nested ajax function. The javascript will execute and keep going - however the delay in making the request will happen after the function returns.

The best thing is to chain your events. Just create another function which accepts the true or false value, and wrap your logic in there.

<script type="text/javascript">
function error()
{ 
    var response = false;
    $.ajax({
        url: BASE_URL + 'auth/validateForm',
        type: 'POST',
        data: {
            surname: $("#r-surname").val()
        },
        dataType: "json",
        success: function(data) { 
            if(data.surname)
            { 
                $('#error_surname').html(data.surname);

                response = false;
                doSomethingBasedOnResponse(false);
            }else{
                $('#error_surname').html('');
                response = true;
                doSomethingBasedOnResponse(true);
            }

        },
        error: function(data) { 
                    return false;
            doSomethingBasedOnResponse(false);
        }
    });

}

function doSomethingBasedOnResponse(value){
    if(value){
        alert('yes');
    }else{
        alert('no');
    }
}

</script>

score 0 · Answer 2 · answered Oct 13 '13 at 12:41

Add an ID to your form

<form id="registration"..

$("#registration").submit(function(e){
    $.ajax({
        url: BASE_URL + 'auth/validateForm',
        type: 'POST',
        data: {
            surname: $("#r-surname").val()
        },
        dataType: "json",
        success: function(data) { 
            if(data.surname)
            { 
                $('#error_surname').html(data.surname);
                //prevent form submission
                e.preventDefault();
            }else{
                $('#error_surname').html('');
                //no errors, it will continue with form submission
            }
        },
        error: function(data) { 
                    e.preventDefault();
        }
    });
});

While binding event handlers with JS instead of HTML is good practice, this won't help solve the problem at all. — Quentin, Oct 13 '13 at 12:50

score -1 · Answer 3 · answered Oct 13 '13 at 12:41

Actually check if the return is empty or null.

success: function(data) { 
                if((data != null || data != "") && data.hasOwnProperty("surname"))
                { 
                    $('#error_surname').html(data.surname);
                    response = false;
                }else{
                    $('#error_surname').html('');
                    response = true;
                }

How return true or false function of data response ajax?

3 Answers3

Linked