รหัส JavaScript เพื่อหยุดการส่งแบบฟอร์ม

206

วิธีหนึ่งในการหยุดการส่งแบบฟอร์มคือการส่งคืนค่าเท็จจากฟังก์ชัน JavaScript ของคุณ

เมื่อคลิกปุ่มส่งจะมีการเรียกใช้ฟังก์ชันการตรวจสอบความถูกต้อง ฉันมีกรณีในการตรวจสอบแบบฟอร์ม หากตรงตามเงื่อนไขนั้นฉันเรียกใช้ฟังก์ชันชื่อreturnToPre ชัดPage ();

function returnToPreviousPage() {
    window.history.back();
}

ฉันใช้ JavaScript และDojo Toolkit

แทนที่จะกลับไปที่หน้าก่อนหน้ามันจะส่งแบบฟอร์ม ฉันจะยกเลิกการส่งข้อมูลนี้และกลับไปที่หน้าก่อนหน้าได้อย่างไร

javascript html forms

— มูฮัมหมัดอิมรันทาเร็ค
แหล่งที่มา

RU แน่ใจว่าฟังก์ชั่นนี้โทร? ลองใส่การแจ้งเตือน ('ทดสอบ'); ก่อน window.history

— samirprogrammer

ใช่ฉันแน่ใจ; มันถูกเรียกว่า

— มูฮัมหมัดอิมรันทาเร็ค

8

มีความซ้ำซ้อนของวิธีการป้องกันไม่ให้ส่งแบบฟอร์ม?

— TJ

292

คุณสามารถใช้ค่าส่งคืนของฟังก์ชันเพื่อป้องกันการส่งแบบฟอร์ม

<form name="myForm" onsubmit="return validateMyForm();">

และฟังก์ชั่นเช่น

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

ในกรณีของ Chrome 27.0.1453.116 m หากโค้ดด้านบนใช้งานไม่ได้โปรดตั้งค่าฟิลด์returnValue ของพารามิเตอร์ของตัวจัดการเหตุการณ์เป็นเท็จเพื่อให้ใช้งานได้

ขอบคุณ Sam สำหรับการแบ่งปันข้อมูล

แก้ไข:

ขอบคุณ Vikram สำหรับวิธีแก้ปัญหาของเขาหาก validateMyForm () ส่งคืนค่าเท็จ:

 <form onsubmit="event.preventDefault(); validateMyForm();">

โดยที่ validateMyForm () เป็นฟังก์ชันที่ส่งคืนค่า false หากการตรวจสอบล้มเหลว จุดสำคัญคือการใช้เหตุการณ์ชื่อ เราไม่สามารถใช้สำหรับ egepreventDefault ()

— Hemant Metalia
แหล่งที่มา

1

แค่เดา: มันใช้ไม่ได้กับฉันใน Chrome เวอร์ชันล่าสุด

— Sam

5

สิ่งใดที่ส่งคืนfalseดูเหมือนจะไม่มีผลกระทบใด ๆ Chrome ยังคงส่งแบบฟอร์ม ตัวอย่างเช่นonsubmit="return false;". อย่างไรก็ตามการตั้งค่าreturnValueฟิลด์ของพารามิเตอร์ของตัวจัดการเหตุการณ์ให้falseเหมาะกับฉัน

— Sam

3

สวัสดี Sam / Hemant คุณสามารถให้ตัวอย่างโค้ดสำหรับวิธีการตั้งค่าฟิลด์ returnValue ของพารามิเตอร์ของตัวจัดการเหตุการณ์เป็นเท็จได้โปรด

— JackDev

2

ฉันคิดว่าเนื่องจากนี่เป็นคำตอบที่ยอมรับได้จึงควรบอกวิธีทำอย่างถูกต้อง ฉันพร้อมกับ JackDev กำลังสงสัยว่าจะทำอย่างไรให้มันทำงานได้อย่างถูกต้อง เช่นนี้ไม่ทำงาน

— Cruncher

1

หากvalidateMyForm()มีข้อผิดพลาดreturn falseจะไม่สามารถเข้าถึงได้ ดังนั้นสิ่งนี้อาจล้มเหลว หลังจากผ่านไปหลายชั่วโมงฉันพบวิธีแก้ปัญหาที่ใช้งานได้และโพสต์ไว้ด้านล่าง

