Note: I have already posted this at the WordPress Stack Exchange but received no help, so I am posting here in hopes of getting an answer.
注意:我已经在WordPress Stack Exchange上发布了这个但没有得到任何帮助,所以我在这里发帖以期得到答案。
I'm building a little form to let users update their contact information outside of the vanilla WordPress user management systems. I plan to use a simple CRUD setup and throw in some sanitation. I've got the initial insert/create function built using the $wpdb functions and the form does write to the database correctly. However, my JavaScript isn't getting called when I submit my form. The JavaScript file doesn't capture the submit event and the form just POSTs the data straight to the PHP processor file. I'm scratching my head here.
我正在构建一个小表单,让用户在vanilla WordPress用户管理系统之外更新他们的联系信息。我计划使用简单的CRUD设置并投入一些卫生设施。我已经使用$ wpdb函数构建了初始插入/创建函数,并且表单正确地写入数据库。但是,当我提交表单时,我的JavaScript没有被调用。 JavaScript文件不捕获提交事件,表单只是将数据直接发送到PHP处理器文件。我在这里挠头。
Run down of the issue, play-by-play:
解决问题,逐个播放:
- Form submits, but user is redirected to a page with the JSON encoded data in an array.
- The JavaScript file that contains my error processing and Ajax calls is never touched.
- The JavaScript file does not capture the submit event.
- The form is still written to the DB, I assume because the POST method is being called on the PHP file in the form action.
表单提交,但用户被重定向到包含数组中JSON编码数据的页面。
永远不会触及包含我的错误处理和Ajax调用的JavaScript文件。
JavaScript文件不捕获提交事件。
表单仍然写入DB,我假设因为在表单操作中在PHP文件上调用了POST方法。
NOTE: I am including the .js file using wp_enqueue_script in my functions file, but will most likely change this to be included only when the page with this form is loaded, to cut down on load times. I don't think loading the JavaScript file this way should change anything.
注意:我在我的函数文件中使用wp_enqueue_script包含.js文件,但很可能只有在加载了带有此表单的页面时才将其包含在内,以减少加载时间。我不认为以这种方式加载JavaScript文件应该改变任何东西。
PHP Processing:
<?php
# DB CRUD commands for updating the table for alumni contact info
/* wordpress db globals, require wp-load to 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 to hold validation errors
$data = array(); // array to pass back data
/*Ensure no fields are empty, and if they are, return $errors array encoded in JSON */
if (empty($_POST['first_name']))
$errors['first_name'] = 'First name is required.';
if (empty($_POST['last_name']))
$errors['last_name'] = 'Last name is required.';
if (empty($_POST['email']))
$errors['email'] = 'Email is required.';
if (empty($_POST['phone']))
$errors['phone'] = 'A phone number is required.';
if (empty($_POST['address']))
$errors['address'] = 'A mailing address is required.';
if (empty($_POST['city']))
$errors['city'] = 'Please enter the city for your mailing address.';
if (empty($_POST['zip']))
$errors['zip'] = 'Your zip code is required.';
if (empty($_POST['state']))
$errors['state'] = 'Please select your state.';
// return a response ===========================================================
// if there are any errors in our errors array, return a success boolean of false
if ( ! empty($errors)) {
// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;
} else {
// if there are no errors process our form, then return a message
/* Set the proper table name to a variable */
$table_name = "wp_alumni";
/* Use insert function to write the data to the table
* Called on form submit when the user adds their contact info
* to the Alumni database using the on-page form.
* button name = submit is used to check 'if isset'
* and then perform the 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 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);
?>
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 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('<div class="help-block">' + data.errors.first_name + '</div>'); // 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('<div class="help-block">' + data.errors.last_name + '</div>'); // 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('<div class="help-block">' + data.errors.city + '</div>'); // 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('<div class="help-block">' + data.errors.state + '</div>'); // 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('<div class="help-block">' + data.errors.phone + '</div>'); // 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('<div class="help-block">' + data.errors.address + '</div>'); // 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('<div class="help-block">' + data.errors.zip + '</div>'); // 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('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input
}
} else {
// ALL GOOD! just show the success message!
$('form').append('<div class="alert alert-success">' + data.message + '</div>');
// 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();
});
});
2 个解决方案
#1
@TheDeadMedic figured out this whole ordeal over on the Wordpress exchange:
@TheDeadMedic在Wordpress交易所找到了整个考验:
https://wordpress.stackexchange.com/a/187995/72933
Thanks for all the help.
谢谢你的帮助。
#2
You can use alternate method to fulfill your requirement of ajax call by changing for submit button to anchor or simple button
您可以使用替代方法通过将提交按钮更改为锚点或简单按钮来满足您对ajax调用的要求
<button class="alumni-button" type="button" name="create">Submit</button>
Now check for onClick event in your javascript file
现在检查javascript文件中的onClick事件
$('.alumni-button').onClick(function(){
// your javascript code
// ajax call
});
#1
@TheDeadMedic figured out this whole ordeal over on the Wordpress exchange:
@TheDeadMedic在Wordpress交易所找到了整个考验:
https://wordpress.stackexchange.com/a/187995/72933
Thanks for all the help.
谢谢你的帮助。
#2
You can use alternate method to fulfill your requirement of ajax call by changing for submit button to anchor or simple button
您可以使用替代方法通过将提交按钮更改为锚点或简单按钮来满足您对ajax调用的要求
<button class="alumni-button" type="button" name="create">Submit</button>
Now check for onClick event in your javascript file
现在检查javascript文件中的onClick事件
$('.alumni-button').onClick(function(){
// your javascript code
// ajax call
});