ใช้ JQuery - ป้องกันฟอร์มจากการส่ง

178

ฉันจะป้องกันฟอร์มจากการส่งโดยใช้ jquery ได้อย่างไร

ฉันลองทุกอย่าง - เห็น 3 ตัวเลือกที่แตกต่างกันที่ฉันลองด้านล่าง แต่ทุกอย่างใช้ไม่ได้:

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

มีอะไรผิดปกติ?

อัพเดท - นี่คือ html ของฉัน:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

มีอะไรผิดปกติหรือเปล่า?

jquery forms

— ลูซี่เวเธอร์ฟอร์ด
แหล่งที่มา

แสดง HTML ของคุณเพราะไม่มีอะไรผิดปกติกับ preventDefault หรือคืนเท็จเมื่อคุณโพสต์ไว้นอกเหนือจากตัวเลือกที่คุณเลือกผิด

— ปาร์

1

return false;หลังจาก.submit()ทำงานให้ฉัน! ฉันมีปัญหาเดียวกัน

— d -_- b

หากมีข้อผิดพลาด JavaScript ที่เกิดขึ้นในการจัดการe.preventDefault();รหัสจะไม่ถึง / ดำเนินการ

— Tom

263

สองสิ่งที่โดดเด่น:

formมันเป็นไปได้ว่าชื่อของรูปแบบของคุณไม่ได้ ค่อนข้างอ้างถึงแท็กโดยวาง #
ยังe.preventDefaultเป็นไวยากรณ์ JQuery ที่ถูกต้องเช่น
```
    //option A
    $("form").submit(function(e){
        e.preventDefault();
    });
```

ตัวเลือก C ควรทำงานเช่นกัน ฉันไม่คุ้นเคยกับตัวเลือก B

ตัวอย่างที่สมบูรณ์:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>

— Philip Fourie
แหล่งที่มา

2

มีบางอย่างผิดปกติ ฉันใช้เทคนิคนี้เป็นประจำทุกวัน ที่ดีที่สุดเดาว่ามีข้อผิดพลาด JavaScript ในหน้าอาจตรวจสอบกับ FireBug?

— Philip Fourie

@ LucyWeatherford ฉันได้อัปเดตคำตอบของฉันด้วยตัวอย่างที่ใช้งานได้ บางทีคุณอาจจะเห็นบางสิ่งบางอย่าง

— Philip Fourie

ในการอัปเดต html ของคุณฉันสังเกตเห็นว่าคุณมีแอตทริบิวต์ class สำหรับแบบฟอร์มของคุณ เปลี่ยน JQuery selector ของคุณจาก$('#form')เป็น$('.form')for class attributes

— Philip Fourie

1

ขอบคุณ! ฉันลงเอยด้วยการใช้รหัสของคุณในหน้าเดียวกันและมันก็ใช้งานได้ แต่ก็ยังไม่แน่ใจว่าเกิดอะไรขึ้น แต่ตอนนี้ก็ดีแล้ว ขอบคุณ!

— Lucy Weatherford

1

@ ÂngeloRigo e เป็นชื่อที่คุณตั้งให้กับพารามิเตอร์ในกรณีนี้คือเหตุการณ์ส่ง

— squall3d

34

คุณอาจมีรูปแบบไม่กี่หน้าและใช้ $ ('ฟอร์ม') ส่ง () เพิ่มกิจกรรมนี้ในการเกิดขึ้นครั้งแรกของแบบฟอร์มบนหน้าของคุณ ใช้ตัวเลือกคลาสแทนหรือลองทำสิ่งนี้:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

หรือรุ่นที่ดีกว่า:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

— Artem Kiselev
แหล่งที่มา

1

ในกรณีของฉันการคืนค่าผิดพลาดเป็นกุญแจสำคัญ

— elquimista

19

เพื่อป้องกันการเริ่มต้น / ป้องกันการใช้การส่งแบบฟอร์ม

e.preventDefault();

เพื่อหยุดเหตุการณ์เดือดปุด ๆ ใช้

e.stopPropagation();

เพื่อป้องกันการส่งแบบฟอร์ม 'คืนเท็จ' ควรทำงานด้วย

— อัลฟ่า
แหล่งที่มา

ดูคำตอบนี้เพราะ jQuery จัดการสิ่งเหล่านี้แตกต่างกัน stackoverflow.com/questions/1357118/…

— ปาร์

1

ตรวจสอบสิ่งนี้เพื่อทำความเข้าใจกับเหตุการณ์ที่เกิดขึ้นbubling quirksmode.org/js/events_order.html

