Benutzerdefinierte WordPress + PHP + MYSQL + AJAX-Formular, senden Ereignis nicht von Javascript erfasst, aber führt POST-Daten an die DB

Ich erstelle ein kleines Formular, damit Nutzer ihre Kontaktinformationen außerhalb der normalen WordPress-Benutzerverwaltungssysteme aktualisieren können. Ich plane, ein einfaches CRUD-Setup zu verwenden und einige sanitäre Einrichtungen einzubauen. Ich habe die ursprüngliche Einfüge / Erstellungsfunktion, die mit den $ wpdb-functionen erstellt wurde, und das Formular schreibt korrekt in die database. Allerdings wird mein Javascript nicht aufgerufen, wenn ich mein Formular abschicke. Die Javascript-Datei erfasst das Submit-Ereignis nicht und das Formular sendet die Daten direkt an die PHP-processordatei. Ich kratze mich hier am Kopf.

Herunterfahren des Problems, Play-by-Play: 1. Das Formular wird übermittelt, aber der Benutzer wird auf eine Seite mit den JSON-codierten Daten in einem Array umgeleitet. 2. Die Javascript-Datei, die meine Fehlerverarbeitung und Ajax-Aufrufe enthält, wird nie berührt. 3. Die Javascript-Datei erfasst das Submit-Ereignis nicht. 4. Das Formular wird immer noch in die DB geschrieben, nehme ich an, weil die POST-Methode in der PHP-Datei in der Formularaktion aufgerufen wird.

HINWEIS: Ich füge die .js-Datei mit wp_enqueue_script in meine functions-Datei ein, wird dies jedoch höchstwahrscheinlich nur dann ändern, wenn die Seite mit diesem Formular geladen wird, um die Ladezeiten zu verkürzen. Ich glaube nicht, dass das Laden der JavaScript-Datei auf diese Weise irgendetwas ändern sollte.

PHP Verarbeitung:

insert( $table_name, array( 'first_name' => $_POST['first_name'], 'last_name' => $_POST['last_name'], 'address' => $_POST['address'], 'address2' => $_POST['address2'], 'city' => $_POST['city'], 'state' => $_POST['state'], 'zip' => $_POST['zip'], 'phone' => $_POST['phone'], 'email' => $_POST['email'], 'time' => current_time('mysql', 1) ) ); } // show a message of success and provide a true success variable $data['success'] = true; $data['message'] = 'Success!'; } // return all our data to an AJAX call echo json_encode($data); ?> 

