Popup -Formular für benutzerdefinierte WordPress -Artikeln mit AJAX -Einreichungshandbuch

In diesem Tutorial wird das Listenelement jedes benutzerdefinierten Beitragstyps (z. B. "Immobilien") in WordPress und ein benutzerdefiniertes HTML -Formular mit einer bestimmten Post -ID angezeigt, nachdem nach dem Klicken auf darauf geklickt wird. Der Artikel behandelt das Erstellen modaler Popups mithilfe des Jquery UI -Dialogfelds, übergeben Sie die Artikel -ID dynamisch über Datenattribute und verwenden den WordPress -AJAX -Mechanismus, um die asynchrone Einreichung von Formularen zu implementieren, während die Datei -Uploads verarbeitet und die Einreichungsergebnisse angezeigt werden.

1. Übersicht und Kernanforderungen

In der WordPress -Entwicklung müssen wir häufig spezifische interaktive Funktionen für jeden Eintrag auf der Artikellistenseite bereitstellen. Dieses Tutorial zielt darauf ab, die folgenden Kernanforderungen zu erfüllen:

• Fügen Sie in der Schleifenliste der benutzerdefinierten Post -Typen wie Eigenschaften eine Schaltfläche "Anführungszeichen für jeden Beitrag" hinzu.
• Nach dem Klicken auf die Schaltfläche wird ein modales Formular angezeigt.
• Das Formular sollte die ID des aktuellen Artikels als verstecktes Feld enthalten, das einem bestimmten Artikel bei der Einreichung zugeordnet ist.
• Der Formularübermittlungsprozess sollte asynchron über AJAX abgeschlossen werden, um die Aktualisierung und Anzeige von Erfolgs- oder Fehlermeldungen in Popup-Fenstern zu vermeiden.
• Das Formular unterstützt die Datei -Upload -Funktion.

Wir werden WordPress-integrierte Funktionen, die JQuery UI-Dialogbibliothek und die AJAX-Technologie verwenden, um dies zu erreichen.

2. HTML -Struktur: Schaltflächen und Formen

Zunächst müssen wir die Schaltfläche in der WordPress -Artikelschleife festlegen und eine Formularstruktur für Popups auf der Seite platzieren.

2.1 Tasten in der Artikelschleife

Fügen Sie in Ihrer benutzerdefinierten Post-Typ-Vorlagendatei (z. B. Archive-Property.php oder mit WP_QUERY erstellten Seiten) eine Schaltfläche für jeden Beitrag hinzu, während Sie den Beitrag durch den Beitrag iteriert und die Post-ID und den Titel über die Datenattribut von HTML5 speichern.

  Php
// Angenommen, Sie befinden sich in einer Schleife mit benutzerdefinierten Artikelsart 'Eigenschaft' $ args = array (
    'post_type' => 'Eigenschaft',
    'posts_per_page' => -1, // Alle Beiträge 'post_status' => 'veröffentlichen'
);
$ the_query = new WP_Query ($ args);

if ($ the_query-> Have_posts ()):
    while ($ the_Query-> Have_posts ()): $ the_query-> the_post ();
        $ post_id = get_the_id ();
        $ post_title = get_the_title ();
?>
        <div class="Property-item">
            <h2>  php echo esc_html ($ post_title); ?> </h2>
            <p> Artikel -ID:  Php Echo ESC_HTML ($ post_id); ?> </p>
            

            <button class="btn btn-primary subser-ohrfer-btn" data-post-id="<? php echo esc_attr ($ post_id);?>" data-post-title="<? php echo esc_attr ($ post_title);?>">
                Senden Sie ein Angebot </button>
        </div>
 Php
    Ende;
    wp_reset_postdata (); // Abfrage woanders zurücksetzen:
    Echo '<p> Es wurden keine Immobilieninformationen gefunden. </p> ';
endif;
?>

veranschaulichen:

• Die Subulations-Afffer-BTN-Klasse wird in JavaScript-Selektoren verwendet.
• Die Attribute für Datenpost-ID und Data-Post-Title werden verwendet, um die ID und den Titel des aktuellen Beitrags zu speichern, und JavaScript erhält die Daten über diese Attribute.

2.2 HTML-Struktur der Pop-up-Form

Platzieren Sie Ihre vollständige Form in einem versteckten Div -Container, der nur einmal auf der Seite und nicht in der Schleife angezeigt werden sollte. Diese DIV wird vom Jquery UI-Dialog in ein Popup-Fenster umgewandelt.

 <div id="offerFormDialog" style="display: keine;">
    <h2 class="Text-Center"> Senden Sie Ihre Zitat </h2>
    <form id="offerForm" methode="post" engtype="MultiPart/Form-Data"> ">"> ">"> ">">
        <div class="Form-Gruppenzeile">
            <label class="col-md-12" f>  PHP ESC_HTML_E ('Name', 'IVProperty'); ?> <span class="Red-Star">*</span> </label>
            <input class="col-md-12" id="name" name="name" type="text" erforderlich>
        </div>
        <div class="Form-Gruppenzeile">
            <label f class="col-md-12">  PHP ESC_HTML_E ('E-Mail', 'IVProperty'); ?> <span class="Red-Star">*</span> </label>
            <input class="col-md-12" name="E-Mail" typ="E-Mail" erforderlich>
        </div>
        <div class="Form-Gruppenzeile">
            <label f class="col-md-12">  PHP ESC_HTML_E ('Preis', 'IVProperty'); ?> <span class="Red-Star">*</span> </label>
            <eingabe class="col-md-12" name="preis" type="number" erforderlich>
        </eingabe>
