Verhindern, dass Bild geladen wird, bis das Formular vollständig ist

Question

Ich erstelle eine Site, die erfordert, dass der Client auf eine Senden-Schaltfläche klickt. Diese Website enthält HTML-Auswahlmenüs und Eingabefelder.

Diese Informationen werden dann an eine PHP-Datei übergeben, die die Daten dann an eine MySQL-Datenbank weiterleitet.

Ich habe einen Code hinzugefügt, um ein Ladebild zu aktivieren, wenn auf die Senden-Schaltfläche geklickt wird. Aber derzeit kann der Benutzer auf "Senden" klicken, ohne das Formular auszufüllen, und die Lade-Nachricht erscheint ebenso wie eine Nachricht, die den Benutzer anweist, Daten in die fehlenden Felder einzugeben.

Was ich möchte, ist für die Lade-Nachricht NUR erscheinen, sobald das Formular ausgefüllt wurde und wenn die Daten die PHP-Datei übergeben wird.

Ich habe diese grob verspottet unten in einem JSFiddle up besser zu erklären, was ich sage:

Link

JSFiddle offensichtlich einen POST-Fehler wirft, aber auf meiner Seite offensichtlich die Daten geschrieben und dieser Fehler existiert nicht, also ignoriere ihn.

HTML:

<form onsubmit="myButton.disabled = true; return true;"> 
<label for='name'> 
    Please Enter Your Name: 
</label><br> 

<input class="label" type="text" name="name" placeholder="Click/Tap here..." required><br><br> 

<label for='urgency'>Urgency</label><br> 
<select type="select" name="urgency" select id="urgency" required> 
    <option value="" disabled selected hidden>Please specify an urgency...</option> 
    <option value="1">1 - Least Urgent</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select><br><br> 

<span> 
    <button type="submit" name='myButton' value="submit" id="submit">Submit</button> 
    <button type="reset" value="Reset">Reset</button><br> 
</span> 

<div id="loader" style="display:none;"><br> 
    <label> 
     Please Wait... 
    </label> 
    <img src="ajax-loader.gif" alt="Loading" /> 
</div> 
</form> 

JQuery:

$('#submit').click(function(e){ 
$('#loader').toggle(); 
}); 

Answer 1

1. Sie verdrahten nicht den Absenden-Button. Stattdessen nutzen die Veranstaltung einreichen
2. verwenden Sie nicht als ID oder Namen einreichen
3. die ID der Schaltfläche verwenden, wenn
benötigt

---

$('#formID').on("submit",function(e){ 
    var empty = false; 
    $("input:required",this).each(function() { 
    if (!$.trim($(this).val())) { 
     empty=true; 
     return false; // leave 
    }  
    }); 
    if (empty) { 
    e.preventDefault(); 
    } 
    else { 
    $('#loader').toggle(); 
    $("#myButton").attr("disabled",true); 
    } 
}); 

Answer 2

Sie könnten das Hin- und Herschalten der Laden von Bildern auf den Griff einreichen Ereignis (was wahrscheinlich ist, wo Sie Ihre AJAX'ing tun):

$('form').on('submit',function(){ 
    $('#loader').toggle(); 
}); 

die einreichen Veranstaltung wird nicht bis zur fo Feuer RM-Felder sind gültig. Sie müssen es an anderer Stelle "aus", fx. die "Erfolg" - und "Fehler" -Rückrufe der AJAX-Funktion.

Ich hoffe, es hilft.