Mã JavaScript để dừng gửi biểu mẫu

205

Một cách để dừng gửi biểu mẫu là trả về false từ hàm JavaScript của bạn.

Khi nhấp vào nút gửi, chức năng xác nhận được gọi. Tôi có một trường hợp trong xác nhận mẫu. Nếu điều kiện đó được đáp ứng, tôi gọi một hàm có tên returnToPreinglyPage ();

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

Tôi đang sử dụng JavaScript và Dojo Toolkit .

Thay vì quay trở lại trang trước, nó sẽ gửi biểu mẫu. Làm cách nào tôi có thể hủy bỏ bài đăng này và quay lại trang trước?

javascript  html  forms 
— Muhammad Imran Tariq
nguồn
RU Chắc chắn chức năng này đang gọi ?? cố gắng đặt cảnh báo ('kiểm tra'); trước window.history
— samirprogrammer
Vâng tôi chắc chắn; nó đang được gọi
— Muhammad Imran Tariq
8
— TJ

Câu trả lời:

291

Bạn có thể sử dụng giá trị trả về của hàm để ngăn việc gửi biểu mẫu

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

và chức năng như

<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>

Trong trường hợp Chrome 27.0.1453.116 m nếu mã trên không hoạt động, vui lòng đặt returnValue của tham số xử lý sự kiện thành sai để làm cho nó hoạt động.

Cảm ơn Sam đã chia sẻ thông tin.

BIÊN TẬP :

Cảm ơn Vikram vì cách giải quyết của anh ấy nếu ifateateMyForm () trả về false:

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

trong đó verifyateMyForm () là một hàm trả về false nếu xác thực thất bại. Điểm quan trọng là sử dụng sự kiện tên. Chúng tôi không thể sử dụng cho egepreventDefault ()

— Kim loại Hemant
nguồn
1
Chỉ cần đoán: nó không hoạt động với tôi trong phiên bản Chrome mới nhất.
— Sam
5
Bất cứ điều gì trả lại falsedường như không có bất kỳ ảnh hưởng; Chrome vẫn gửi biểu mẫu. Ví dụ , onsubmit="return false;". Tuy nhiên, thiết lập thông số của các xử lý sự kiện của returnValuetrường để falselàm việc cho tôi.
— Sam
3
Xin chào Sam / Hemant, bạn có thể cung cấp mẫu mã như cách đặt trường returnValue của tham số xử lý sự kiện thành false không.
— JackDev
2
Tôi nghĩ vì đây là câu trả lời được chấp nhận, nên có lẽ nên nói làm thế nào để làm điều này đúng. Tôi cùng với JackDev, đang tự hỏi làm thế nào để nó hoạt động tốt. Như vậy, điều này không hoạt động
— Cruncher
1
Nếu validateMyForm()có lỗi return falsesẽ không đạt được. Vì vậy, điều này có thể thất bại. Sau nhiều giờ, tôi tìm thấy một giải pháp hoạt động và đăng nó dưới đây.
— Vikram Pudi
116

Sử dụng ngăn chặn mặc định

Bộ công cụ Dojo

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

jQuery

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

Vani 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
nguồn
3
Tôi muốn giới thiệu event.preventDefault () trả về false vì rất nhiều lý do, đây sẽ là câu trả lời hàng đầu: blog.nmsdvid.com/ cảm
— acidjazz
1
Câu trả lời tốt. Tốt hơn so với người được chọn.
— Ani Menon
2
Tốt, nhưng bạn sẽ thực hiện xác nhận mà OP muốn ở đâu?
— Sahand
1
@acidjazz Nhưng làm thế nào để một người truy cập dữ liệu biểu mẫu sau khi ngăn chặn mặc định?
— CodeAt30
@Sahand @ codeat30 Bạn có thể truy cập sự kiện target.
— Adrien
49

Hiện tại hoạt động sau đây (đã được thử nghiệm trong Chrome và Firefox):

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

Trong đó verifyateMyForm () là một hàm trả về falsenếu xác thực thất bại. Điểm quan trọng là sử dụng tên event. Chúng tôi không thể sử dụng ví dụ e.preventDefault().

— Vikram Pudi
nguồn
15

Chỉ cần sử dụng một đơn giản buttonthay vì một nút gửi. Và gọi một hàm JavaScript để xử lý biểu mẫu gửi:

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

Chức năng trong một scriptthẻ:

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

Bạn cũng có thể thử window.history.forward(-1);

— dku.rajkumar
nguồn
Tôi thích cách tiếp cận này vì nó cho phép trường hợp sử dụng của tôi, các cuộc gọi lại.
— Eddie
12
Điều này ngăn việc sử dụng phím enter để gửi biểu mẫu. Ngoài ra, các thuộc tính HTML5 mới như requiredsẽ không hoạt động.
— Sam
8

Rất nhiều cách khó để làm một điều dễ dàng:

