How to get data from a feedback form and process it in your PHP script?

Question

JavaScript

There is a feedback form, the handler of this form is like this code.

import axios from "axios";
import Modal from "@js/components/modal";
import Cookies from 'js-cookie'

export default {
    form: document.querySelector('#modal-callback .js-callback-form'),
    msg: document.querySelector('#modal-callback .js-callback-msg'),
    inner: document.querySelector('#modal-callback .js-callback-inner'),
    phoneInput: document.querySelector('#callback-phone'),
    nameInput: document.querySelector('#callback-name'),
    title: document.querySelector('#modal-callback .js-title'),
    submitBtn: document.querySelector('#modal-callback .js-submit-btn'),
    defaultTitle: 'Давайте мы вам позвоним',
    errorClass: 'modal__input--error',

    sendMail(e) {
        this.phoneInput.setAttribute('disabled', 'true');
        this.submitBtn.setAttribute('disabled', 'true');
        this.nameInput.setAttribute('disabled', 'true');

        let phone = e.target[1].value;
        let name = e.target[0].value;

        const headers = {
            'X-OCTOBER-REQUEST-HANDLER': 'onCallbackMailSend',
            'X-OCTOBER-REQUEST-PARTIALS': '',
            'X-Requested-With': 'XMLHttpRequest'
        };

        return axios({
            method: "POST",
            url: window.location.href,
            headers: headers,
            data: {name: name, phone: phone}
        }).then(response => {
            $(this.inner).stop(0).slideToggle();
            this.msg.style.display = 'block';
            setTimeout(() => {
                this.modalInstance.close();
            }, 2000);
        });
    },

    init() {
        this.modalInstance = new Modal({
            trigger: '.js-callback-trigger',
            modal: document.getElementById('modal-callback'),
            callbackOpen: (target) => {
                if(target == null) {
                    this.title.innerHTML = this.defaultTitle;
                    return false;
                }

                let title = target.getAttribute('data-title');

                if(title != null) {
                    this.title.innerHTML = title;
                } else {
                    this.title.innerHTML = this.defaultTitle;
                }
            },
            callbackClose: () => {
                this.phoneInput.removeAttribute('disabled');
                this.phoneInput.value = '';
                this.nameInput.removeAttribute('disabled');
                this.nameInput.value = '';
                this.submitBtn.removeAttribute('disabled');
                this.msg.style.display = 'none';
                this.inner
                    .style
                    .cssText = `display:block;height:initial;`;
            }
        });

        this.modalInstance.init();

        setInterval(() => {
            if(Cookies.get('modalViewed') == null) {
                this.modalInstance.open();
                Cookies.set('modalViewed', 'true', { expires: 1 })
            }
        }, 30000);

        this.phoneInput.addEventListener('input', () => {
            if (this.phoneInput.classList.contains(this.errorClass)) {
                this.phoneInput.classList.remove(this.errorClass);
            }
        });

        this.form.addEventListener('submit', (e) => {
            e.preventDefault();
            let isValid = this.phoneInput.value.replace(/[^0-9]/g, '').length === 11;
            isValid ? this.sendMail(e) : this.phoneInput.classList.add(this.errorClass);
        })
    }
}

I am doing the integration of the site form with CRM Bitrix, please tell me how to get the data entered by the user from such a form.

Answer 1

0) Check the browser console for errors
1) Enable error output in php
2) check that your script sends something in the network tab (and that it sends what you need)
3) also look at the network what came from the response to the request with Ajax if it's an error - fix
like everything

Answer 2

url: window.location.href<- your form sends data to the address you have in the get string
using the post method . method: "POST"
Accordingly, you should have a back action at the same address that accepts a post request. And in it you are already taking (in the general case via $ _POST) this datadata: {name: name, phone: phone}