创建一个表单，并使用$wpdb将数据插入数据库

Question

我有一个自定义的WordPress页面模板，我写了一个基本的表单结构，像这样:

<div class="my-form">
<h2>WILL YOU ATTEND?</h2>
<form action="#" autocomplete="off" method="POST">
<input class="input" type="text" spellcheck="false" name="name" placeholder="Name" required>
<input class="input" type="email" spellcheck="false" name="email" placeholder="E-mail" required>
<label class="ans">Yes
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="ans">No
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<button> SUBMIT </button>
</form>
</div>

现在一旦提交按钮被点击，我试图找出如何在WordPress数据库中创建一个表，并使用$wpdb将表单数据插入其中。

PS:我留下action属性空，因为我不知道如何去做这个确切的

Answer 1

有几种方法可以做到这一点。下面我只展示了一种方法:

我假设你的表名是wp_customform，它的id名字,,邮件，和单选列。

现在您必须像下面这样修改HTML代码。我还添加了一些JS。

<div class="my-form">
<h2>WILL YOU ATTEND?</h2>
<form class="custom-form-class" action="#" autocomplete="off" method="POST">
<!-- Action is here but hidden. This will be use in php side -->
<input type="hidden" name="action" value="sample_custom_form_action">
<input class="input" type="text" spellcheck="false" name="name" placeholder="Name" required>
<input class="input" type="email" spellcheck="false" name="email" placeholder="E-mail" required>
<label class="ans">Yes
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="ans">No
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<button> SUBMIT </button>
</form>
</div>

<script>
// Javascript to send ajax request
jQuery(document).on('submit', '.custom-form-class', function(e){
let formData = jQuery(this).serialize();
// Change ajax url value to your domain
let ajaxurl = 'http://YOURSITE.COM/wp-admin/admin-ajax.php';
// Send ajax
jQuery.post(ajaxurl, formData, function(response) {
alert('Got this from the server: ' + response);
});
});
</script>

这段代码将把表单数据发送到PHP端。必须使用下面的代码来处理function.php文件中的表单数据。

add_action( 'wp_ajax_sample_custom_form_action', 'prefix_save_custom_form_data' );
add_action( 'wp_ajax_nopriv_sample_custom_form_action', 'prefix_save_custom_form_data' );
function prefix_save_custom_form_data(){
global $wpdb;

// Get the values
$name  = isset( $_POST['name'] ) ? sanitize_text_field( $_POST['name'] ) : ''; // Empty value if data not set
$email = isset( $_POST['email'] ) ? sanitize_email( $_POST['email'] ) : ''; // Empty value if data not set
$radio = isset( $_POST['radio'] ) ? sanitize_text_field( $_POST['radio'] ) : ''; // Empty value if data not set
// Assume your table name is wp_customform
$your_table_name = $wpdb->prefix . 'customform';
// Insert into database
$wpdb->insert(
$your_table_name, 
array(
'name' => $name,
'email' => $email,
'radio' => $radio,
)
);
// Send insert id as ajax response
echo $wpdb->insert_id;
// Use die to stop the ajax action
wp_die();
}

代码没有经过测试，但它们应该可以工作。我在下面附上了一些参考链接:

Ajax概述:https://codex.wordpress.org/AJAX_in_Plugins

For Insert: https://developer.wordpress.org/reference/classes/wpdb/insert/

创建表:https://developer.wordpress.org/reference/functions/dbdelta/