Wie kann verhindert werden, dass ein Formular eingereicht wird?

Ich habe ein Formular, in dem sich irgendwo eine Schaltfläche zum Senden befindet.

Ich möchte das Submit-Ereignis jedoch irgendwie "abfangen" und verhindern, dass es auftritt.

Kann ich das auf irgendeine Weise tun?

Ich kann die Schaltfläche "Senden" nicht ändern, da sie Teil eines benutzerdefinierten Steuerelements ist.

Im Gegensatz zu den anderen Antworten ist die Rückgabe falsenur ein Teil der Antwort. Stellen Sie sich das Szenario vor, in dem ein JS-Fehler vor der return-Anweisung auftritt ...

html

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

Skript

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

Die Rückkehr falsehierher wird nicht ausgeführt und das Formular wird in beiden Fällen gesendet. Sie sollten auch aufrufen preventDefault, um die Standardformularaktion für Ajax-Formularübermittlungen zu verhindern.

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

In diesem Fall wird das Formular trotz des Fehlers nicht gesendet!

Alternativ try...catchkönnte ein Block verwendet werden.

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

Sie können ein Inline-Ereignis onsubmitwie dieses verwenden

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

Oder

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

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

Demo

Dies ist möglicherweise keine gute Idee, wenn Sie große Projekte durchführen. Möglicherweise müssen Sie Ereignis-Listener verwenden.

Bitte lesen Sie mehr über Inline - Events vs Ereignis - Listener (addEventListener und IE attachEvent) hier . Denn ich kann es nicht mehr erklären als Chris Baker .

Beide sind korrekt, aber keiner von ihnen ist per se "am besten", und es kann einen Grund geben, warum der Entwickler beide Ansätze gewählt hat.

Hängen Sie einen Ereignis-Listener mit dem Formular an .addEventListener()und rufen Sie die .preventDefault()Methode auf 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>

Ich denke, es ist eine bessere Lösung als die Definition eines submitEreignishandlers in Übereinstimmung mit dem onsubmitAttribut, da es die Logik und Struktur der Webseite trennt. Es ist viel einfacher, ein Projekt zu verwalten, bei dem Logik von HTML getrennt ist. Siehe: Unauffälliges JavaScript .

Die Verwendung der .onsubmitEigenschaft des formDOM-Objekts ist keine gute Idee, da dadurch verhindert wird, dass Sie einem Element mehrere Übermittlungsrückrufe hinzufügen. Siehe addEventListener vs onclick .

Probier diese...

HTML Quelltext

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

jQuery-Code

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

oder

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

Folgendes funktioniert ab sofort (getestet in Chrom und Firefox):

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

Dabei ist validateMyForm () eine Funktion, die zurückgegeben wird, falsewenn die Validierung fehlschlägt. Der entscheidende Punkt ist die Verwendung des Namens event. Wir können zB nicht verwendene.preventDefault()

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

Um unauffällige JavaScript- Programmierkonventionen zu befolgen und abhängig davon, wie schnell das DOM geladen wird, empfiehlt es sich möglicherweise, Folgendes zu verwenden:

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

Verbinden Sie dann Ereignisse mit dem Onload oder DOM bereit, wenn Sie eine Bibliothek verwenden.

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

Außerdem würde ich immer das actionAttribut verwenden, da bei einigen Leuten möglicherweise ein Plugin wie NoScript ausgeführt wird, das dann die Validierung unterbricht. Wenn Sie das Aktionsattribut verwenden, wird Ihr Benutzer zumindest vom Server basierend auf der Backend-Validierung umgeleitet. Wenn Sie dagegen so etwas verwenden window.location, werden die Dinge schlecht.

Um zu verhindern, dass das Formular eingereicht wird, müssen Sie dies nur tun.

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

Durch die Verwendung des obigen Codes wird das Senden Ihres Formulars verhindert.

Hier meine Antwort:

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

    return false;
}
</script>

Ich füge event.preventDefault();auf onsubmitund es funktioniert.

Sie können dem Formular eventListner hinzufügen und Formulardaten wie folgt preventDefault()in JSON konvertieren:

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>