JQuery के साथ 'एन्टर' पर एक फॉर्म सबमिट करना?


427

मेरे पास एक bog- मानक लॉगिन फ़ॉर्म है - एक ईमेल पाठ क्षेत्र, एक पासवर्ड फ़ील्ड और एक AIR प्रोजेक्ट पर एक सबमिट बटन है जो HTML / jQuery का उपयोग कर रहा है। जब मैं फॉर्म पर एंटर करता हूं, तो पूरे फॉर्म की सामग्री गायब हो जाती है, लेकिन फॉर्म सबमिट नहीं किया जाता है। क्या किसी को पता है कि यह एक वेबकिट मुद्दा है (एडोब आकाशवाणी HTML के लिए वेबकिट का उपयोग करता है), या अगर मैंने चीजों को उछाल दिया है?

मैंने कोशिश की:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

लेकिन इसने न तो क्लियरिंग व्यवहार को रोका, न ही फॉर्म जमा किया। फॉर्म से जुड़ी कोई कार्रवाई नहीं है - क्या यह मुद्दा हो सकता है? क्या मैं कार्रवाई में एक जावास्क्रिप्ट फ़ंक्शन डाल सकता हूं?


3
क्या आपके पास अपने <इनपुट पर वास्तव में एक वर्ग = "इनपुट" विशेषता है ...? ऐसा लगता है कि यह $ ('इनपुट') होना चाहिए।
Keypress

सीएमएस द्वारा प्रोग्राम को प्रोग्रामिक रूप से जनरेट किया जाता है। इसके अलावा, हालांकि, इसे $ ('इनपुट') में बदलना, पृष्ठ के प्रत्येक इनपुट को प्रभावित करेगा, भले ही मैं व्यवहार चाहता था या नहीं। क्षमा करें, यह आपकी संवेदनाओं को समाप्त करता है।
होलेनबेक हो

15
संवेदनशीलता कम से कम में नहीं। बस यह सोचा था कि यह एक समस्या हो सकती है। लगे रहो।
NexusR

1
FYI करें: आपका स्वीकृत उत्तर पूरी तरह से सही नहीं है। नीचे मेरे उत्तर का संदर्भ लें।
NoBrainer

जवाबों:


399
$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

इस स्टैकओवरफ़्लो उत्तर की जाँच करें: event.preventDefault () बनाम गलत

अनिवार्य रूप से, "झूठी वापसी" कॉलिंग e.preventDefaultऔर के समान है e.stopPropagation()


3
ध्यान दें कि वे समान नहीं हैं। IE8 में कोई e.preventDefault नहीं है। IE8 के लिए event.returnValue = false का उपयोग करें;
mbokil

8
@mbokil को छोड़कर जब jQuery का उपयोग किया जाता है, तो यह IE8 में समान होता है। और IE7। और IE6।
केविन बी

यदि आप इनपुट फ़ील्ड में पहले टाइप करना चाहते हैं, तो "रिटर्न झूठा" डालें। अगर बयान के अंदर।
जूनी ब्रॉसास

173

जैसा कि जेसन कोहेन ने उल्लेख किया है कि झूठी वापसी के अलावा। आपको निवारण भी करना पड़ सकता है

e.preventDefault();

13
जैसा कि @NoBrainer ने कहा, यह गलत है: return falsejQuery द्वारा प्रबंधित एक घटना में स्वचालित रूप से e.preventDefault ()
रिकार्डो गली

83

पता नहीं कि यह मदद करेगा, लेकिन आप सीधे फ़ॉर्म सबमिट करने के बजाय सबमिट बटन क्लिक का अनुकरण करने का प्रयास कर सकते हैं। मेरे पास उत्पादन में निम्नलिखित कोड है, और यह ठीक काम करता है:

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

नोट: jQuery ('# सबमिट')। फोकस () एंटर दबाए जाने पर बटन को चेतन बनाता है।


2
महान काम करता है, लेकिन मुझे "झूठे झूठ" जोड़ना था। दोहरे फार्म जमा को रोकने के लिए।
23:90 पर कोड 90

काम करना | ट्रिगर, प्रेषक, आदि, doh, blah ... के बारे में इस तरह की बात करते हुए बहुत सारे परिणाम देखें, लेकिन यह मेरे लिए एकमात्र काम है और वास्तव में एक बटन पर एक क्लिक भेजें। प्रस्तुत नहीं ()। तो, चाल ध्यान केंद्रित () था। क्लिक () धर्मनिरपेक्षता में कार्य करता है। धन्यवाद।
m3nda