<form name="foo" onsubmit="return false">
— Danial
nguồn
3
Câu trả lời chính xác này (OK, không chính xác, vì bạn đang thiếu dấu chấm phẩy) đã được gửi 8 tháng trước đó và có phiếu bầu tiêu cực vì lý do chính đáng. Điều này làm việc hầu hết thời gian. Nhưng không phải trên tất cả các trình duyệt mọi lúc.
— Auspex
3
Tôi không nói bạn cần một dấu chấm phẩy; Tôi chỉ ra rằng đó là tất cả những gì khác biệt giữa câu trả lời của bạn và câu trả lời cũ hơn nhiều . Thực tế là bây giờ bạn đang yêu cầu tôi chỉ ra những trình duyệt nào không hỗ trợ nó (tôi chưa bao giờ nói có bất kỳ trình duyệt nào, tôi chỉ chỉ ra rằng nó sẽ không luôn hoạt động), chứng tỏ rằng bạn vẫn chưa đọc toàn bộ trang này .
— Auspex
2
Tôi thường không kiểm tra số phiếu bầu giảm, ngoại trừ tôi không biết rằng mọi người đã bỏ phiếu chính xác. Về mặt kỹ thuật, dấu chấm phẩy là không liên quan, vì vậy nó sai. Và bạn nói "bạn đang thiếu dấu chấm phẩy" ngụ ý rằng nó cần thiết, điều đó là sai. Bạn nói nó "sẽ không luôn hoạt động" nhưng bạn không thể chỉ ra một trường hợp hoặc trình duyệt duy nhất mà nó không hoạt động? Đây là logic âm thanh? Đó là mã chính xác. Vì vậy, trừ khi bạn có thể chỉ ra trường hợp nó không hoạt động, thì bạn không có điểm nào cả.
— Danial
Làm thế nào điều này không có nhiều upvote? Nó ngắn gọn hơn nhiều so với các ví dụ khác.
— Sal Alturaigi
Có lẽ bởi vì tiêu đề không phù hợp với những gì chàng trai thực sự hỏi.
— Danial
6

Tất cả các câu trả lời của bạn đã cho một cái gì đó để làm việc với.

Cuối cùng, điều này hiệu quả với tôi: (nếu bạn không chọn ít nhất một mục hộp kiểm, nó sẽ cảnh báo và ở trong cùng một trang)

<!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>
— Gbba
nguồn
Làm việc cho tôi cũng được.
— chetan
4

Dựa trên câu trả lời @Vikram Pudi, chúng ta cũng có thể làm như thế này với Javascript thuần túy

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

<script type="text/javascript">

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


    }
</script>
— Phan Văn Linh
nguồn
3

Tôi khuyên bạn không nên sử dụng onsubmitvà thay vào đó đính kèm một sự kiện trong kịch bản.

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

Sau đó sử dụng preventDefault()(hoặc returnValue = falsecho các trình duyệt cũ hơn).

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

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
— Isaac Abramowitz
nguồn
Bạn có thể giải thích tại sao bạn không sử dụng onsubmit?
— theFreedomBanana
Có thể đó chỉ là sở thích, nhưng tôi thấy dễ hiểu chức năng của một trang web hơn nếu tất cả các trình lắng nghe sự kiện được đính kèm bằng cách sử dụng JSthay vì HTMLsử dụng các thuộc tính. Bằng cách đó, bạn không cần phải nhảy qua nhảy lại trong khi đọc mã của người khác
— Isaac Abramowitz
Điều gì xảy ra nếu ai đó nhấn enter vào một trong các đầu vào thay vì nhấp vào nút? nói chung ii vẫn nộp ...
— bluejayke
1

Hãy nói rằng bạn có một hình thức tương tự như thế này

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

Đây là javascript cho chức năng ConfirmAction

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

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

        return confirmation ;
    }
</script>

Công cụ này hoạt động trên Firefox, Chrome, Internet Explorer (cạnh), Safari, v.v.

Nếu đó không phải là trường hợp cho tôi biết

— Mauricio Gracia Gutierrez
nguồn
1
Sự kết hợp của preventDefault()và returnToPreviousPage()là hoàn hảo và thanh lịch. Nó làm gián đoạn hoạt động bình thường giống như bạn thiết kế bất kỳ trình bắt ngoại lệ nào để hoạt động. +1.
— 1934286
1

Câu trả lời của Hemant và Vikram không hoàn toàn phù hợp với tôi trong Chrome. Sự kiện.preventDefault (); tập lệnh đã ngăn trang gửi đi bất kể việc thông qua hay không xác nhận. Thay vào đó, tôi phải di chuyển event.preventDefault (); vào câu lệnh if như sau:

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

Cảm ơn Hemant và Vikram đã đưa tôi đi đúng hướng.

— Dòng Tên
nguồn
Làm việc cho tôi quá. Cảm ơn.
— ivbtar
1

Ví dụ: nếu bạn đã gửi nút trên biểu mẫu, hãy đặt hàng để dừng hoạt động của nó chỉ đơn giản là viết event.preventDefault (); trong chức năng được gọi khi nhấp vào nút gửi hoặc nút enter.

— Dheeraj Nalawade
nguồn
0

Đơn giản chỉ cần làm nó ....

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

và đây là JQuery của bạn

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
— Matee Gojra
nguồn
1
Bạn có sử dụng jquery ở đây không?
— Selva Ganapathi
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.