</div>
        <div class="Form-Gruppenzeile">
            <label f class="col-md-12">  php esc_html_e ('Kauftyp', 'ivProperty'); ?> <span class="Red-Star">*</span> </label>
            <select class="col-md-12" name="bauf_type" erforderlich>
                <option deaktiviert ausgew wert> - Wählen Sie eine Option aus - </option>
                <option value="Cash"> Cash </option>
                <option value="Konventionelles Darlehen"> konventionelles Darlehen </option>
                <option value="FHA -Kredit"> FHA -Darlehen </option>
                <option value="MSHDA -konventionelles Darlehen"> MSHDA Konventionelles Darlehen </option>
                <option value="MSHDA FHA -Kredit"> MSHDA FHA -Kredit </option>
                <option value="Landvertrag"> Landvertrag </option>
            </select>
        </div>
        <div class="Form-Gruppenzeile">
            <label f>  php esc_html_e ('Schließdatum', 'IVProperty'); ?> <span class="Red-Star">*</span> </label>
            <input class="col-md-12 DATE_BOX" name="condition_date" type="Datum" erforderlich>
        </div>
        <div class="Form-Gruppenzeile">
            <label f>  php ESC_HTML_E ('Konzessionenmenge', 'IVProperty'); ?> </label>
            <eingabe class="col-md-12" name="Concessions_amount" typ="Nummer">
        </eingabe>
</div>
        <div class="Form-Gruppenzeile">
            <label f class="col-md-12">  php ESC_HTML_E ('Inspektionsperiode', 'IVProperty'); ?> <span class="Red-Star">*</span> </label>
            <input class="col-MD-6 DATE_BOX" name="inspir_from" type="Datum" erforderlich>
            <input class="col-MD-6 DATE_BOX" name="inspir_to" type="Datum" erforderlich>
        </div>
        <div class="Form-Gruppenzeile">
            <label f class="col-md-12">  php esc_html_e ('Verkäufer-Belegung & Gebühr', 'IVProperty'); ?> </label>
            <input class="col-MD-6" name="seller_occupancy" type="text" placeholder="Belegung">
            <input class="col-md-6" name="seller_chary" type="number" placeholder="lader">
        </div>
        <div class="Form-Gruppenzeile">
            <label for="emd" class="col-md-12">  php ESC_HTML_E ('emd', 'ivProperty'); ?> <span class="Red-Star">*</span> </label>
            <eingabe class="col-md-12" name="emd" type="number" placeholder="Earnest Money Deposit" erforderlich>
        </eingabe>
</div>
        <div class="Form-Gruppenzeile">
            <label f class="col-md-12">  php ESC_HTML_E ('Home Garantie', 'IVProperty'); ?> <span class="Red-Star">*</span> </label>
            <select class="col-md-12" name="home_warranty" erforderlich>
                <option deaktiviert ausgew wert> - Wählen Sie eine Option aus - </option>
                <option value="Ja"> Ja </option>
                <option value="no"> no </option>
            </select>
        </div>
        <div class="Form-Gruppenzeile">
            <label f class="col-md-12">  php ESC_HTML_E ('Attachment', 'IVProperty'); ?> </label>
            <eingabe type="Datei" name="Attachment">
        </eingabe>
</div>

        
        <eingabe type="Hidden" name="Property_id" id="Property_id_hidden_field" value="">

        
        <div id="form_messages" style="margin-top: 15px;"> </div>

        <div class="Modal-Footer">
            <eingabe type="subieren" name="submit_offers" class="btn btn-secondary col-md-12 ml-2">
        </eingabe>
</div>
    </eingabe>
</form>
</div>

veranschaulichen:

• ID = "OfferFormDialog" ist der eindeutige Kennung des Pop-up-Containers.
• style = "display: keine;" Stellen Sie sicher, dass das Popup beim Laden der Seite verborgen ist.
• ID = "Property_id_hidden_field" ist ein verstecktes Feld, dessen Wert durch JavaScript dynamisch gefüllt wird, wenn das Popup-Fenster geöffnet wird.
• ID = "Form_Messages" wird verwendet, um Erfolg oder Fehlermeldungen nach AJAX -Einreichung anzuzeigen.

3.. JavaScript/JQuery: Popup-Fenstersteuerung und AJAX-Einreichung

Wir werden JQuery UI -Dialog verwenden, um die Bombe zu erstellen

Das obige ist der detaillierte Inhalt vonPopup -Formular für benutzerdefinierte WordPress -Artikeln mit AJAX -Einreichungshandbuch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!