Submitiser/submitiser.js at master · sab99r/Submitiser · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/*
 * SUBMITISER
 * version: 1.0
 * author: SABEER (sab99r)
 * url: https://github.com/sab99r/submitiser
 */
$.fn.submitise = function(options){

    var defaults = {
        'url':'', /* server submit url */
        'submitOnEnter':true, /* enable input submit on enter key press */
        'submitOnFocusOut':true, /* enable input submit on focus out */
        'successColor':'#00b159', /* input text color when server response status=success */
        'failedColor':'#d11141', /* input text color when server response status=failed */
        'colorTimeOut':2000, /* time to revert the input text color to default */
        onSuccess:function(event,response){}, /* callback on submit success */
    };
    var settings = $.extend({},defaults,options);

    this.each(function(){
        var $this = $(this);

        $this.data('def-value',$this.val());

        if(settings.submitOnFocusOut){
            $this.focusout(function(){
                post(settings,$this);
            });
        }

        if(settings.submitOnEnter){
            $this.on('keypress',function(e){
                if(e.keyCode == 13)
                {
                    post(settings,$this);
                }
            });
        }

    });

}

function post(settings,$this){

    if($this.val().trim()==''){
        return;
    }

    if($this.data('def-value')==$this.val()){
        return;
    }

    var data = {
        id:$this.data('id')
    };
    data[$this.attr('name')] = $this.val();

    $.post(settings.url,data,function(response){
        $this.data('def-value',$this.val());

        //If status response is there set style on input
        if(typeof response.status != 'undefined') {
            var currentColor = $this.css('color');
            if(response.status=='success'){
                $this.css('color',settings.successColor);
                setTimeout(function(){
                    $this.css('color',currentColor);
                },settings.colorTimeOut)
            }else{
                $this.css('color',settings.failedColor);
            }
        }

        if (typeof settings.onSuccess == 'function') {
            settings.onSuccess.call($this,response);
        }
    },'json');
}