wake-up-neo.com

Wie kann ich verhindern, dass das Formular gesendet wird?

Ich habe ein Formular, das irgendwo einen Senden-Button enthält.

Allerdings möchte ich das Submit-Event irgendwie "fangen" und verhindern, dass es auftritt.

Gibt es eine Möglichkeit, dies zu tun?

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

javascripthtmlforms
193
Nathan Osman

Im Gegensatz zu den anderen Antworten ist return false nur part der Antwort. Betrachten Sie das Szenario, in dem ein JS-Fehler vor der return-Anweisung auftritt ...

html 

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

Skript 

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

das Zurückgeben von false wird hier nicht ausgeführt und das Formular wird in beide Richtungen gesendet. Sie sollten auch preventDefault aufrufen, um die Standard-Formularaktion für Ajax-Formularübergaben zu verhindern.

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

In diesem Fall wird das Formular auch mit dem Fehler nicht gesendet!

Alternativ könnte ein try...catch-Block verwendet werden.

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

Sie können das Inline-Ereignis onsubmit wie folgt 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

Nun, dies ist möglicherweise keine gute Idee für große Projekte. Eventuell müssen Sie Ereignislistener verwenden.

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

Beide sind richtig, aber keines von ihnen ist per se "am besten", und es kann sein, dass Ein Grund, warum sich der Entwickler für beide Ansätze entschieden hat.

130
Reigel

Hängen Sie mit .addEventListener() einen Ereignis-Listener an das Formular und rufen Sie dann die .preventDefault() -Methode für event auf:

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 einen submit-Ereignishandler inline mit dem onsubmit-Attribut zu definieren, da er Logik und Struktur der Webseiten voneinander trennt. Es ist viel einfacher, ein Projekt zu verwalten, bei dem die Logik von HTML getrennt ist. Siehe: Unauffälliges JavaScript .

Die Verwendung der .onsubmit-Eigenschaft des form-DOM-Objekts ist keine gute Idee, da Sie das Anhängen mehrerer Übermittlungsrückrufe an ein Element verhindern. Siehe addEventListener vs onclick .

82
Michał Perłakowski

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

Folgendes funktioniert ab sofort (getestet in chrome und firefox):

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

dabei ist validateMyForm () eine Funktion, die false zurückgibt, wenn die Validierung fehlschlägt. Der Schlüsselpunkt ist die Verwendung des Namens event. Wir können nicht für z. e.preventDefault()

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

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(); zu onsubmit hinzu und es funktioniert.

0
yozawiratama

Sie können dem Formular eventListner hinzufügen, das preventDefault() und Formulardaten wie folgt 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>
0
Hasan A Yousef

Um den unauffälligen JavaScript - Programmierkonventionen zu folgen und abhängig davon, wie schnell der DOM geladen wird, kann es sinnvoll sein, Folgendes anzuwenden:

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

Verbinden Sie Ereignisse dann mithilfe von onload oder DOM ready, 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>

Ich würde auch immer das action-Attribut verwenden, da manche Leute ein Plugin wie NoScript haben, das dann die Validierung durchbricht. Wenn Sie das Aktionsattribut verwenden, wird Ihr Benutzer mindestens vom Server basierend auf der Backend-Überprüfung umgeleitet. Wenn Sie etwas wie window.location verwenden, werden die Dinge schlecht.

0
user3423894

Um das Senden von Formularen zu verhindern, müssen Sie dies nur tun.

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

Durch die Verwendung des obigen Codes wird die Übermittlung des Formulars verhindert.

0
Zuhair Taha