Question

i was tasked by my team to build a system that will serve as programmatic prototype for our next project which will be developed using codeigniter and jquery. since i’m a new comer in web programming, it takes quite sometime for me to solve problems. and the following code has plagued me for two days.

$(function() {
var bln_valid = true;

$('#btn_save').click(function() {
    $('.warning-label').html('');


    if ($('#txt_customer_code').val() == '') {
        // did user provide customer code?
        $('#lbl_customer_code').html('Customer Code has to be filled in.');
        bln_valid = false;
    } else {
        // is the code unique?
        $.post('<?php echo base_url()."index.php/customer/is_code_exists" ?>', {
            txt_customer_code   : $('#txt_customer_code').val()
        },
        function(data) {
            if(data.error == undefined) {
                if (data['code_exists'] == 1) {
                    $('#lbl_customer_code').html('Customer Code is not available.');
                    bln_valid = false;
                }
            } else {
                $('#lbl_customer_code').html('Customer Code is not available.');
                bln_valid = false;
            }
        },'json'
        );                      
    }   

    if (bln_valid == false) {
        return false;
    } else {
        // insert the code to database
        $.post('<?php echo base_url()."index.php/customer/add" ?>', {
            txt_customer_code   : $('#txt_customer_code').val(),
        },
        function(data) {
            if(data.error == undefined) {
                $('#lbl_customer_code').html(data['key']);
                if (data['key'] == '') {
                    $('#lbl_customer_code').html('Failed Saving.');
                    return false;
                } else {
                    $('#lbl_customer_code').html('Successfully saving.');
                }
            } else {
                $('#lbl_customer_code').html('Failed Saving.');
                return false;
            }
        },'json');                      
    }                   
});});

so i want to validate the uniqueness of customer code before i insert it to database. but it seems that the validation and insertion code, both using ajax, are executed almost simultaneously. bln_valid still retains its TRUE value when the insertion is started even though the customer code isn’t unique.

1. is there a way to allow the insertion code to run after the validation complete? i have read about jquery’s queue but failed to grasp the concept and apply it to solve my problem.
2. is there a more effective method to achieve the objective of validating and submit data?

i try not to use any plugins because i was told to keep the use of any external works as minimum as possible.

thanks for your help.

Answer 1

Jquery has lot of plugins for ajax submit and validation. Rather than writing your own logic, you can consider using them. I recommend

1. Jquery form plugin – Which submits the form through ajax. Remove the submit, make a button which on click submits the form through ajax.

2. Jquery Validation plugin – which validates everything based on the class. You can even write your own logic using .addValidator method.

Working example here