Задать вопрос

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

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

Можно на 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 = "me@server.com";
$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 я слабоват.
  • Вопрос задан
  • 6639 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 1
pashakiz
@pashakiz Автор вопроса
web dev
Оказываться в 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

И все заработало! ))
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Я бы вам посоветовал во 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));
Ответ написан
Комментировать
victorzadorozhnyy
@victorzadorozhnyy
добавляем в 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);
            }
        );
    }
Ответ написан
Комментировать
Dark_Scorpion
@Dark_Scorpion
Чтоб быстро собирать данные с формы без селекторов, можно использовать JQuery.SerializeArray().
Я делал пулл реквест на SerializeObject, но отказали, сославшись на наличие плагинов.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
div. Ставрополь
от 40 000 до 90 000 ₽
Wanted. Санкт-Петербург
До 220 000 ₽
19 дек. 2024, в 02:11
15000 руб./за проект
19 дек. 2024, в 02:09
11000 руб./за проект
19 дек. 2024, в 00:46
30000 руб./за проект