Как отправить radio и checkbox на почту с помощью ajax?

Question

[dgallyamshin]

Я сверстал и запрограммировал калькулятор с разными услугами, у каждой услуги свои данные для отправки. Если честно, еще никогда с php не сталкивался, да и ajax почти не знаю.

Суть такая, три услуги в виде табов, человек выбирает услугу, далее вводит и выбирает данные, чтоб узнать стоимость. Вот пример одной и услуг, но наткнулся на проблему. В одной из услуг есть такие данные, и я не знаю, как их отправить. Как отправить label выбранной радиокнопки или чекбокса?

$('#my_send3').click(function() {

            if ($('#workSpace').prop('checked')) {


                $.post (
                'post.php', // адрес обработчика

                {
                    'Имя: ':
                    $('#call-name').val(),
                    'Телефон: ':
                    $('#call-tel').val(),
                    'Услуга':
                    'Рабочий проект',
                    'Тип объекта: ':
                    $('#workProject .calculator-select__choose').text(),
                    'Площадь: ':
                    $('#scale-budget_input').val().replace(' кв. м', '') + ' кв. м'
                },

                function(msg) {
                    $('.call-me__wrap').hide()
                    $('.call-me__complete').show()
                    }

                )
            
            return false;
            } else if ($('#designVisual').prop('checked')) {


                $.post (
                'post.php', // адрес обработчика

                {
                    'Имя: ':
                    $('#call-name').val(),
                    'Телефон: ':
                    $('#call-tel').val(),
                    'Услуга':
                    'Дизайн и визуализация',
                    'Тип объекта: ':
                    $('#visualAndDesign .calculator-select__choose').text(),
                    'Площадь: ':
                    $('#scale-building_input').val().replace(' кв. м', '') + ' кв. м'
                },

                function(msg) {
                    $('.call-me__wrap').hide()
                    $('.call-me__complete').show()
                    }

                )



            } else if ($('#building').prop('checked')) {

                $.post (
                'post.php', // адрес обработчика

                {
                    'Имя: ':
                    $('#call-name').val(),
                    'Телефон: ':
                    $('#call-tel').val(),
                    'Услуга':
                    'Строительство',
                    'Тип объекта: ':
                    $('#building .calculator-select__choose').text(),
                    'Площадь: ':
                    $('#scale-building_input').val().replace(' кв. м', '') + ' кв. м',
                    'Количество комнат':
                    $('.room-field').val(),
                    'Высота потолка':
                    $('.height-ceiling').val()
                },

                function(msg) {
                    $('.call-me__wrap').hide()
                    $('.call-me__complete').show()
                    }

                )

            }

        })

Answer 1

[Vitaliy K]

Как-то сложно у вас.
Трижды один и тот же код.
Не проще ли три формы сделать и дергать одну функцию отправки?
Примеры

Comments

[dgallyamshin]

Дело в том, что там нет тегов form, поэтому я не знаю как отправить

[dgallyamshin]

А вместо select там стилизованный div. И кнопка отправить заявку вылезает во всплывающем окне, то есть она общая, поэтому я условия задал.

[Vitaliy K]

dgallyamshin, form несложно добавить, а удобств, как мне кажется, намного больше.

[dgallyamshin]

Vitaliy K, То есть я оберткой в каждую услугу добавляю form и потом уже собираю данные из формы, правильно? А как в данные добавить значение select, который div и выбранных радиокнопок и чекбоксов?

[Гена]

dgallyamshin, да норм, не надо 3 формы. там чуток подправить и норм. я ответ добавил как 3 формы избежать. ну вообще лучше на vue такие вещи делать.

[Vitaliy K]

dgallyamshin, у всех элементов формы должен быть указан атрибут name, тогда соберете

Answer 2

[Гена]

const services = [
     	{name: 'Дизайн и визуализация', active: $('#designVisual').prop('checked')},
        {name: 'Рабочий проект', active: $('#workSpace').prop('checked')},
        {name: 'Строительство', active: true}
];

const activeService = services.find(service => service.active == true);

const msg = {
    'Имя: ':  $('#call-name').val(),
    'Телефон: ':  $('#call-tel').val(),
};

msg['Услуга: '] = activeService.name;

$.post('post.php', msg, function() {
   $('.call-me__wrap').hide()
   $('.call-me__complete').show()
});