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.

Không giống như các câu trả lời khác, trả về falsechỉ là một 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ở lại falseđây sẽ không được thực hiện và mẫu sẽ được gửi bằng một trong hai cách. 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 try...catchkhối có thể được sử dụng.

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

Bạn có thể sử dụng sự kiện nội tuyến onsubmitnhư 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 phải 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 Trình lắng 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ố chúng là "tốt nhất" mỗi lần, và có thể có một lý do mà nhà phát triển chọn sử dụng cả hai phương pháp.

Đí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 .preventDefault()phương thức 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 submitnội tuyến xử lý sự kiện với onsubmitthuộc tính 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 .onsubmittính của formđối tượng 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 vs onclick .

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.");
    });
});

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

<form onsubmit="event.preventDefault(); return 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()

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Để tuân theo các quy ước lập trình JavaScript không phô trương và tùy thuộc vào việc DOM sẽ tải nhanh như thế nào , có thể 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 actionthuộc tính 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ẽ tồi tệ.

Để 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.

Đâ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();vào onsubmitvà nó hoạt động.

Bạn có thể thêm eventListner vào biểu mẫu, 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>