Wie mache ich eine HTML-Schaltfläche, um die Seite nicht neu zu laden?

Ich habe einen Knopf ( <input type="submit">). Wenn darauf geklickt wird, wird die Seite neu geladen. Da ich einige jQuery- hide()Funktionen habe, die beim Laden der Seite aufgerufen werden, werden diese Elemente wieder ausgeblendet. Wie kann ich die Schaltfläche dazu bringen, nichts zu tun, sodass ich dennoch eine Aktion hinzufügen kann, die auftritt, wenn auf die Schaltfläche geklickt wird, die Seite jedoch nicht neu geladen wird.

Es besteht keine Notwendigkeit für js oder jquery. Um das erneute Laden der Seite zu stoppen, geben Sie einfach den Schaltflächentyp als "Schaltfläche" an. Wenn Sie den Schaltflächentyp nicht angeben, setzt der Browser ihn auf "Zurücksetzen" oder "Senden", um die Seite neu zu laden.

 <button type='button'>submit</button> 

Verwenden Sie entweder das <button>Element oder ein <input type="button"/>.

In HTML:

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

um eine Aktualisierung aller "Schaltflächen" zu vermeiden, auch wenn ein Klick zugewiesen ist.

Sie können der Schaltfläche mit jQuery einen Klick-Handler hinzufügen und false zurückgeben.

$("input[type='submit']").click(function() { return false; });

oder

$("form").submit(function() { return false; });

In HTML:

<input type="submit" onclick="return false">

Mit jQuery eine ähnliche Variante, die bereits erwähnt wurde.

Sie können ein Formular verwenden, das eine Schaltfläche zum Senden enthält. Verwenden Sie dann jQuery, um das Standardverhalten eines Formulars zu verhindern:

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

Wie in einem der obigen Kommentare (vergraben) angegeben, kann dies behoben werden, indem das Schaltflächen-Tag nicht innerhalb des Formular-Tags platziert wird. Wenn sich die Schaltfläche außerhalb des Formulars befindet, wird die Seite nicht selbst aktualisiert.

Ich kann noch keinen Kommentar abgeben, daher poste ich dies als Antwort. Der beste Weg, um ein erneutes Laden zu vermeiden, ist, wie @ user2868288 sagte: Verwenden des onsubmitauf dem formTag.

Von allen anderen hier genannten Möglichkeiten ist dies die einzige Möglichkeit, mit der die neue Validierung der HTML5-Browser-Dateneingabe ausgelöst werden kann (dies <button>wird weder bei den jQuery / JS-Handlern der Fall sein), noch können Ihre dynamischen jQuery / AJAX-Informationen an das angehängt werden Seite. Beispielsweise:

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
            tel1: tel,
            email1: email
        })
        .done(function(data) {
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") {
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            }
        })
        .fail(function(xhr, textStatus, errorThrown) { 
            $('#lblEstatus').append("Error. Try later."); 
        });
     });
   }); 
</script>