Run jQuery AJAX when hitting 'enter / return'

I have a simple form for users to post on a 'wall'. As you can see it has one text input field and a submit button that is made of multiple spans styled via CSS.

<form action="http://example.com/2/chat_share" method="post" id="chat_form">                    
<input type="text" name="chat_msg" value="" />                  
</form>

<span class="share_js fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
    <span class="fc-button-inner">
        <span class="fc-button-content save_button">Share</span>
        <span class="fc-button-effect">
            <span></span>
        </span>
    </span>
</span>

This works nicely when the user clicks on the 'Share' button, which runs the AJAX below:

$(document).ready(function() {

    $('.share_js').click(function(event){
        event.preventDefault();

        var link = $('#chat_form').attr('action');

        $.ajax({
            url: link,
            type: "POST",
            data: $('#chat_form').serialize(),
            dataType: "html",
            beforeSend: function(){
                  $('#loading').show();
                },          
            success: function() {
                $('#chat_thread').load(2 + '/chat_ajax');
                $('#loading').hide();
                $('#chat_form input').val('');
            }
        });
    });

});

My problem is that when I hit 'return' or 'enter' on the keyboa开发者_JAVA技巧rd, the form is submitted via the non-AJAX method.

I wanted to capture this keystroke using

$('#selector').keydown(function (e){
    if(e.keyCode == 13){
        //code
    }
})

but haven't been able to wrap this around my AJAX function.

Ideally both clicking on Share and hitting return should submit the form.

Anyone have suggestions how to do this?

Thanks for helping!

---

why not using the form post?

<form action="http://example.com/2/chat_share" method="post" id="chat_form">                    
<input type="text" name="chat_msg" value="" />                  

<span class="share_js fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
    <span class="fc-button-inner">
        <span class="fc-button-content save_button">Share</span>
        <span class="fc-button-effect">
            <span></span>
        </span>
    </span>
</span>
</form>

and then hook up the form POST

$('#chat_form').bind('submit', function(event) {

    var link = $(this).attr('action');

    $.ajax({
        url: link,
        type: "POST",
        data: $(this).serialize(),
        dataType: "html",
        beforeSend: function(){
              $('#loading').show();
            },          
        success: function() {
            $('#chat_thread').load(2 + '/chat_ajax');
            $('#loading').hide();
            $('#chat_form input').val('');
        }
    });

    return false; // dont post it automatically
});

---

from comments

$('.save_button').bind('click', function(event) {
    getStuff();
    return false; // dont move to top
});
$('#chat_form').bind('submit', function(event) {
    getStuff();
    return false; // dont post it automatically
});

function getStuff() {

    var link = $('#chat_form').attr('action');

    $.ajax({
        url: link,
        type: "POST",
        data: $('#chat_form').serialize(),
        dataType: "html",
        beforeSend: function(){
              $('#loading').show();
            },          
        success: function() {
            $('#chat_thread').load(2 + '/chat_ajax');
            $('#loading').hide();
            $('#chat_form input').val('');
        }
    });

}

---

You can capture the form submit event:

$('#chat_form').submit(function(){
    //do stuff
    return false;//prevent default submission.
});

---

Change your click event to a form submit event:

$(document).ready(function() {

$('#chat_form').submit(function(event){
    event.preventDefault();

    var link = $('#chat_form').attr('action');

    $.ajax({
        url: link,
        type: "POST",
        data: $('#chat_form').serialize(),
        dataType: "html",
        beforeSend: function(){
              $('#loading').show();
            },          
        success: function() {
            $('#chat_thread').load(2 + '/chat_ajax');
            $('#loading').hide();
            $('#chat_form input').val('');
        }
    });
});

});

For the keydown, you could do this:

$('#selector').keydown(function (e){
    if(e.keyCode == 13){
e.preventDefault();
$('#chat_form').trigger('submit');
        //code
    }
})

---

The solution to this was to use 2 separate methods for each situation: one for clicking on Share and one for hitting the enter / return keys.

This code works for me, but please let me know if you think this represents unnecessary bloat or lines -- otherwise I'll later mark this as the final answer.

Thanks to all for helping.

$(document).ready(function() {


//this  will run AJAX when clicking on 'Share'


    $('.share_js').click(function(event){
        event.preventDefault();

        var link = $('#chat_form').attr('action');

        $.ajax({
            url: link,
            type: "POST",
            data: $('#chat_form').serialize(),
            dataType: "html",
            beforeSend: function(){
                  $('#loading').show();
                },          
            success: function() {
                $('#chat_thread').load(<?php echo $id; ?> + '/chat_ajax');
                $('#loading').hide();
                $('#chat_form input').val('');
            }
        });
    });

//this  will run AJAX when hitting return / enter

    $('#chat_form input').keydown(function (e){
        if(e.keyCode == 13){
    e.preventDefault();

        var link = $('#chat_form').attr('action');

            $.ajax({
                url: link,
                type: "POST",
                data: $('#chat_form').serialize(),
                dataType: "html",
                beforeSend: function(){
                      $('#loading').show();
                    },          
                success: function() {
                    $('#chat_thread').load(<?php echo $id; ?> + '/chat_ajax');
                    $('#loading').hide();
                    $('#chat_form input').val('');
                }
            });
        }
    });

});