काम करता है, लेकिन मुझे इस कोड को $: (दस्तावेज़) के तहत रखना था। पहले से ही (फ़ंक्शन () {...
shasi kanth


30

क्या कोई कारण है जो आपको दर्ज करना है और प्रवेश कुंजी के लिए परीक्षण करना है?

आप बस एक जोड़ नहीं सकता

<input type="submit" /> 

आपके फॉर्म के लिए और क्या यह स्वाभाविक रूप से प्रस्तुत किया जाता है जब प्रवेश धक्का दिया जाता है? आप तब भी प्रपत्र की onsubmitकार्रवाई को रोक सकते हैं और यदि आप चाहते हैं तो एक सत्यापन समारोह को बुला सकते हैं ...

आप यह देखने के लिए भी onsubmitपरीक्षण के रूप में उपयोग कर सकते हैं कि क्या आपका फॉर्म जमा किया जा रहा है, लेकिन यदि आप कॉल करते हैं तो यह काम नहीं करेगा form.submit()


1
पूर्णतया सहमत। मेरी प्राथमिकता हमेशा ब्राउज़र की मूल कार्यक्षमता का उपयोग करना होगा (टाइप के इनपुट = दर्ज करें कुंजी को मूल रूप से सबमिट करने के लिए एक प्रेस कुंजी का जवाब दें) इसके अलावा लिपियों को जोड़ने के बजाय ..
हारून

1
समस्या यह है कि क्या होगा अगर आप अजाक्स सामान कर रहे हैं और सर्वर पर वास्तविक पोस्टबैक नहीं है, लेकिन आप चाहते हैं कि यूआई उपयोगकर्ता की अपेक्षा व्यवहार करे?
देवतुल्य २५'१२

वास्तव में ... मैंने पूरी return false;बात को नजरअंदाज कर दिया था ।
devlord

14

इसे JQuery प्लगइन के रूप में करने का एक तरीका है (यदि आप कार्यक्षमता का फिर से उपयोग करना चाहते हैं तो):

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

अब यदि आप <input>इस प्रकार की कार्यक्षमता के साथ किसी तत्व को सजाना चाहते हैं तो यह उतना ही सरल है:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

12

onsubmit="return false"डिफ़ॉल्ट व्यवहार को रोकने के लिए आप पृष्ठ में केवल फ़ॉर्म कोड भी जोड़ सकते हैं ।

फिर जावास्क्रिप्ट फ़ाइल में jQuery के साथ किसी भी फ़ंक्शन के लिए फ़ॉर्म ( .bindया .live) फ़ॉर्म को submitईवेंट करें।

यहाँ मदद करने के लिए एक नमूना कोड है:

एचटीएमएल

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

जावास्क्रिप्ट + jQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

यह 2011-04-13 तक फ़ायरफ़ॉक्स 4.0 और jQuery 1.4.3 के साथ काम कर रहा है


यह क्रोम में काम नहीं करता है। फिर भी जमा करेंगे।
Marcelo Agimóvel

5

यह मेरा कोड है:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });

4

पहुँच-क्षमता बनाए रखने के लिए, आपको अपने कीकोड को निर्धारित करने के लिए इसका उपयोग करना चाहिए:

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

3

बस आसान कार्यान्वयन के लिए जोड़ना। आप बस एक फॉर्म बना सकते हैं और फिर सबमिट बटन छिपा सकते हैं:

उदाहरण के लिए:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>

@cebirci और आपका क्रोम किस संस्करण में है? मैंने लैपटॉप से ​​लेकर पीसी तक परीक्षण किया और मेरा कोड सिर्फ काम करता है। नया क्रोम डाउनलोड करने का प्रयास करें, इससे पहले कि आप मेरे उत्तर को चिह्नित करें।
जोमे मारनान '

2

मैं अब उपयोग करता हूं

$("form").submit(function(event){
...
}

सबसे पहले मैंने सबमिट बटन पर एक इवेंटहैंडलर जोड़ा, जिसने मेरे लिए एक त्रुटि पैदा की।


1

मुझे पता चला कि आज Enter कुंजी को दबाते समय कीपर ईवेंट को निकाल नहीं दिया जाता है, इसलिए आप इसके बजाय कीडाउन (या कीप) पर स्विच करना चाह सकते हैं।

मेरी परीक्षण स्क्रिप्ट:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

कीबोर्ड पर "A Enter B" टाइप करते समय कंसोल में आउटपुट:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

आप दूसरे क्रम में देखते हैं कि 'कीपर' गायब है, लेकिन कीडाउन और कीप रजिस्टर कोड '13' को दबाया / जारी किया जा रहा है। फ़ंक्शन कीबोर्ड पर jQuery के दस्तावेज़ के अनुसार () :

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

सर्वर 2012 R2 पर IE11 और FF61 पर परीक्षण किया गया


0

HTML कोड में:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

Js कोड में:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

1
कृपया कई प्रश्नों के समान उत्तर न दें। एक अच्छा उत्तर पोस्ट करें, फिर डुप्लिकेट के रूप में अन्य प्रश्नों को बंद करने के लिए वोट / ध्वज दें। यदि प्रश्न डुप्लिकेट नहीं है, तो प्रश्न के अपने उत्तरों को दर्जी करें।
पॉल रौब

@PaulRoub मेरे जवाब का दूसरे के साथ कुछ अंतर है।
मघघ सिप

यह उत्तर इस या इस से अलग कैसे है ?
पॉल राउब

@PaulRoub मुझे यह समस्या है और इसके लिए पहले Google खोजें। वह पृष्ठ, इस समस्या के बारे में बात करते हैं लेकिन सरल नहीं। जब मुझे सबसे अच्छा जवाब मिलता है, तो मैंने इसे साझा करने का फैसला किया, जब यह खोज करने पर उपयोगकर्ताओं की मदद करने के बारे में बात करते हैं, तो कुछ इसी तरह के स्टैकओवरफ़्लो पृष्ठों पर मेरा उत्तर देखें।
मेघगाम

1
यह उत्तर प्रश्न से संबंधित नहीं है
Zoltán Süle

-4

इसे इस्तेमाल करे:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}

9
यह एक असहज तरीके से वेनिला जावास्क्रिप्ट के साथ jquery का मिश्रण कर रहा है, और इसमें एक बहुत ही अजीब कलाकार शामिल है, जो सिर्फ चीजों को भ्रमित करता है
moopet
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.