Как сохранить данные с формы в базу данных используя ajax/jquery?

Question

[Павел Кизернис]

Подскажите реально решение, как безопасно сохранять данные с формы в базу данных и выводить эти данные в админке сайта? Плюсом будет параллельно слать данные и на мыло тоже.

Можно на Wordpress, Joomla - можно и без.

Пробовал на Joomla с ChronoForms5 - все работало норм без включения ajax (в настройках ChronoForms). Как только включаю ajax - перестает отправлять письмо и сохранять в БД.

Нашел интересный плагин к Wordpress - Contact Form DB. В описании к нему вычитал, что он может работать напрямую с html-формами (а не теми, что созданы в wordpress'e, типа contact form 7).
Но пока так и не удалось его заставить работать с моей формой.

Создал тему на форуме модуля (там можно подробнее глянуть весь мой код):
https://wordpress.org/support/topic/how-use-this-p...

Форма в HTML

<form id="f2" action="" method="post">
	<input type="text" name="name" placeholder="ФИО" maxlength="50" required>
	<input type="text" name="email" placeholder="Email" maxlength="50" required>
	<input type="text" name="phone" placeholder="Телефон" maxlength="50" required>
	<input type="text" name="org" placeholder="Учебное заведение" maxlength="50" required>
	<button class="btn" type="submit">Отправить</button>
</form>

JS обработчик

$(document).ready(function() {
//...
	$("form#f2").submit(function() {

		var form = $(this),
			name = form.find("input[name='wpname']").val(),
			email = form.find("input[name='wpemail']").val(),
			phone = form.find("input[name='wpphone']").val(),
			org = form.find("input[name='wporg']").val();

		if (!name || !email || !phone || !org) {
			alert("Заполните поля формы.");
			return false;
		}

		var email_regexp = /.+@.+\..+/i;
		var email_test = email_regexp.test(email);
		if (!email_test) {
			alert("Введен некоректный Email-адрес.");
			return false;
		}

		$.ajax({
			type: "POST",
			url: "wp-content/themes/epixx/mail.php",
			data: $("form#f2").serialize(),
			success: function(response) {
				$(".order_status").show();
				$("form#f1").hide();
				$("form#f2").hide();
				console.log('response: ' + response);
			},
			error:  function(xhr, str){
				alert('Возникла ошибка: ' + xhr.responseCode);
			}
		}).done(function() {
			setTimeout(function() {
				$.fancybox.close();
			}, 2000);
		});
		return false;
	});
});

и мой mail.php

<?php

$recepient = "[e-mail]";
$sitename = "Sitename";

$name = trim($_POST["wpname"]);
$email = trim($_POST["wpemail"]);
$phone = trim($_POST["wpphone"]);
$org = trim($_POST["wporg"]);

$pagetitle = "New message from site \"$sitename\"";
$message = "Name: $name\r\nEmail: $email\r\nPhone: $phone\r\nOrganization: $org";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"$EOL From: $name <$email>");

/* contact-form-7-to-database */
require_once(ABSPATH . 'wp-content/plugins/contact-form-7-to-database-extension/CFDBShortCodeSavePostData.php');
$handler = new CFDBShortCodeSavePostData;
$handler->handleShortcode(null);

ajax response:

<br />
<b>Warning</b>:  require_once(ABSPATHwp-content/plugins/contact-form-7-to-database-extension/CFDBShortCodeSavePostData.php) [<a href='function.require-once'>function.require-once</a>]: failed to open stream: No such file or directory in <b>/var/www/u0081082/public_html/donkon.ru/devwp/wp-content/themes/epixx/mail.php</b> on line <b>16</b><br />
<br />
<b>Fatal error</b>:  require_once() [<a href='function.require'>function.require</a>]: Failed opening required 'ABSPATHwp-content/plugins/contact-form-7-to-database-extension/CFDBShortCodeSavePostData.php' (include_path='.:') in <b>/var/www/u0081082/public_html/donkon.ru/devwp/wp-content/themes/epixx/mail.php</b> on line <b>16</b><br />

