it-swarm.com.de

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

Ich habe eine Schaltfläche (<input type="submit">). Wenn darauf geklickt wird, wird die Seite neu geladen. Da ich einige Funktionen von jQuery hide() habe, die beim Laden einer Seite aufgerufen werden, werden diese Elemente wieder ausgeblendet. Wie bringe ich die Schaltfläche dazu, nichts zu tun, damit ich noch eine Aktion hinzufügen kann, die beim Klicken auf die Schaltfläche ausgeführt wird, aber die Seite nicht neu lädt.

100
Ankur

es besteht keine Notwendigkeit, js oder jquery. Um das Neuladen 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 das Neuladen der Seite zu veranlassen.

 <button type='button'>submit</button> 
187
Jafar Rasooli

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

78
Andrew Hare

In HTML:

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

um ein aktualisieren aller "buttons" zu vermeiden, auch wenn ein onclick zugewiesen ist.

17
user2868288

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; });
14
Chris Gutierrez

In HTML:

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

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

13
pestilence669

Sie können ein Formular verwenden, das eine Senden-Schaltfläche 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 (begraben) 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 automatisch aktualisiert.

3
CommonCoreTawan

Ich kann noch keinen Kommentar abgeben, daher poste ich dies als Antwort. Der beste Weg, ein erneutes Laden zu vermeiden, ist, wie @ user2868288 sagte: Verwenden des onsubmit auf dem form -Tag.

Von allen anderen hier erwähnten Möglichkeiten ist es die einzige Möglichkeit, die neue Validierung der HTML5-Browserdateneingabe auszulösen (<button> macht das nicht und die jQuery/JS-Handler) und ermöglichen es, dass Ihre dynamischen jQuery/AJAX-Informationen an die Seite angehängt werden. 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>
2
Gusstavv Gil