— Vikram Pudi

116

ใช้ป้องกันการเริ่มต้น

ชุดเครื่องมือ Dojo

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

JavaScript วานิลลา

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}

— Greg Guida
แหล่งที่มา

3

ฉันอยากจะแนะนำ event.preventDefault () มากกว่า return false ด้วยเหตุผลหลายประการนี่ควรเป็นคำตอบยอดนิยม: blog.nmsdvid.com/…

— acidjazz

1

คำตอบที่ดี. ดีกว่าที่เลือกไว้

— Ani Menon

2

ดี แต่คุณจะตรวจสอบความถูกต้องที่ OP ต้องการได้ที่ไหน

— Sahand

1

@acidjazz แต่วิธีหนึ่งเข้าถึงข้อมูลแบบฟอร์มหลังจากป้องกันการเริ่มต้นได้อย่างไร

— CodeAt30

@Sahand @ codeat30 targetคุณสามารถเข้าถึงเหตุการณ์

— Adrien

50

การทำงานต่อไปนี้เป็นตอนนี้ (ทดสอบใน Chrome และ Firefox):

<form onsubmit="event.preventDefault(); validateMyForm();">

โดยที่ validateMyForm () เป็นฟังก์ชันที่ส่งคืนfalseหากการตรวจสอบล้มเหลว eventจุดสำคัญคือการใช้ชื่อ e.preventDefault()เราไม่สามารถใช้สำหรับเช่น

— Vikram Pudi
แหล่งที่มา

15

เพียงแค่ใช้buttonปุ่มง่าย ๆแทนปุ่มส่ง และเรียกใช้ฟังก์ชัน JavaScript เพื่อจัดการกับการส่งแบบฟอร์ม:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

ฟังก์ชั่นภายในscriptแท็ก:

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

คุณสามารถลอง window.history.forward(-1);

— dku.rajkumar
แหล่งที่มา

ฉันชอบวิธีการนี้เพราะช่วยให้สำหรับกรณีการใช้งานของฉันโทรกลับ

— Eddie

12

การทำเช่นนี้จะป้องกันการใช้รหัสเข้าเพื่อส่งแบบ นอกจากนี้คุณลักษณะ HTML5 ใหม่เช่นใช้requiredงานไม่ได้

— Sam

8

มีวิธีที่ยากมากในการทำสิ่งที่ง่าย:

<form name="foo" onsubmit="return false">

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

3

คำตอบที่แน่นอนนี้ (ตกลงไม่ถูกต้องเนื่องจากคุณไม่มีเซมิโคลอน) ถูกส่งไป 8 เดือนก่อนหน้านี้และมีคะแนนโหวตติดลบด้วยเหตุผลที่ดี ใช้งานได้เกือบตลอดเวลา แต่ไม่ใช่ทุกเบราว์เซอร์ตลอดเวลา

— Auspex

3

ฉันไม่ได้บอกว่าคุณต้องการเซมิโคลอน; ผมชี้ให้เห็นว่าเป็นสิ่งที่มีความแตกต่างระหว่างคำตอบและของคุณมากที่มีอายุมากกว่าหนึ่ง ความจริงที่ว่าตอนนี้คุณกำลังขอให้ฉันชี้ให้เห็นว่าเบราว์เซอร์ใดบ้างที่ไม่รองรับ (ฉันไม่เคยบอกว่ามีอะไรเลยฉันแค่ชี้ให้เห็นว่ามันไม่ได้ผลเสมอไป) พิสูจน์ว่าคุณยังไม่ได้อ่านหน้านี้ทั้งหมด .

— Auspex

2

ฉันมักจะไม่ตรวจสอบการลงคะแนนยกเว้นว่าฉันไม่รู้ว่าผู้คนลงรหัสถูกต้อง ในทางเทคนิคเซมิโคลอนนั้นไม่เกี่ยวข้องดังนั้นจึงผิด และคุณพูดว่า "เซมิโคลอนของคุณหายไป" หมายความว่าจำเป็นซึ่งผิด คุณพูดว่า "ใช้ไม่ได้เสมอไป" แต่คุณไม่สามารถระบุกรณีหรือเบราว์เซอร์เดียวที่ไม่สามารถใช้งานได้? นี่คือตรรกะของเสียง? มันเป็นรหัสที่ถูกต้อง ดังนั้นถ้าคุณไม่สามารถชี้ให้เห็นกรณีที่มันไม่ทำงานคุณก็ไม่มีประเด็นเลย