Ссылка на проект в сети: donkon.ru/devwp

Буду рад любой рекомендации. В back-ende я слабоват.

Answer 1

[Павел Кизернис]

Оказываться в WordPress очень неудобно использовать отдельные от него php-скрипты (как мой mail.php). Не работала переменная ABSPATH.

Я создал функцию send_form() в function.php (лежит в папке с темой) и добавил в неё весь код из моего mail.php.
Перед всякими require get_template_directory()............. написал:

function send_form(){
    //весь код из mail.php тут
}
add_action('wp_ajax_send_form', 'send_form');
add_action('wp_ajax_nopriv_send_form', 'send_form');

Так переменная ABSPATH корректно заработала.

Ну и в аяксе url заменил на
/wp-admin/admin-ajax.php?action=send_form

И все заработало! ))

Answer 2

[Михаил Чирский]

Я бы вам посоветовал во 1 использовать jquery.validate или что то подобное, а не писать велосипеды, а собрать данные можно form.serialize()

js

var params = form.serialize();
// вернет примерно следующее name=&email= и т д
$.post(url, params, function(response) {

}, 'json');

и php

$ajaxData = array();

// Тут все серверные операции, включая добавление, мыло и все что угодно,
// ну учтите, чтобы отловить теже ошибки и показать их, надо передавать в массив ajaxData а в JS это дело ловить через .response.error и т д

die(json_encode($ajaxData));

Answer 3

[Ninja Mate]

добавляем в php скрипт

wp_enqueue_script( 'bundle', plugins_url( '/bundle.js', __FILE__ ), array('jquery'), '1.11', true );
wp_localize_script( 'bundle', 'MyAjax', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('myajax-nonce')
) );

это код функции с одного моего проекта, но смысл тот же - из jQuere.ajax посылаем переменные и в базу данных

add_action( 'wp_ajax_cr_new_patient', 'cr_new_patient' );

function cr_new_patient() {
    $nonce = $_POST['nonce'];
    if(wp_verify_nonce( $nonce, 'myajax-nonce' )){
        $id = sanitize_text_field($current_user->user_login);
        $ur = sanitize_text_field($_POST["patient_ur"]);
        $dob = sanitize_text_field($_POST["patient_dob"]);
        $gender = sanitize_text_field($_POST["patient_gender"]);
        $ident = sanitize_text_field($_POST["patient_ident"]);
        $other = sanitize_text_field($_POST["patient_other"]);
        $loc = sanitize_text_field($_POST["patient_loc"]);

        $query="INSERT INTO patient (
        'ur', 'dob', 'gender', 'ident', 'other', 'loc'
        ) VALUES (
        '$ur', '$dob', '$gender', '$ident', '$other', '$loc',
        )";

        $mysqli = new mysqli("xxx","xxx","xxx","xxx");
        
        /* check connection */
        if (mysqli_connect_errno()) {
            printf("Connect failed: %s\n", mysqli_connect_error());
            exit();
        }

сам js такой

handleSubmit(data) {

        jQuery.post(
            MyAjax.ajaxurl,
            {
                'action': 'cr_new_patient',

                'patient_ur': data.patient_ur,
                'patient_dob': data.patient_dob,
                'patient_gender': data.patient_gender,
                'patient_ident': data.patient_ident,
                'patient_other': data.patient_other,
                'patient_loc': data.patient_loc,

                'nonce' : MyAjax.nonce
            },
            function(response){
                alert('The server responded: ' + response);
            }
        );
    }

Answer 4

[Dark_Scorpion]

Чтоб быстро собирать данные с формы без селекторов, можно использовать JQuery.SerializeArray().
Я делал пулл реквест на SerializeObject, но отказали, сославшись на наличие плагинов.