Ausführen, jQuery AJAX, wenn man 'enter / return'

Habe ich ein einfaches Formular für die Benutzer zu veröffentlichen, die auf eine "Wand". Wie Sie sehen können hat ein text-Eingabefeld und einem submit-button, das ist aus mehrere Bereiche 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>

Dies funktioniert gut, wenn der Benutzer klickt auf den "Share" - Taste, läuft die AJAX-unten:

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

});

Mein problem ist, dass wenn ich drücken Sie 'return' oder 'enter' auf der Tastatur, wird das Formular gesendet, die über die nicht-AJAX-Methode.

Ich wollte dieses Beispiel mit

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

aber noch nicht in der Lage, wickeln Sie dieses um meine AJAX-Funktion.

Idealerweise beide klicken auf "Freigabe" und return-Taste betätigen, sollte das Formular abschicken.

Jemand Vorschläge, wie dies zu tun?

Danke für die Hilfe!

InformationsquelleAutor pepe | 2011-06-05

warum nicht mit der 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>

und dann Haken Sie die Formular-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
});

Kommentare

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

}

thx @balexandre aber dies verursacht 2 Probleme - [1] meine shar-button wird deaktiviert, und [2], wenn ich drücken Sie enter, es geht immer noch nicht-AJAX-route
dann müssen Sie ein javascript-Fehler irgendwo, das verhindert, dass der submit angeschlossen werden mit der Methode
die Konsole gibt keine Fehler - ich check weiter
gibt es eine Möglichkeit, die Erhaltung der klicken Sie auf "Freigabe" für die reichen auch? da dies nicht ein <button> es inaktiv durch entfernen der click Funktion
aktualisiert, so können Sie sowohl
danke @balexandre, viel besser mit einer einzigen Funktion
danke für deine Erklärung.

InformationsquelleAutor balexandre

Können Sie erfassen die form submit-Ereignis:

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

InformationsquelleAutor Paul Creasey

Ändern Sie Ihre click event zu einer form submit Veranstaltung:

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

});

Für die keydown, Sie könnten dies tun:

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

ähnlich wie @balexandre Beispiel, ich bekomme zwar keinen Fehler, dies nicht erlauben, die option für das klicken auf Share und drücken Sie enter

InformationsquelleAutor Niklas

Die Lösung HIERFÜR war der Einsatz von 2 separaten Methoden für jede situation: ein für das klicken auf Share und einer für das schlagen der enter /return-Tasten.

Dieser code funktioniert für mich, aber bitte lassen Sie mich wissen, wenn Sie denken, dies stellt eine unnötige aufblasen oder-Linien-ansonsten werde ich später markieren Sie diese als die endgültige Antwort.

Danke an alle für die Hilfe.

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

});

InformationsquelleAutor pepe

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.