Contact form 7 обработка checkbox до отправки формы?

Question

[dpakoxa]

Есть интересная задачка.

Суть в следующем: Существует форма из 4 шагов, выводится в модальном окне, шаги подгружаются на ajax. На первых трех шагах пользователь отвечает на вопросы чекбоксами (первый шаг - вопрос: Что умеете делать? варианты: рисовать, кодить, писать | остальные шаги по аналогии), на четвертом шаге ему необходимо показать результат исходя из поставленных им чекбоксов (например: Художник: 4 из 18, Блогер: 11 из 18, Программист: 0 из 18), чтобы пользователь определился в чем он сильнее и ниже расположить поля с телефоном, мылом, селект на профориентацию и т.д. и еще ниже кнопка ОТПРАВИТЬ.

Таким образом я так понимаю, что мне необходимо в function.php написать функцию, которая обработала бы чекбоксы по нажатию на кнопку при переходе с 3 шага на 4?

Вот как это по-идее должно выглядеть:

[ШАГ1]

1. Что вы умеете?

[checkbox* checkbox-801 use_label_element "рисовать" "кодить" "писать истории"]

<button>Продолжить</button>

[ШАГ2]

2. Что еще умеете?

[checkbox* checkbox-802 use_label_element "еще рисовать" "еще кодить" " еще писать истории"]

<button>Назад</button> <button>Продолжить</button>

[ШАГ3]

3. Что еще?

[checkbox* checkbox-803 use_label_element "снова рисовать" "снова кодить" "снова писать истории"]

<button>Назад</button> <button>Продолжить c выполнением функции</button>

[ШАГ4]

Ваша профориентация:
[показать результаты подсчета чекбоксов]

Исходя из них вы можете зарегистрироваться
[select* menu-508 include_blank "Художник" "Кодер" "Блогер"]
[text your-name]
[email your-email]

<button>Назад</button> <button submit>ОТПРАВИТЬ</button>

Обработка чекбоксов идет следующим образом: из первого массива checkbox-801: 2,4,11 - прибавляют по +1 к переменной художника, а 1,3,6 +1 к переменной кодера

из второго массива checkbox-802: 1,2,3 - +1 к художнику, а 1,3,4 + 1 к блогеру и т.д. главное что один чекбокс может дать +1 как блогеру так и художнику.

Вывод результатов простенькой визуально понятной диаграммой типа:

<h1>Художник</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от художника>/18*100)%; background: #ff0000">
   </div>
</div>
<h1>Кодер</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от кодера>/18*100)%; background: #ff0000">
   </div>
</div>
<h1>Блогер</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от блогера>/18*100)%; background: #ff0000">
   </div>
</div>

Реализуема ли данная задача с помощью одного лишь плагина contact form 7? Возможно ли выполнить функцию подсчета результатов ДО submit формы?

Нужна помощь в создании кода функции и прикрепления ее к кнопке перехода с 3-го шага на 4-ый. Из стандартных событый wpcf7, которые могут запустить скрипт и обработать чекбоксы есть лишь wpcf7mailsent, но он срабатывает лишь после нажатия кнопки submit

Comments

[zorca]

Вашу задачу с нетерпением ждут на фрилансе.

[alex-1917]

zorca, а это у вас реф-ссылка или просто совпало??...)))

[zorca]

alex-1917, Да, я же владелец Тостера.

[alex-1917]

zorca, а, вот оно чо. Было приятно пообщаться с владельцем Тостера!
)))

Answer 1

[Айнур Валиев]

не проще ли обрабатывать чекбоксы на фронте? и аяксом их посылать произвольному скрипту?

Answer 2

[alex-1917]

У тебя же шаги подгружаются тут же, на этой же странице? Ну что тогда мешает тем аджаксом все это дело обрабатывать? Обрабатывай тут же, собирай в массив и дальше лепи из него что надо.
Делать это в functioins.php - этофиаскобратан!

Comments

[dpakoxa]

Понял. Можно пример кода обработки на ajax например первого массива checkbox-801?

[alex-1917]

dpakoxa, да не вопрос, только позвони двум моим клиентам и объясни, почему мне надо тормознуть на полчаса ихние проекты. и я тогда как только так сразу.
телефончики давать?...
)))

[dpakoxa]

alex-1917, Отвлекать Вас от работы конечно же не хочется. Здесь мне нужно разобраться самому. В верном направлении копаю?

html

<form>
<input type="checkbox" name="checkbox-801[]" value="рисую">
<input type="checkbox" name="checkbox-801[]" value="кодю">
<input type="checkbox" name="checkbox-801[]" value="пишу">

<input type="button" id="submit" value="следующий шаг" />
</form>


<script>
$(function(){
    	var check = function(){
    		var cBox = [];
            // в цикле собираем значения всех установленных чекбоксов и записываем их в массив cBox
    		$("input[type=checkbox]:checked").each(function(){
    			cBox.push($(this).attr("value"));
    		});
          
    		$.ajax({
    		  url: 'script.php',
    		  type: 'post',
              // передаем в data массив со значениями checkbox
    		  data: { ch:cBox }
    		});
    	}
    	
    	$("#submit").on("click", check);
});
</script>

script.php

<?php

if (isset($_REQUEST['ch'])) {
    print_r($_REQUEST['ch']);
}