submit form jquery




منع المستخدمين من إرسال نموذج عن طريق الضغط على Enter (17)

لديّ استبيان على موقع ويب ، ويبدو أن هناك بعض المشكلات مع المستخدمين الذين يدخلون (لا أعرف السبب) وأن أرسل عن طريق الخطأ الاستبيان (النموذج) دون النقر على زر الإرسال. هل هناك طريقة لمنع هذا؟

أستخدم HTML و PHP 5.2.9 و jQuery في الاستطلاع.


عدم السماح بإدخال المفتاح في أي مكان

إذا لم يكن لديك <textarea> في النموذج الخاص بك ، فما عليك سوى إضافة ما يلي إلى <form> :

<form ... onkeypress="return event.keyCode != 13;">

أو باستخدام jQuery:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

سيؤدي ذلك إلى التحقق من كل مفتاح ضغط داخل النموذج على keyCode. إذا لم يكن 13 (مفتاح Enter) ، فسيعود إلى true وسيذهب أي شيء كما هو متوقع. إذا كان 13 (مفتاح Enter) ، فسيتم إرجاعه كاذبة وسيتم إيقاف أي شيء على الفور ، لذلك لن يتم إرسال النموذج.

يتم تفضيل الحدث keypress على keydown حيث يتم تشغيله فقط عند إدراج الحرف بالفعل. يتم تشغيل keydownkeyup ) عند الضغط على أي مفتاح ، بما في ذلك مفاتيح التحكم. و keyCode من keypress يمثل الحرف الفعلي الذي يتم إدراجه ، وليس المفتاح المادي المستخدم. بهذه الطريقة لا تحتاج إلى التحقق صراحة مما إذا كان مفتاح Numpad Enter (108) مضغوطًا أيضًا. تكون keyup متأخرة جدًا لمنع حظر إرسال النموذج.

لاحظ أن $(window) كما هو مقترح في بعض الإجابات الأخرى بدلاً من $(document) لا يعمل لـ keydown / keypress / keyup في IE <= 8 ، لذا فهذا ليس خيارًا جيدًا إذا كنت ترغب في تغطية هؤلاء المستخدمين الفقراء كذلك.

السماح بإدخال مفتاح على textareas فقط

إذا كان لديك <textarea> في النموذج الخاص بك (والذي بالطبع يجب أن يقبل مفتاح Enter) ، فقم بإضافة معالج keypress إلى كل عنصر إدخال فردي وليس <textarea> .

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

لتقليل النمذجة ، من الأفضل القيام بذلك باستخدام jQuery:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

إذا كان لديك وظائف معالج أحداث أخرى مرفقة على عناصر الإدخال هذه ، والتي ترغب أيضًا في استدعاء مفتاح الإدخال لسبب ما ، فعندئذ فقط قم بمنع السلوك الافتراضي للأحداث بدلاً من إرجاع false ، بحيث يمكن نشرها بشكل صحيح إلى معالجات أخرى.

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

السماح بإدخال مفتاح على textareas وإرسال الأزرار فقط

إذا كنت ترغب في السماح بإدخال مفتاح على أزرار إرسال <input|button type="submit"> أيضًا ، فيمكنك دائمًا تنقية المحدد على النحو التالي.

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

لاحظ أن input[type=text] كما هو مذكور في بعض الإجابات الأخرى لا يغطي مدخلات HTML5 غير النصية ، لذا فهذا ليس محددًا جيدًا.


  1. لا تستخدم type = "submit" للإدخالات أو الأزرار.
  2. استخدم type = "button" واستخدم js [Jquery / angular / etc] لإرسال النموذج إلى الخادم.

أود إضافة شفرة CoffeeScript صغيرة (لم يتم اختبار الحقل):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(آمل أن تكونوا مثل الخدعة اللطيفة في ما لم تكن هناك فقرة.)


إذا كنت تستخدم برنامجًا نصيًا لإجراء الإرسال الفعلي ، فيمكنك إضافة سطر "return false" إلى معالج onsubmit مثل:

<form onsubmit="return false;">

لن يؤدي استدعاء إرسال () في النموذج من JavaScript إلى تشغيل الحدث.


استعمال:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

يعمل هذا الحل على جميع النماذج الموجودة على موقع الويب (أيضًا في النماذج التي تم إدراجها مع Ajax) ، مما يمنع فقط إدخال s في نصوص الإدخال. ضعها في وظيفة جاهزة للوثيقة ، ونسيان هذه المشكلة للحياة.


استعمال:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>

بدلاً من منع المستخدمين من الضغط على Enter ، والذي قد يبدو غير طبيعي ، يمكنك ترك النموذج كما هو وإضافة بعض التحقق من جانب العميل الإضافي: عندما لا ينتهي الاستقصاء لا يتم إرسال النتيجة إلى الخادم ويحصل المستخدم على رسالة جيدة إخبار ما يجب الانتهاء منه لإكمال النموذج. إذا كنت تستخدم jQuery ، فجرّب المكوّن الإضافي التحقق من الصحة:

http://docs.jquery.com/Plugins/Validation

