Question

I have this jQuery which updates the DB on blur. It works fine except I want the code to show the current DB value after it got updated. There is a value in the database the amount in the field will be added to that and it gets updated. The only way to see that now is to refresh the page each time something gets updated.

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    // JQUERY: Plugin "autoSumbit"
    (function($) {
        $.fn.autoSubmit = function(options) {
            return $.each(this, function() {
                // VARIABLES: Input-specific
                var input = $(this);
                var column = input.attr('name');

                // VARIABLES: Form-specific
                var form = input.parents('form');
                var method = form.attr('method');
                var action = form.attr('action');

                // VARIABLES: Where to update in database
                var where_val = form.find('#where').val();
                var where_col = form.find('#where').attr('name');

                // ONBLUR: Dynamic value send through Ajax
                input.bind('blur', function(event) {
                    // Get latest value
                    var value = input.val();
                    // AJAX: Send values
                    $.ajax({
                        url: action,
                        type: method,
                        data: {
                            val: value,
                            col: column,
                            w_col: where_col,
                            w_val: where_val
                        },
                        cache: false,
                        timeout: 10000,
                        success: function(data) {
                            // Alert if update failed
                            if (data) {
                                document.getElementById("notice").innerHTML="Error, NO UPDATE";
                            }
                            // Load output into a P
                            else {
                                $('#notice').text('Updated');
                                $('#notice').fadeOut().fadeIn();
                            }
                        }
                    });
                    // Prevent normal submission of form
                    return false;
                })
            });
        }
    })(jQuery);
    // JQUERY: Run .autoSubmit() on all INPUT fields within form
    $(function(){
        $('#ajax-form INPUT').autoSubmit();
    });
    </script>

HTML stuff

            <label>Total:</label>
            <input name="company" value="<?php echo $row['total'] ?>" />

        <label>Tax-in:</label>
            <input name="lastname" value="<?php echo $row['taxin'] ?>" />

Answer 1

After your PHP file inserts the row into the database, have it SELECT the new value from the database and echo it back on the AJAX response to jQuery. Then use jQuery to populate that new value wherever you want it to go.