javascript - jQuery form submit event is not caught -
note: have posted @ wordpress stack exchange received no help, posting here in hopes of getting answer.
i'm building little form let users update contact information outside of vanilla wordpress user management systems. plan use simple crud setup , throw in sanitation. i've got initial insert/create function built using $wpdb functions , form write database correctly. however, javascript isn't getting called when submit form. javascript file doesn't capture submit event , form posts data straight php processor file. i'm scratching head here.
run down of issue, play-by-play:
- form submits, user redirected page json encoded data in array.
- the javascript file contains error processing , ajax calls never touched.
- the javascript file not capture submit event.
- the form still written db, assume because post method being called on php file in form action.
note: including .js file using wp_enqueue_script in functions file, change included when page form loaded, cut down on load times. don't think loading javascript file way should change anything.
php processing:
<?php # db crud commands updating table alumni contact info /* wordpress db globals, require wp-load bring in useful functions */ $parse_uri = explode( 'wp-content', $_server['script_filename'] ); require_once( $parse_uri[0] . 'wp-load.php' ); global $wpdb; $errors = array(); // array hold validation errors $data = array(); // array pass data /*ensure no fields empty, , if are, return $errors array encoded in json */ if (empty($_post['first_name'])) $errors['first_name'] = 'first name required.'; if (empty($_post['last_name'])) $errors['last_name'] = 'last name required.'; if (empty($_post['email'])) $errors['email'] = 'email required.'; if (empty($_post['phone'])) $errors['phone'] = 'a phone number required.'; if (empty($_post['address'])) $errors['address'] = 'a mailing address required.'; if (empty($_post['city'])) $errors['city'] = 'please enter city mailing address.'; if (empty($_post['zip'])) $errors['zip'] = 'your zip code required.'; if (empty($_post['state'])) $errors['state'] = 'please select state.'; // return response =========================================================== // if there errors in our errors array, return success boolean of false if ( ! empty($errors)) { // if there items in our errors array, return errors $data['success'] = false; $data['errors'] = $errors; } else { // if there no errors process our form, return message /* set proper table name variable */ $table_name = "wp_alumni"; /* use insert function write data table * called on form submit when user adds contact info * alumni database using on-page form. * button name = submit used check 'if isset' * , perform update function */ if (isset($_post['create'])) { $wpdb->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 message of success , provide true success variable $data['success'] = true; $data['message'] = 'success!'; } // return our data ajax call echo json_encode($data); ?> the form/html:
<form method="post" action="<?php echo plugins_url( 'alumni/alumni_update.php' ); ?>" name="alumni-update" id="alumni-update"> <div id="alumni-form-column"> <li> <span class="alumni-span">first name</span><br /> <input id="first_name" type="text" name="first_name" class="alumni-input" /> </li> <li> <span class="alumni-span"> last name</span><br /> <input id="last_name" type="text" name="last_name" class="alumni-input" /> </li> <li> <span class="alumni-span">street address</span><br /> <input id="address" type="text" name="address" class="alumni-input" /> </li> <li> <span class="alumni-span">apt, unit, ste #, etc</span><br /> <input id="address2" type="text" name="address2" class="alumni-address-2" cols="1" /> </li> </div> <div id="alumni-form-column"> <li> <span class="alumni-span">city</span><br /> <input id="city" type="text" name="city" class="alumni-input" /> </li> <li> <span class="alumni-span">state</span><br /> <select id="state" type="text" name="state" class="alumni-input"> <option value="al">alabama</option> <option value="ak">alaska</option> <option value="az">arizona</option> <option value="ar">arkansas</option> <option value="ca">california</option> <option value="co">colorado</option> <option value="ct">connecticut</option> <option value="de">delaware</option> <option value="dc">district of columbia</option> <option value="fl">florida</option> <option value="ga">georgia</option> <option value="hi">hawaii</option> <option value="id">idaho</option> <option value="il">illinois</option> <option value="in">indiana</option> <option value="ia">iowa</option> <option value="ks">kansas</option> <option value="ky">kentucky</option> <option value="la">louisiana</option> <option value="me">maine</option> <option value="md">maryland</option> <option value="ma">massachusetts</option> <option value="mi">michigan</option> <option value="mn">minnesota</option> <option value="ms">mississippi</option> <option value="mo">missouri</option> <option value="mt">montana</option> <option value="ne">nebraska</option> <option value="nv">nevada</option> <option value="nh">new hampshire</option> <option value="nj">new jersey</option> <option value="nm">new mexico</option> <option value="ny">new york</option> <option value="nc">north carolina</option> <option value="nd">north dakota</option> <option value="oh">ohio</option> <option value="ok">oklahoma</option> <option value="or">oregon</option> <option value="pa">pennsylvania</option> <option value="ri">rhode island</option> <option value="sc">south carolina</option> <option value="sd">south dakota</option> <option value="tn">tennessee</option> <option value="tx">texas</option> <option value="ut">utah</option> <option value="vt">vermont</option> <option value="va">virginia</option> <option value="wa">washington</option> <option value="wv">west virginia</option> <option value="wi">wisconsin</option> <option value="wy">wyoming</option> </select> </li> <li> <span class="alumni-span">zip</span><br /> <input id="zip" type="text" name="zip" class="alumni-input" maxlength="5" /> </li> <li> <span class="alumni-span">phone</span><br /> <input id="phone" type="text" name="phone" class="alumni-input" maxlength="10" onfocus="if (this.value == 'hint text..') this.value=''" value="hint text.." onblur="if (this.value == '') this.value='digits only: 5458881234'"/> </li> <li> <span class="alumni-span">email</span><br /> <input id="email" type="text" name="email" class="alumni-input" /> </li> <li> <button class="alumni-button" type="submit" name="create">submit</button> </li> </div> </form> javascript
// .js document capture submit event form , send errors asychronously $(document).ready(function() { // process form $('form').submit(function(event) { event.preventdefault(); $('.form-group').removeclass('has-error'); // remove error class $('.help-block').remove(); // remove error text // form data // there many ways data using jquery (you can use 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 form $.ajax({ type : 'post', // define type of http verb want use (post our form) url : 'http://localhost/wordpress/wp-content/plugins/alumni/alumni_update.php', // url want post data : formdata, // our data object datatype : 'json', // type of data expect server encode : true }) // using done promise callback .done(function(data) { // log data console can see console.log(data); // here handle errors , validation messages if ( ! data.success) { // handle errors fist name --------------- if (data.errors.first_name) { $('#first_name').addclass('has-error'); // add error class show red input $('#first_name').append('<div class="help-block">' + data.errors.first_name + '</div>'); // add actual error message under our input } // handle errors last name --------------- if (data.errors.last_name) { $('#last_name').addclass('has-error'); // add error class show red input $('#last_name').append('<div class="help-block">' + data.errors.last_name + '</div>'); // add actual error message under our input } // handle errors city--------------- if (data.errors.city) { $('#city').addclass('has-error'); // add error class show red input $('#city').append('<div class="help-block">' + data.errors.city + '</div>'); // add actual error message under our input } // handle errors last name --------------- if (data.errors.state) { $('#state').addclass('has-error'); // add error class show red input $('#state').append('<div class="help-block">' + data.errors.state + '</div>'); // add actual error message under our input } // handle errors phone --------------- if (data.errors.phone) { $('#phone').addclass('has-error'); // add error class show red input $('#phone').append('<div class="help-block">' + data.errors.phone + '</div>'); // add actual error message under our input } // handle errors address --------------- if (data.errors.address) { $('#address').addclass('has-error'); // add error class show red input $('#address').append('<div class="help-block">' + data.errors.address + '</div>'); // add actual error message under our input } // handle errors zip --------------- if (data.errors.zip) { $('#zip').addclass('has-error'); // add error class show red input $('#zip').append('<div class="help-block">' + data.errors.zip + '</div>'); // add actual error message under our input } // handle errors email --------------- if (data.errors.email) { $('#email').addclass('has-error'); // add error class show red input $('#email').append('<div class="help-block">' + data.errors.email + '</div>'); // add actual error message under our input } } else { // good! show success message! $('form').append('<div class="alert alert-success">' + data.message + '</div>'); // after form submission, you'll want redirect // window.location = '/thank-you'; // redirect user page alert('success'); // we'll alert user } }); // stop form submitting normal way , refreshing page event.preventdefault(); }); });
@thedeadmedic figured out whole ordeal on over wordpress exchange:
https://wordpress.stackexchange.com/a/187995/72933
thanks help.
Comments
Post a Comment