سيتطلب ذلك عملاً أكثر من مجرد النقر على الزر Enter ، ولكن من المؤكد أنه سيوفر تجربة مستخدم أكثر ثراءً.


حل jQuery صغير لطيف بسيط:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

على عكس الطرق الأخرى ، يمنع هذا النموذج إرسال النماذج عند الدخول ، ولكن لا تمنع إدخال مفتاح الإدخال في المدخلات بشكل عام. لا يتطلب أي مكتبة خارجية

window.addEventListener('keydown', function(e){
    //set default value for variable that will hold the status of keypress
    pressedEnter = false;

    //if user pressed enter, set the variable to true
    if(event.keyCode == 13)
        pressedEnter = true;

    //we want forms to disable submit for a tenth of a second only
    setTimeout(function(){
        pressedEnter = false;
    },100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for(i = 0; i < forms.length; i++){
    //listen to submit event
    forms[i].addEventListener('submit', function(e){
        //if user just pressed enter, stop the submit event
        if(pressedEnter == true) {
            e.preventDefault();
            return false;
        }
    })
}

في حالتي ، كان لديّ زوجين من حقول الإكمال التلقائي لـ jQuery UI و textareas في نموذج ، لذا كنت أريدهم بالتأكيد قبول إدخال . لذلك أزلت إدخال type="submit" من نموذج وأضفت <a href="" id="btn">Ok</a> بدلاً منه. ثم نصحته كزر وأضفت الكود التالي:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

إذا قام مستخدم بملء كافة الحقول المطلوبة ، validateData() وإرسال النموذج.


كان لدي مشكلة مماثلة ، حيث كان لي شبكة مع "حقول النصوص اياكس" (Yii CGridView) وزر واحد فقط الإرسال. في كل مرة أجريت بحثًا على حقل نصي ثم اضغط على إدخال النموذج المقدم. اضطررت إلى القيام بشيء ما باستخدام الزر لأنه الزر الوحيد المشترك بين طرق العرض (نمط MVC). كل ما كان علي فعله هو إزالة type="submit" ووضع onclick="document.forms[0].submit()


كنت بحاجة إلى منع المدخلات المحددة فقط من الإرسال ، لذا استخدمت مُحدد الصف ، للسماح لهذه الميزة أن تكون "عالمية" أينما أحتاج إليها.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

وهذا jQuery code:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

بدلا من ذلك ، إذا كان keydown غير كاف:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

بعض الملاحظات:

تعديل العديد من الإجابات الجيدة هنا ، يبدو أن مفتاح Enter يعمل على أي كلمة رئيسية في جميع المتصفحات. بالنسبة للبديل ، قمت بتحديث bind() إلى طريقة on() .

أنا من أشد المعجبين باختيار الصفوف ، حيث يقيّم كل الإيجابيات والسلبيات ومناقشات الأداء. اصطلاح التسمية الخاص بي هو 'idSomething' للإشارة إلى أن jQuery تستخدمه كمعرف ، لفصله عن نمط CSS.


لا يمكنني التعليق حتى الآن ، لذلك سأرسل إجابة جديدة

الإجابة المقبولة ما يرام ، ولكن لم يكن وقف التقديم على دخول numpad. على الأقل في الإصدار الحالي من Chrome. اضطررت لتغيير شرط رمز المفتاح لهذا ، ثم أنه يعمل.

if(event.keyCode == 13 || event.keyCode == 169) {...}

نهج مختلف تماما:

  1. سيتم تنشيط أول <button type="submit"> في النموذج عند الضغط على Enter .
  2. وينطبق هذا حتى إذا كان الزر مخفيًا باستخدام style="display:none;
  3. يمكن أن يعرض البرنامج النصي لهذا الزر false ، مما يؤدي إلى إحباط عملية الإرسال.
  4. لا يزال بإمكانك الحصول على <button type=submit> لإرسال النموذج. فقط عاد true أن تتالي التقديم.
  5. يؤدي الضغط على Enter أثناء تركيز زر الإرسال الحقيقي إلى تنشيط زر الإرسال الحقيقي.
  6. الضغط على Enter داخل <textarea> أو عناصر تحكم النموذج الأخرى سوف تعمل كالمعتاد.
  7. يؤدي الضغط على Enter داخل عناصر التحكم في النموذج <input> إلى تشغيل <button type=submit> الأول <button type=submit> ، الذي يرجع false ، وبالتالي لا يحدث شيء.

على النحو التالي:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

هذا يعمل بالنسبة لي

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

وقد عمل هذا بالنسبة لي في جميع المتصفحات بعد الكثير من الإحباط مع حلول أخرى. وظيفة name_space الخارجي هو فقط الابتعاد عن الإعلان عن globals ، وهو أمر أوصي به أيضًا.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

استخدام العينة:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

يمكنك استخدام طريقة مثل

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

عند قراءة التعليقات على المشاركة الأصلية ، لجعلها أكثر قابلية للاستخدام والسماح للأشخاص بالضغط على Enter إذا أتموا جميع الحقول:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});




form-submit