— The Alpha

2

jQuery ในรัฐ API: "กลับเท็จจากตัวจัดการเหตุการณ์จะเรียกโดยอัตโนมัติevent.stopPropagation()และevent.preventDefault()ได้. falseคุ้มค่านอกจากนี้ยังสามารถส่งผ่านไปสำหรับการจัดการเป็นชื่อย่อสำหรับfunction(){ return false; }."

— เปาโล

7

ฉันยังมีปัญหาเดียวกัน ฉันได้ลองสิ่งที่คุณลองแล้ว จากนั้นฉันเปลี่ยนวิธีการของฉันที่จะไม่ใช้ jquery แต่โดยใช้แอตทริบิวต์ "onsubmit" ในแท็กแบบฟอร์ม

<form onsubmit="thefunction(); return false;">

มันได้ผล.

แต่เมื่อฉันพยายามใส่ค่าส่งคืนที่ผิดพลาดเฉพาะใน "thefunction ()" มันไม่ได้ป้องกันขั้นตอนการส่งดังนั้นฉันต้องใส่ "return false;" ในแอตทริบิวต์ onsubmit ดังนั้นฉันสรุปได้ว่าแอปพลิเคชันแบบฟอร์มของฉันไม่สามารถรับค่าตอบแทนจากฟังก์ชัน Javascript ฉันไม่มีความคิดเกี่ยวกับมัน

— Luki B. Subekti
แหล่งที่มา

1

มันเป็นความแตกต่างระหว่างและfalse; return false;คุณจะต้องมีonsubmit="return thefunction();"

— xr280xr

4

ฉันมีปัญหาเดียวกันและฉันแก้ไขด้วยวิธีนี้ (ไม่หรูหรา แต่ใช้งานได้):

$('#form').attr('onsubmit','return false;');

และมันมีความได้เปรียบในความคิดของฉันที่คุณสามารถย้อนกลับสถานการณ์ได้ทุกเมื่อที่คุณต้องการ:

$('#form').attr('onsubmit','return true;');

— vinxxe
แหล่งที่มา

บางทีอาจจะเป็นการดีกว่าที่จะลบแอตทริบิวต์ออกเมื่อส่งแบบฟอร์มการป้องกัน$('#form').removeAttr('onsubmit');

— กลับคืน

4

แนบเหตุการณ์ไปยังองค์ประกอบที่ส่งไม่ได้กับองค์ประกอบของแบบฟอร์ม ตัวอย่างเช่นใน html ของคุณทำเช่นนี้

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

— M Weiss
แหล่งที่มา

2

คุณสามารถตรวจสอบได้ว่าแบบฟอร์มนั้นถูกต้องหรือไม่หากใช่ให้ทำการส่งตรรกะหรือแสดงข้อผิดพลาด

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

จาวาสคริ

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

— รหัส Spy
แหล่งที่มา

1

เมื่อฉันใช้<form>แท็กที่ไม่มีแอททริบิวต์id="form"และเรียกมันด้วยชื่อแท็กโดยตรงใน jquery มันใช้ได้กับฉัน
รหัสของคุณในไฟล์ html:

<form action="page2.php" method="post">

และในสคริปต์ Jquery:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

— Noha Salah
แหล่งที่มา

1

$('#form')id="form"มองหาองค์ประกอบที่มี

$('form') มองหาองค์ประกอบของแบบฟอร์ม

— ราหุล
แหล่งที่มา

0

คุณลืมรหัสแบบฟอร์มและใช้งานได้

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

— ชินทาโดนิคุอะลิซา
แหล่งที่มา

0

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

จากที่นี่: https://api.jquery.com/submit-selector/ (หน้าน่าสนใจสำหรับประเภทการส่ง)

— คริสแข็งแกร่ง
แหล่งที่มา

0

สิ่งนี้ดูเหมือนว่าจะใช้งานได้และอาจจะง่ายกว่าเล็กน้อย:

$('#Form').on('submit',function(){
    return false;
})

— Ukuser32
แหล่งที่มา

0

เมื่อใช้ jQuery คุณสามารถทำสิ่งต่อไปนี้:

1- ใช้แบบฟอร์มการส่งแบบเนทีฟด้วยปุ่มส่งขณะที่ป้องกันไม่ให้เหตุการณ์เริ่มทำงาน

2- ตรวจสอบแบบฟอร์มคุณสมบัติที่ถูกต้องซึ่งสามารถนำไปใช้ได้ดังนี้

1- HTML:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });

— Mohamed Nagieb
แหล่งที่มา