Question

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 keyboard, 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!

Answer 1

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('');
        }
    });

}