it-swarm-vi.tech

Làm thế nào để ngăn chặn hình thức được gửi?

Tôi có một hình thức có một nút gửi trong đó ở đâu đó.

Tuy nhiên, tôi muốn bằng cách nào đó 'bắt' sự kiện gửi và ngăn nó xảy ra.

Có một số cách tôi có thể làm điều này?

Tôi không thể sửa đổi nút gửi, vì đó là một phần của điều khiển tùy chỉnh.

193
Nathan Osman

Không giống như các câu trả lời khác, trả về false chỉ là phần của câu trả lời. Hãy xem xét kịch bản xảy ra lỗi JS trước câu lệnh return ...

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

kịch bản

function mySubmitFunction()
{
  someBug()
  return false;
}

trả về false ở đây sẽ không được thực thi và biểu mẫu sẽ được gửi theo bất kỳ cách nào. Bạn cũng nên gọi preventDefault để ngăn hành động biểu mẫu mặc định cho việc gửi biểu mẫu Ajax.

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

Trong trường hợp này, ngay cả với lỗi, biểu mẫu sẽ không được gửi!

Ngoài ra, một khối try...catch có thể được sử dụng.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}
202
Ben Rowe

Bạn có thể sử dụng sự kiện nội tuyến onsubmit như thế này

<form onsubmit="alert('stop submit'); return false;" >

Hoặc là

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Bản giới thiệu

Bây giờ, điều này có thể không phải là một ý tưởng tốt khi thực hiện các dự án lớn. Bạn có thể cần sử dụng Trình lắng nghe sự kiện.

Vui lòng đọc thêm về Sự kiện nội tuyến so với Người nghe sự kiện (addEventListener và IE's Đính kèm) tại đây . Vì tôi không thể giải thích nó nhiều hơn Chris Baker đã làm. 

Cả hai đều đúng, nhưng không ai trong số họ là "tốt nhất" mỗi lần, và có thể có một lý do nhà phát triển chọn sử dụng cả hai phương pháp.

130
Reigel

Đính kèm một trình lắng nghe sự kiện vào biểu mẫu bằng cách sử dụng .addEventListener() và sau đó gọi phương thức .preventDefault() trên event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});
<form>
  <button type="submit">Submit</button>
</form>

Tôi nghĩ rằng đó là một giải pháp tốt hơn so với việc xác định nội tuyến xử lý sự kiện submit với thuộc tính onsubmit vì nó tách biệt cấu trúc và logic trang web. Dễ dàng hơn nhiều để duy trì một dự án nơi logic được tách ra khỏi HTML. Xem: JavaScript không phô trương .

Sử dụng thuộc tính .onsubmit của đối tượng form DOM không phải là một ý tưởng hay vì nó ngăn bạn đính kèm nhiều cuộc gọi lại gửi đến một yếu tố. Xem addEventListener so với onclick .

82
Michał Perłakowski

Hãy thử cái này ...

Mã HTML

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

mã jQuery

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

hoặc là

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});
11
Sach

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

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

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

10
Vikram Pudi
var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}
8
naikus

Đây là câu trả lời của tôi:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

Tôi thêm event.preventDefault(); trên onsubmit và nó hoạt động.

0
yozawiratama

Bạn có thể thêm eventListner vào biểu mẫu, đó là preventDefault() và chuyển đổi dữ liệu biểu mẫu thành JSON như dưới đây:

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);
<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>
0
Hasan A Yousef

Để tuân theo các quy ước lập trình JavaScript không phô trương và tùy thuộc vào tốc độ DOM sẽ tải nhanh như thế nào, nên sử dụng các cách sau:

<form onsubmit="return false;"></form>

Sau đó kết nối các sự kiện bằng cách sử dụng onload hoặc DOM sẵn sàng nếu bạn đang sử dụng thư viện.

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});
label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

Ngoài ra, tôi sẽ luôn sử dụng thuộc tính action vì một số người có thể có một số plugin như NoScript đang chạy, sau đó sẽ phá vỡ xác thực. Nếu bạn đang sử dụng thuộc tính hành động, ít nhất người dùng của bạn sẽ được máy chủ chuyển hướng dựa trên xác thực phụ trợ. Nếu bạn đang sử dụng một cái gì đó như window.location, mặt khác, mọi thứ sẽ trở nên tồi tệ.

0
user3423894

Để ngăn chặn hình thức gửi, bạn chỉ cần làm điều này.

<form onsubmit="event.preventDefault()">
    .....
</form>

Bằng cách sử dụng mã ở trên, điều này sẽ ngăn chặn việc gửi biểu mẫu của bạn.

0
Zuhair Taha