How to submit an Ajax form on focusout()

Question

I have the following form, submitted by AJAX:

HTML

<form class="form-horizontal" id="formEditUsername" action="<?php echo URL; ?>account/editusername_action" method="post">
  <input type="text" class="form-control" name="user_name" id="user_name" placeholder="Add username" value="User ">
  <button type="submit" class="btn btn-default">Save</button>
</form>

AJAX

$("#formEditUsername").submit(function(event){
        //disable default click operation
        event.preventDefault();

        var action_url = $(this).attr("action");
       $(".help-block.username").hide().html("<i class='fa fa-refresh fa-spin'></i> &nbsp;&nbsp;Processing...").fadeIn('slow');
       console.log(action_url);
       var postData = $(this).serializeArray();
        //console.log(postData);

        $.post(action_url,postData,function(data){

            console.log(data);
            var obj = $.parseJSON(data);
            $(".help-block.username").html("Saving...");

            if(obj.status == "error")
            {
            $(".help-block.username").css({color: '#990033'});
            $(".help-block.username").html(obj.message).fadeIn('slow');

            };

            if(obj.status == "success")
            {
                $(".help-block.username").css({color: '#00b25a'});
                $(".help-block.username").html(obj.message).fadeIn('slow');
                $(".namebox").html(obj.username);
            }
        });

    });

I want to add a feature so that the form submits with focusout(), after the input (#user_name) loses focus. Any ideas?

score 7 · Accepted Answer · answered Nov 25 '13 at 17:24

7

$('#user_name').on('focusout', function() {
    $("#formEditUsername").trigger('submit');
});

Read this : http://api.jquery.com/focusout/

answered Nov 25 '13 at 17:24

Rajaprabhu Aravindasamy

66,513
17
101
130

score 4 · Answer 2 · answered Nov 25 '13 at 17:24

4

$('#user_name').on('blur', function() {
    $("#formEditUsername").trigger('submit');
});

answered Nov 25 '13 at 17:24

adeneo

312,895
29
395
388

Thanks, why would I use blur rather than focusout as per Rajaprabhu's answer? – alias51 Nov 25 '13 at 17:26
1

@alias51 http://stackoverflow.com/questions/8973532/blur-vs-focusout-any-real-differences – Dennis Martinez Nov 25 '13 at 17:26
You have an input element, and the correct event for that element is the blur event, while the focusout event is intended to be used where you need bubbling magic added by jQuery. – adeneo Nov 25 '13 at 17:28
1

`$("#formEditUsername").trigger('submit');` will this submit the FORM? Because OP is preventing default behaviour in jquery submit handler so triggering this event won't submit FORM, right?! – A. Wolff Nov 25 '13 at 17:30
@A.Wolff - The title being "How to submit an Ajax form" I assumed the point was to trigger the submit handler, and as such submit the form with ajax, as it would be a PITA if the page reloaded on every blur event ? – adeneo Nov 25 '13 at 17:34
@A.Wolff - no problem, completely valid question, and I'm just assuming, the only one who has the answer is the OP ? – adeneo Nov 25 '13 at 17:36
Correct, the title says it all. Thanks guys. – alias51 Nov 25 '13 at 17:42

A. Wolff · Answer 3 · 2013-11-25T17:34:35.363

3

To submit form, use:

$('#user_name').on('focusout', function() {
    $("#formEditUsername").get(0).submit(); // this fires JS native event, not jquery handler
});

edited Nov 25 '13 at 17:34

answered Nov 25 '13 at 17:28

A. Wolff

74,033
9
94
155

How to submit an Ajax form on focusout()

3 Answers3