AJAX-Formular senden ohne Aktualisierungsfehler

Question

Ich habe ein Formular in AJAX funktioniert, aber wenn ich mehr als ein Formular auf der gleichen Seite haben, erscheint ein Fehler.

<script> 
    var fmx = jQuery.noConflict(); 
    fmx(document).ready(function(){ 
    fmx('form').on('submit', function (e) { 
     e.preventDefault(); 
     fmx.ajax({ 
     type: 'post', 
     url: 'https://www.webshop.com/post.php', 
     data: fmx('form').serialize(), 
     success: function() { 
      document.getElementById('#form_post').style.display = 'none'; 
      document.getElementById('#form_result').style.display = ''; 
     } 
     }); 
    }); 
    }); 
</script> 
<div id="#form_post" style="display:inherit"> 
<form class="form_post"> 
    <label for="post_email">FORM</label> 
    <input id="post_email" class="post_email" type="email" name="post_email" placeholder="your@email.com" required> 
    <input id="post_data" class="post_data" type="text" name="post_data" placeholder="MSG" required> 
    <input name="submit" type="submit" value="POST" > 
</form> 
</div> 
<div id="#form_result" style="display:none"><br>Success.</div> 

Ich habe versucht, einen #id zu wechseln, aber es funktioniert nicht mehr.

<script> 
    var fmx = jQuery.noConflict(); 
    fmx(document).ready(function(){ 
    fmx('#form').on('submit', function (e) { 
     e.preventDefault(); 
     fmx.ajax({ 
     type: 'post', 
     url: 'https://www.webshop.com/post.php', 
     data: fmx('#form').serialize(), 
     success: function() { 
      document.getElementById('#form_post').style.display = 'none'; 
      document.getElementById('#form_result').style.display = ''; 
     } 
     }); 
    }); 
    }); 
</script> 
<form class="form_post" id="form"> 

Wie ein ID auf diesem Formular do setzen?

Answer 1

Die erste Methode würde den Listener für alle auf der Seite gefundenen Formulare implementieren.

$('form').on('submit',function(){ 

    // All forms targeted 

}) 

Die zweite Methode funktioniert wahrscheinlich nicht, da auf der Seite ein ID-Konflikt vorliegt.

IDs sind eindeutig und können nur einmal in HTML verwendet werden. Der zweite Codeblock richtet den gewünschten HTML-Code korrekt aus und der Code sucht nach einem Formular mit der ID "#form".

Dieses Formular existiert und die ID ist in der Tat #form, so dass es einen Konflikt geben muss.

Answer 2

var fmx = jQuery.noConflict(); 
fmx(document).ready(function() { 
    fmx('form').on('submit', function(e) { 
    e.preventDefault(); 
    var form = this; 
    fmx.ajax({ 
     type: 'post', 
     url: 'https://www.webshop.com/post.php', 
     data: fmx(form).serialize(), 
     success: function() { 
     form.style.display = 'none'; 
     form.style.display = ''; 
     } 
    }); 
    }); 
}); 

der Lage sein, Dies kann mit mehreren Formularen auf der Seite zu arbeiten, durch die Form zu manipulieren, die mit this abgegeben wurden, die wir form Einstellung sind.

Wie bereits erwähnt, können Sie eine ID nicht mehr als einmal im HTML-Code verwenden, da sie sonst das Element, das sie kennzeichnet, nicht eindeutig identifizieren. Wenn Sie also auf zwei oder mehr Vorkommen von etwas abzielen möchten, müssen Sie stattdessen eine Klasse verwenden.

Wenn Sie die Tatsache umgehen können, dass Sie Zugriff auf das DOM-Objekt haben (über this), das das Ereignis ausgelöst hat (in diesem Fall eines Ihrer Formulare), können Sie es in verwenden das Skript.

Beachten Sie, dass beim Ändern von Bereichen (wie in der Callback-Funktion success) this eine Referenz auf etwas anderes ist. Sie müssen es also so zuweisen, wie wir es mit var form = this; in dem Moment getan haben, als das Formular abgeschickt wurde.