Das Formular / HTML:

 <form method="POST" action="" name="alumni-update" id="alumni-update"> 
  • First Name
  • Last Name
  • Street Address
  • Apt, Unit, Ste #, etc
  • City
  • State
    Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District Of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming
  • Zip
  • Phone
  • Email
  • Javascript

     // .js document to capture the Submit event from the form and send back errors asychronously $(document).ready(function() { // process the form $('form').submit(function(event) { event.preventDefault(); $('.form-group').removeClass('has-error'); // remove the error class $('.help-block').remove(); // remove the error text // get the form data // there are many ways to get this data using jQuery (you can use the class or id also) var formData = { 'email' : $('input[name=email]').val(), 'address' : $('input[name=address]').val(), 'phone' : $('input[name=phone]').val(), 'city' : $('input[name=city]').val(), 'state' : $('input[name=state]').val(), 'first_name' : $('input[name=first_name]').val(), 'last_name' : $('input[name=last_name').val(), 'zip' : $('input[name=zip]').val() }; // process the form $.ajax({ type : 'POST', // define the type of HTTP verb we want to use (POST for our form) url : 'http://localhost/wordpress/wp-content/plugins/alumni/alumni_update.php', // the url where we want to POST data : formData, // our data object dataType : 'json', // what type of data do we expect back from the server encode : true }) // using the done promise callback .done(function(data) { // log data to the console so we can see console.log(data); // here we will handle errors and validation messages if ( ! data.success) { // handle errors for fist name --------------- if (data.errors.first_name) { $('#first_name').addClass('has-error'); // add the error class to show red input $('#first_name').append('
    ' + data.errors.first_name + '
    '); // add the actual error message under our input } // handle errors for last name --------------- if (data.errors.last_name) { $('#last_name').addClass('has-error'); // add the error class to show red input $('#last_name').append('
    ' + data.errors.last_name + '
    '); // add the actual error message under our input } // handle errors for city--------------- if (data.errors.city) { $('#city').addClass('has-error'); // add the error class to show red input $('#city').append('
    ' + data.errors.city + '
    '); // add the actual error message under our input } // handle errors for last name --------------- if (data.errors.state) { $('#state').addClass('has-error'); // add the error class to show red input $('#state').append('
    ' + data.errors.state + '
    '); // add the actual error message under our input } // handle errors for phone --------------- if (data.errors.phone) { $('#phone').addClass('has-error'); // add the error class to show red input $('#phone').append('
    ' + data.errors.phone + '
    '); // add the actual error message under our input } // handle errors for address --------------- if (data.errors.address) { $('#address').addClass('has-error'); // add the error class to show red input $('#address').append('
    ' + data.errors.address + '
    '); // add the actual error message under our input } // handle errors for zip --------------- if (data.errors.zip) { $('#zip').addClass('has-error'); // add the error class to show red input $('#zip').append('
    ' + data.errors.zip + '
    '); // add the actual error message under our input } // handle errors for email --------------- if (data.errors.email) { $('#email').addClass('has-error'); // add the error class to show red input $('#email').append('
    ' + data.errors.email + '
    '); // add the actual error message under our input } } else { // ALL GOOD! just show the success message! $('form').append('
    ' + data.message + '
    '); // usually after form submission, you'll want to redirect // window.location = '/thank-you'; // redirect a user to another page alert('success'); // for now we'll just alert the user } }); // stop the form from submitting the normal way and refreshing the page event.preventDefault(); }); });

    Solutions Collecting From Web of "Benutzerdefinierte WordPress + PHP + MYSQL + AJAX-Formular, senden Ereignis nicht von Javascript erfasst, aber führt POST-Daten an die DB"

    Wenn Sie dies als Plugin veröffentlichen, müssen Sie unbedingt die AJAX-API verwenden. Es ist super einfach:

     /** * Handle the request and return the result. */ function alumni_process_request() { global $wpdb; // All your processing code from your original question, except for loading WordPress! return $data; } /** * AJAX handler for the "alumni" action. */ function alumni_ajax_handler() { global $wpdb; $data = alumni_process_request(); header( 'Content-Type: application/json; charset=' . get_bloginfo( 'charset' ) ); echo json_encode( $data ); exit; } add_action( 'wp_ajax_nopriv_alumni', 'alumni_ajax_handler' ); add_action( 'wp_ajax_alumni', 'alumni_ajax_handler' ); 

    Das sind die Grundlagen. Jetzt müssen wir sicherstellen, dass wir unser JavaScript korrekt laden, um sicherzustellen, dass jQuery geladen ist, und eine globale JavaScript-Variable, die die URL für den WordPress AJAX-Handler enthält:

     function alumni_enqueue_script() { wp_enqueue_script( 'alumni', plugins_url( 'path/to/script.js', __FILE__ ), // URL path relative to the folder of the PHP script this code is placed in array( 'jquery' ) // Requires jQuery, make sure it's loaded first ); wp_localize_script( 'alumni', // Name of script, from above 'alumni', // Name of JavaScript variable array( 'ajaxUrl' => admin_url( 'admin-ajax.php' ), ) ); } add_action( 'wp_enqueue_scripts', 'alumni_enqueue_script' ); 

    Und jetzt für das JavaScript:

     !function( $ ) { // Self-executing function closure, will ensure $ is jQuery - might be running in noConflict mode $( document ).ready( function() { $( "#alumni-update" ).submit( // Don't bind to all forms, just ours function ( event ) { event.preventDefault(); $('.form-group').removeClass('has-error'); // remove the error class $('.help-block').remove(); // remove the error text var data = $( this ).serializeArray(); // Will automatically grab all form fields and data data.push({ name : "create", value: "1" }); data.push({ name : "action", value: "alumni" // This parameter needs to match the wp_ajax_* hook. }); $.post( alumni.ajaxUrl, // Use our JavaScript variable "alumni" we defined in wp_localize_script() data, // POST data function ( data ) { // Your form handling } ); } ) } ); }( jQuery ); 

    Das obige nimmt eine Plugin-Struktur wie folgt an:

     plugin-folder/plugin.php - PHP code plugin-folder/path/to/script.js - JavaScript