Як не допустити подання форми?

У мене є форма, в якій десь є кнопка подання.

Однак я хотів би якось "зловити" подію подання та запобігти її виникненню.

Чи я можу це зробити?

Я не можу змінити кнопку подання, оскільки вона є частиною спеціального елемента керування.

На відміну від інших відповідей, повернення falseє лише частиною відповіді. Розглянемо сценарій, за якого виникає помилка JS до оператора повернення ...

html

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

сценарій

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

повернення falseсюди не буде виконано, і форма буде подана в будь-якому випадку. Також слід зателефонувати, preventDefaultщоб запобігти дії форми за замовчуванням для подання форми у Ajax.

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

У цьому випадку навіть із помилкою форма не надсилатиметься!

Як варіант, try...catchблок може бути використаний.

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

Ви можете використовувати вбудовані події, onsubmitяк це

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

Або

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

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

Демо

Тепер це може бути не дуже хорошою ідеєю при створенні великих проектів. Можливо, вам доведеться використовувати слухачів подій.

Будь ласка , прочитайте більше про Инлайн Події проти Прослуховувач подій (addEventListener і attachEvent в IE) тут . Бо я не можу пояснити це більше, ніж це зробив Кріс Бейкер .

Обидва є правильними, але жоден з них не є "найкращим" сам по собі, і може бути причина, яка розробник вирішив використовувати обидва підходи.

Приєднайте слухача подій до форми за допомогою, .addEventListener()а потім викликайте .preventDefault()метод на 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>

Я думаю, що це краще рішення, ніж визначення submitобробника подій в onsubmitатрибуті, оскільки він розділяє логіку та структуру веб-сторінки. Набагато простіше підтримувати проект, де логіка відокремлена від HTML. Див.: Ненав'язливий JavaScript .

Використання .onsubmitвластивості formоб'єкта DOM не є хорошою ідеєю, оскільки це заважає приєднувати декілька зворотних зворотних дзвінків до одного елемента. Див. AddEventListener vs onclick .

Спробуйте це ...

HTML-код

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

Код jQuery

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

або

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

На сьогоднішній день працює наступні роботи (протестовано в хромі та firefox):

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

де validateMyForm () - функція, яка повертається, falseякщо перевірка не вдалася. Ключовим моментом є використання імені event. Ми не можемо використовувати, наприклад,e.preventDefault()

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

Дотримуватися ненав'язливих умов програмування JavaScript та залежно від швидкості завантаження DOM , може бути корисним використовувати наступне:

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

Потім підключіть події за допомогою програми onload або DOM, якщо ви використовуєте бібліотеку.

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

Крім того, я завжди використовував би actionатрибут, оскільки деякі люди можуть мати якийсь плагін, як NoScript, який би порушив перевірку. Якщо ви використовуєте атрибут дії, принаймні ваш користувач буде переспрямований сервером на основі перевірки на запуск. Якщо ви використовуєте щось на кшталт window.location, з іншого боку, все буде погано.

Для запобігання надсилання форми вам потрібно лише це зробити.

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

Використовуючи вищезгаданий код, це запобіжить надіслати форму.

Ось моя відповідь:

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

    return false;
}
</script>

Додати event.preventDefault();на onsubmitі вона працює.

Ви можете додати eventListner до форми, яка preventDefault()перетворить дані форми в JSON, як показано нижче:

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>