— Danial

สิ่งนี้ไม่มี upvotes เพิ่มเติมได้อย่างไร มันสั้นกว่าเมื่อเปรียบเทียบกับตัวอย่างอื่น ๆ

— Sal Alturaigi

อาจเป็นเพราะชื่อเรื่องนั้นไม่ตรงกับสิ่งที่ผู้ชายถาม

— Danial

6

คำตอบทั้งหมดของคุณให้บางสิ่งบางอย่างที่จะทำงานกับ

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

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>

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

ทำงานให้ฉันด้วย

— chetan

4

จากคำตอบ @Vikram Pudi เราสามารถทำเช่นนี้ได้ด้วย Javascript แท้ๆ

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>

— ฟาน Van Linh
แหล่งที่มา

3

ฉันอยากจะแนะนำไม่ใช้onsubmitและแนบเหตุการณ์ในสคริปต์แทน

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

จากนั้นใช้preventDefault()(หรือreturnValue = falseเบราว์เซอร์รุ่นเก่ากว่า)

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

— Isaac Abramowitz
แหล่งที่มา

คุณช่วยอธิบายได้onsubmitไหมว่าทำไมคุณถึงไม่ใช้?

— theFreedomBanana

อาจเป็นเพียงการตั้งค่า แต่ฉันคิดว่ามันง่ายกว่าที่จะเข้าใจฟังก์ชั่นของหน้าเว็บถ้าทุกฟังเหตุการณ์ที่แนบมาโดยใช้JSแทนที่จะHTMLใช้คุณลักษณะ ด้วยวิธีนี้คุณไม่จำเป็นต้องกระโดดกลับไปกลับมามากเท่าที่อ่านรหัสของคนอื่น

— Isaac Abramowitz

จะเกิดอะไรขึ้นถ้ามีใครกด Enter บนหนึ่งในอินพุตแทนที่จะคลิกปุ่ม? โดยทั่วไป ii ยังคงส่ง ...

— bluejayke

1

ให้บอกว่าคุณมีรูปแบบคล้ายกับสิ่งนี้

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

นี่คือ javascript สำหรับฟังก์ชั่น confirmAction

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

อันนี้ใช้ได้กับ Firefox, Chrome, Internet Explorer (edge), Safari, เป็นต้น

หากไม่ใช่กรณีนั้นแจ้งให้เราทราบ

— Mauricio Gracia Gutierrez
แหล่งที่มา

1

การรวมกันของpreventDefault()และreturnToPreviousPage()สมบูรณ์แบบและสง่างาม มันขัดจังหวะการทำงานปกติเช่นเดียวกับที่คุณออกแบบตัวจับข้อยกเว้นให้ทำงาน +1

— 1934286

1

คำตอบของ Hemant และ Vikram ไม่ค่อยเหมาะกับฉันใน Chrome เลย The event.preventDefault (); สคริปต์ป้องกันหน้าเว็บจากการส่งโดยไม่คำนึงถึงการผ่านหรือการตรวจสอบความล้มเหลว ฉันต้องย้าย event.preventDefault () แทน ลงในคำสั่ง if ดังนี้:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

ขอบคุณ Hemant และ Vikram ที่ทำให้ฉันไปในทิศทางที่ถูกต้อง

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

ทำงานให้ฉันด้วย ขอบคุณ

— ivbtar

1

เช่นถ้าคุณมีปุ่มส่งบนแบบฟอร์ม, inorder เพื่อหยุดการสนับสนุนของมันเพียงแค่เขียน event.preventDefault (); ในฟังก์ชั่นที่เรียกว่าเมื่อคลิกปุ่มส่งหรือปุ่มป้อน

— Dheeraj Nalawade
แหล่งที่มา

0

เพียงทำมัน ....

<form>
<!-- Your Input Elements -->
</form>

และนี่คือ JQuery ของคุณ

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

— Matee Gojra
แหล่งที่มา

1

คุณทำ jquery ที่นี่คุณใช้?

— Selva Ganapathi