Заменить значения value в форме при отправке на email
 

Всем привет.
Столкнулся с одной проблемой.
Есть калькулятор, пока в таком тестовом виде av.emoney.blog

Все вроде работает как надо. Все считает.
Но вот появилась необходимость отправить форму на почту.
Форма отправляется на почту админу и пользователю.
А раз отправляется пользователю - должна читаться нормально...

Поскольку тут все поля - селекты, чекбоксы, радиобаттоны,
то на почту приходит значение value, либо "on" для чекбокса.

Соответсвенно когда на почту приходит название поля и value 1 или 2 - то это как-то не удобно...

С другой стороны, числовые value применялись чтобы в калькуляторе все нормально работало.

Есть какой-то вариант, чтобы при отправке на почту, вместо value="1" приходил какой-то текст, заданный заранее?

Отправляются данные при помощи phpmailer, но это не принципиально...

Приходит в таком виде:
Бюджет (1-Дешево, 2-Средний, 3-Премиум) - 1
Размер витрины - 1
Тип проектора для маленькой витрины - 2

the_little, а что мешает на сервере сделать нормальный вид письма?

Уровень знаний, надо полагать...

Я еще сейчас подумал, у меня выводится в html такие значения из калькулятора. Может можно их передать на почту? ПРосто там же динамические данные получается.

document.getElementById("check-sp").innerHTML = sp;
    document.getElementById("check-pp").innerHTML = pp;
    document.getElementById("check-lp").innerHTML = lp;
    document.getElementById("check-w").innerHTML = w;
    document.getElementById("check-ip").innerHTML = ip;
    document.getElementById("check-cp").innerHTML = cp;
    document.getElementById("check-kp").innerHTML = kp;
    document.getElementById("check-m").innerHTML = m;

Ну и html

<div class="check">
		<div class="check-sp">
			Стоимость пленки:
			<span id="check-sp"></span>
		</div>
		<div class="check-pp">
			Стоимость проектора:
			<span id="check-pp"></span>
		</div>
		<div class="check-lp">
			Стоимость лазера:
			<span id="check-lp"></span>
		</div>
		<div class="check-w">
			Стоимость WUXGA:
			<span id="check-w"></span>
		</div>
		<div class="check-ip">
			Источник:
			<span id="check-ip"></span>
		</div>
		<div class="check-cp">
			Коммутация:
			<span id="check-cp"></span>
		</div>
		<div class="check-kp">
			Крепление:
			<span id="check-kp"></span>
		</div>
		<div class="check-m">
			Монтаж:
			<span id="check-m"></span>
		</div>
	</div>

То есть sp, pp, lp, ... это как раз то, что пользователю будет понятно?

совершенно верно. Это переменные, в которых хранится сумма за то или иное оборудование.

Вообще имея возможность отправить на почту данные со скрипта, я смогу сверстать любые нужные данные... Вопрос как их отправить на почту.

Хотя я так понимаю есть вариант отправить на email без php, на чистом JS

Уверены в этом? А если реальный пример из жизни? Пришли вы в магазин, а на полках товары не с названиями "Конфеты", "Печенье", ..., а "1239023234", "234as34yts78", понятно ли будет, что за товары вам предлагают?

так если я смогу в принципе передать данные из JS скрипта на почту - то там же можно прописать все что угодно...

Например я пишу

alert("Стоимость пленки на витрину - " + sp);

При этом никто мне не мешает в зависимости от того же value в полях - объявить переменные, в которых я укажу например "Витрина размером 1м*2м". И там же выведу размер витрины, потом стоимость пленки, и так по все нужным данным.
Если я смогу передать это на почту - то дело сделано, как мне видится...

Вопрос в том как вставить это в письмо!

В php файле отправки, в самом начале задаются как я понимаю тоже переменные, в которых хранятся value полей.

т.е.

$size = $_POST['size'];

тут берется значение value из поля с именем size.
потом идет html тело письма, где я пишу Размер витрины - $size.

Если бы таким макаром можно было забрать данные не из поля, а просто из div.

Кстати пришла одна мысль...
СОздать скрытый текстовый инпут, передать в него из скрипта нужные данные, а потом их из это поля вытащить в письмо...

гемор некоторый, но вроде рабочий вариант...
Главное чтобы в value текстового поля можно было передать информацию в таком виде
"Стоимость пленки на витрину - " + sp

Вот это уже в правильном направлении мысль. Сервер хранит данные, и для удобства оперирования ими, их проверки, данные структурируют. В случае с БД, данные зачастую хранятся под уникальными идентификаторами, в качестве которых зачастую используются числа. Числа потому, что с ними легче работать. Поэтому на клиенте, список формы может выглядеть так:

<select name="pattern">
<opton value=1>В горошек</option>
<opton value=2>В полоску</option>
<opton value=3>В клетку</option>
</select>

Сервер получив форму, проверив, что есть товар и под ключом pattern с выбранным значением 2 действительно возвращается его дизайн, помещает в тело письма "Ситец в полоску".

А 1, 2, 3, не пойдет. Как всякие sp, lp, если только это речь не о размерах одежды SSL и прочее, но и в БД этот размер не будет представлен значением этим, а скорее идентификатором (читайте о нормализации баз данных).

Если используется не БД, то плохо, но для "мелочи ограниченной", к примеру, пойдет, и данные должны быть описаны по тем же принципам как и в БД, и не потому, что "никто мне не мешает", а потому, что так легче оперировать данными как при выводе их пользователю, так и при их проверке.

Не надо мусора.

По другому не вижу как...
Фактически так уже реализовал.

HTML

<textarea name="outtext" id="outtext"></textarea>

Для проверки пока только с теми переменными, что уже есть
JS

document.getElementById("outtext").value = 
    (
        "Стоимость пленки: " + sp +
        "\nСтоимость проектора: " + pp +
        "\nСтоимость лазера: " + lp +
        "\nСтоимость WUXGA: " + w +
        "\nИсточник: " + ip +
        "\nКоммутация: " + cp +
        "\nКрепление: " + kp +
        "\nМонтаж: " + m
    );

PHP

$outtext = $_POST['outtext'];

$mail->Body    = "$outtext"; // Текст письма

И все отлично отправляется на почту. Только есть одна проблема.

В textarea текст переносится на новую строчку.
При отправке на почту - переносы не учитываются и информация приходит одной строкой, что не совсем читабельно...

Что значит "Монтаж: " + m?

Потому, что html игнорирует переводы строк, в html перевод это <br>. А истинные джентльмены отправляют почту двумя ее копиями в одном письме, одна это html-версия, вторая как текст. Вы откуда можете знать какие версии писем предпочитает получать адресат, если только он об этом не сообщает? А не зная этого, слать ему html версию, это самоуверенность, а пользователь такое письмо может видеть как мусор.

Это потому, что у вас нет понятий об организации данных на сервере и что данные извне сервер обязан проверять.

После заполнения формы пользователь видит расчет стоимости оборудования.

На почту он получит
список оборудования с его стоимостью.

В конкретном случае стоимость монтажа.
Только я сделаю переменные, которые переведут value 1 2 3 в текстовый вид, Например возвращаясь к тому же монтажу
Будет написано например так:

Монтаж под ключ в Москве или Московской области.
Стоимость монтажа - 20000р.
Ну и далее...
Тип проектора - Ламповый "День".
Стоимость проектора - 120000р.
Общая стоимость 140000р.

Тут не поспоришь...
Я совсем недавно начал изучать Javascript.
Ну и познаний серверной части у меня тоже нет...

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

Ну если стоимость монтажа, то почему в тело письма вставляется на "Монтаж: 20000 руб.", "Монтаж: m"?

Ваш подход к тому, что вы делаете, по крайней мере то, что показано здесь, это идти по пути "кажущегося" наименьшего сопротивления. :)

Это кроет в себе массу проблем в будущем, с которыми вы еще столкнетесь.

Этот класс просто отправляет почту которую формируете вы, вы же определяете настройки класса, в том числе и тип почтового отправления. В сети этот класс описан, найдите и ознакомтесь с ним.

Так эта величина 20000 руб. считается в калькуляторе. В зависимости от выбранных полей пользователем. Если бы я ее заранее знал - я бы ее и отправил)

function check() {
    // Определяем выбранный бюджет
    var inp = document.getElementsByName('budjet');
    for (var i = 0; i < inp.length; i++) {
        if (inp[i].type == "radio" && inp[i].checked) {
            var b = inp[i].value;
        }
    }

    // Определяем выбранный размер
    var selsize = document.getElementById("size"); // Получаем наш список
	var size = selsize.options[selsize.selectedIndex].value;

    // Определяем выбранный тип проектора
    var selprojsm = document.getElementById("proj_sm"); // Получаем наш список
    var psmt = selprojsm.options[selprojsm.selectedIndex].value;

    var selprojmid = document.getElementById("proj_mid"); // Получаем наш список
    var pmidt = selprojmid.options[selprojmid.selectedIndex].value;

    var selprojlg = document.getElementById("proj_lg"); // Получаем наш список
    var plgt = selprojlg.options[selprojlg.selectedIndex].value;

    var arrsp = [
        [ 0, 0, 0],                 // Размер не выбран
        [ 3500, 11000, 90000],      // Размер 1500х1000 мм
        [ 7000, 22000, 120000],     // Размер 2000х1500 мм
        [ 15000, 44000, 360000]     // Размер 3000х2200 мм
    ];

    var sp = arrsp[size][b];

    var arrpp = [
        [ 0, 0, 0, 0],                  // Размер не выбран
        [ 0, 35000, 80000, 130000],     // Размер 1500х1000 мм
        [ 0, 80000, 160000, 250000],    // Размер 2000х1500 мм
        [ 0, 130000, 250000, 370000]    // Размер 3000х2200 мм
    ];

    if (size == 1) {
        var pp = arrpp[size][psmt];
    }
    if (size == 2) {
        var pp = arrpp[size][pmidt];
    }
    if (size == 3) {
        var pp = arrpp[size][plgt];
    }
    if (size == 0) {
        var pp = 0;
    }

    // Определяем выбран ли лазерный проектор
    var laz = document.getElementsByName('lazer');
    for (var i = 0; i < laz.length; i++) {
        if (laz[i].type == "radio" && laz[i].checked) {
            var l = laz[i].value;
        }
    }

    var arrlp = [
        [ 0, 0, 0, 0],                  // Размер не выбран
        [ 0, 200000, 400000, 800000],     // Размер 1500х1000 мм
        [ 0, 200000, 400000, 1300000],    // Размер 2000х1500 мм
        [ 0, 400000, 800000, 1600000]    // Размер 3000х2200 мм
    ];


    if ( l == 1 ) {
        if (size == 1) {
            var lp = arrlp[size][psmt];
        }
        if (size == 2) {
            var lp = arrlp[size][pmidt];
        }
        if (size == 3) {
            var lp = arrlp[size][plgt];
        }
    } else {
        lp = 0;
    }

    var wuxga=document.getElementsByName('wuxga').item(0).checked;

    if ( wuxga == true ) {
        var w = (pp + lp)/100*30;
    } else {
        var w = 0;
    }
    
    var istoc = document.getElementsByName('istochnik');
    for (var i = 0; i < istoc.length; i++) {
        if (istoc[i].type == "radio" && istoc[i].checked) {
            var ips = istoc[i].value;
        }
    }

    if ( ips == 1) {
        var ip = 4000; 
    }
    if ( ips == 2) {
        var ip = 20000; 
    }
    if ( ips == 3) {
        var ip = 60000; 
    }

    var commut=document.getElementsByName('commut').item(0).checked;

    if ( commut == true ) {
        var cp = 10000;
    } else {
        var cp = 0;
    }

    var arrminrast = [                // Расстояние минимальное
        [ 0, 0, 0, 0],                // Размер не выбран
        [ 0, 4000, 4000, 12000],      // Размер 1500х1000 мм
        [ 0, 4000, 12000, 12000],     // Размер 2000х1500 мм
        [ 0, 12000, 12000, 12000]     // Размер 3000х2200 мм
    ];

    var arrsredrast = [               // Расстояние 500-1000
        [ 0, 0, 0, 0],                // Размер не выбран
        [ 0, 6000, 6000, 16000],      // Размер 1500х1000 мм
        [ 0, 6000, 16000, 16000],     // Размер 2000х1500 мм
        [ 0, 16000, 16000, 16000]     // Размер 3000х2200 мм
    ];

    var arrmaxrast = [                // Расстояние более 1000
        [ 0, 0, 0, 0],                // Размер не выбран
        [ 0, 10000, 10000, 20000],    // Размер 1500х1000 мм
        [ 0, 10000, 20000, 20000],    // Размер 2000х1500 мм
        [ 0, 20000, 20000, 20000]     // Размер 3000х2200 мм
    ];

    var selrast = document.getElementById("krep"); // Получаем наш список
    var krep = selrast.options[selrast.selectedIndex].value;

    if ( krep == 1 ) {
        if ( size == 1 ) {
            var kp = arrminrast[size][psmt];
        }
        if ( size == 2 ) {
            var kp = arrminrast[size][pmidt];
        }
        if ( size == 3 ) {
            var kp = arrminrast[size][plgt];
        }
        if ( size == 0 ) {
            var kp = 0;
        }
    }
    if ( krep == 2 ) {
        if ( size == 1 ) {
            var kp = arrsredrast[size][psmt];
        }
        if ( size == 2 ) {
            var kp = arrsredrast[size][pmidt];
        }
        if ( size == 3 ) {
            var kp = arrsredrast[size][plgt];
        }
        if ( size == 0 ) {
            var kp = 0;
        }
    }
    if ( krep == 3 ) {
        if ( size == 1 ) {
            var kp = arrmaxrast[size][psmt];
        }
        if ( size == 2 ) {
            var kp = arrmaxrast[size][pmidt];
        }
        if ( size == 3 ) {
            var kp = arrmaxrast[size][plgt];
        }
        if ( size == 0 ) {
            var kp = 0;
        }
    }

    var psumm = sp + pp + lp + w + ip + cp + kp;
    document.getElementById("price_oborud").innerHTML = psumm;
    
    var arrchefmo = [                 // Шеф Монтаж Москва Московская область
        [ 0, 0, 0, 0],                // Размер не выбран
        [ 0, 20000, 20000, 25000],    // Размер 1500х1000 мм
        [ 0, 20000, 25000, 25000],    // Размер 2000х1500 мм
        [ 0, 25000, 25000, 25000]     // Размер 3000х2200 мм
    ];

    var arrskeymo = [                 // Монтажные работы под ключ Москва и МО
        [ 0, 0, 0, 0],                // Размер не выбран
        [ 0, 32000, 32000, 45000],    // Размер 1500х1000 мм
        [ 0, 32000, 45000, 45000],    // Размер 2000х1500 мм
        [ 0, 45000, 45000, 45000]     // Размер 3000х2200 мм
    ];

    var arrchefsng = [                // Шеф Монтаж Россия и СНГ
        [ 0, 0, 0, 0],                // Размер не выбран
        [ 0, 47000, 47000, 57000],    // Размер 1500х1000 мм
        [ 0, 47000, 57000, 57000],    // Размер 2000х1500 мм
        [ 0, 57000, 57000, 57000]     // Размер 3000х2200 мм
    ];

    var arrkeysng = [                 // Монтажные работы под ключ Россия и СНГ
        [ 0, 0, 0, 0],                // Размер не выбран
        [ 0, 69000, 69000, 79000],    // Размер 1500х1000 мм
        [ 0, 69000, 79000, 79000],    // Размер 2000х1500 мм
        [ 0, 79000, 79000, 79000]     // Размер 3000х2200 мм
    ];

    var montaj = document.getElementsByName('works');
    for (var i = 0; i < montaj.length; i++) {
        if (montaj[i].type == "radio" && montaj[i].checked) {
            var mont = montaj[i].value;
        }
    }

    if ( mont == 1 ) {
        if ( size == 1 ) {
            var m = arrchefmo[size][psmt];
        }
        if ( size == 2 ) {
            var m = arrchefmo[size][pmidt];
        }
        if ( size == 3 ) {
            var m = arrchefmo[size][plgt];
        }
        if ( size == 0 ) {
            var m = 0;
        }
    }
    if ( mont == 2 ) {
        if ( size == 1 ) {
            var m = arrskeymo[size][psmt];
        }
        if ( size == 2 ) {
            var m = arrskeymo[size][pmidt];
        }
        if ( size == 3 ) {
            var m = arrskeymo[size][plgt];
        }
        if ( size == 0 ) {
            var m = 0;
        }
    }
    if ( mont == 3 ) {
        if ( size == 1 ) {
            var m = arrchefsng[size][psmt];
        }
        if ( size == 2 ) {
            var m = arrchefsng[size][pmidt];
        }
        if ( size == 3 ) {
            var m = arrchefsng[size][plgt];
        }
        if ( size == 0 ) {
            var m = 0;
        }
    }
    if ( mont == 4 ) {
        if ( size == 1 ) {
            var m = arrkeysng[size][psmt];
        }
        if ( size == 2 ) {
            var m = arrkeysng[size][pmidt];
        }
        if ( size == 3 ) {
            var m = arrkeysng[size][plgt];
        }
        if ( size == 0 ) {
            var m = 0;
        }
    }

    var summ = psumm + m;
    document.getElementById("summ").innerHTML = summ;

    document.getElementById("check-sp").innerHTML = sp;
    document.getElementById("check-pp").innerHTML = pp;
    document.getElementById("check-lp").innerHTML = lp;
    document.getElementById("check-w").innerHTML = w;
    document.getElementById("check-ip").innerHTML = ip;
    document.getElementById("check-cp").innerHTML = cp;
    document.getElementById("check-kp").innerHTML = kp;
    document.getElementById("check-m").innerHTML = m;


    document.getElementById("outtext").value = 
    (
        "Стоимость пленки: " + sp +
        "\nСтоимость проектора: " + pp +
        "\nСтоимость лазера: " + lp +
        "\nСтоимость WUXGA: " + w +
        "\nИсточник: " + ip +
        "\nКоммутация: " + cp +
        "\nКрепление: " + kp +
        "\nМонтаж: " + m
    );

}

И все-таки, может есть вариант передать эту информацию с переносом строки?
В textarea же это выглядит как надо...
А то создавать 10 скрытых инпутов не хочется.

Откуда и куда, и зачем?

Задача:
Передать значения переменных из JS скрипта на почту пользователя, с добавлением "поясняющего" текста.
Чтобы человек на почту получил читабельный текст.

В php я могу вставлять только произвольный текст (html) и value из полей.

Соответсвенно сейчас я могу все необходимые мне переменные передать в <textarea> и потом отправить value на почту.

Проблема в том что в <textarea> переносы на строку действуют, а после отправки все приходит в одну строку, что не удобно...

JS

document.getElementById("outtext").value = 
    (
        "Стоимость пленки: " + sp +
        "\nСтоимость проектора: " + pp +
        "\nСтоимость лазера: " + lp +
        "\nСтоимость WUXGA: " + w +
        "\nИсточник: " + ip +
        "\nКоммутация: " + cp +
        "\nКрепление: " + kp +
        "\nМонтаж: " + m
    );

HTML <textarea>

Стоимость пленки: 22000
Стоимость проектора: 160000
Стоимость лазера: 400000
Стоимость WUXGA: 168000
Источник: 20000
Коммутация: 10000
Крепление: 12000
Монтаж: 79000

А на почте:
Стоимость пленки: 22000 Стоимость проектора: 160000 Стоимость лазера: 400000 Стоимость WUXGA: 168000 Источник: 20000 Коммутация: 10000 Крепление: 12000 Монтаж: 79000

Не надо ничего кроме значения полей формы передавать на сервер, и об этом вам уже твердят несколько постов подряд. Связывайте поля формы с определениями на сервере и формируйте что угодно.

Это:

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

не понимаю. чтобы связать значения value с чем то вразумительным - нужно еще один калькулятор на сервере написать?

для переменной "m" - 12 вариантов значений, в зависимости от значения 4-х селектов, по 3 значения в каждом.
Что я должен сделать, чтобы отправить посчитанную уже переменную по почте, при этом дав описание (по сути указав 1 из 12 значений).

А на каком основании вы пытаетесь втюхать серверу:

"Стоимость пленки: " + sp

а к примеру не

"Крепление: " + sp?

Если на клиенте вы знаете чему что соответствует, то почему сервер не может знать? Если на клиенте можно что-то посчитать, основываясь на выборе пользователя, то почему посчитать не может сервер?

Одна из святых обязанностей сервера, это проверка данных полученных извне. Если вместо данных сервер будет получать хлам типа:

"Стоимость пленки: " + sp +
"\nСтоимость проектора: " + pp +
"\nСтоимость лазера: " + lp +
.....

то для проверки таких данных придется попотеть. Такое можно формировать на клиенте исключительно для него же, если, к примеру, результат этого расчета будет предложено сохранить на клиенте средствами браузера минуя сервер. Вот тогда пожалуйста, что угодно пусть клиент творит, а далее его дело - хоть в рамочку и на стенку, хоть в ведро для мусора.

Но вы то получаете эти данные на сервере, отправляете их почтой, что уже накладывает ответственность на вас как разработчика. Учтите, класс phpmailer не для устранения дыр, которые вы сознательно определяете своим подходом, этот класс всего лишь для грамотного оформления почтовых сообщений. А как, кому и что он будет отправлять определяете вы как разработчик.

Сервер и только он является источником и владельцем данных. Им же определяются и условия, и эти условия могут только портироваться на клиент для использования их в клиентских сценариях, в тех же калькуляторах. Но портирование клиенту не означает, что сервер о них забывает и вообще далее все в руках клиента и сервер полностью ему доверяет.

Я могу описать нечто из данных без базы таким образом:

$data = [
    'figure' => [
        'head' => [
            'label' => 'Фигура',
            'set'   => 'Выберите фигуру',
            'tpl'   => 'Выбрана фигура'
        ],
        'opt' => [
            1 => 'квадрат',
                 'круг',
                 'ромб'
        ] 
    ],
    'size' => [
        'head' => [
            'label' => 'Размер',
            'set'   => 'Выберите размер',
            'tpl'   => 'Выбран размер фигуры'
        ],
        'opt' => [
            1 => 'большой',
                 'средний',
                 'малый'
        ],
    ],
    'color' => [
        'head' => [
            'label' => 'Цвет',
            'set'   => 'Выберите цвет',
            'tpl'   => 'Цвет фигуры выбран'
        ],
        'opt' => [
            1 => 'белый',
                 'черный',
                 'синий'
        ]
    ],
];

И по этим данным буду строить форму:

<form>
<?php
foreach($data as $key=>$val) :
?>
    <div><label><?=$val['head']['label']?>:</label> <select required name="<?=$key?>"><option value=""><?=$val['head']['set']?></option>
<?php
    foreach($val['opt'] as $k=>$v):
?>
        <option value="<?=$k?>"><?=$v?></option>
<?php
    endforeach;
?>
    </select></div>
<?php         
endforeach;
?>
<button>Отправить</button>
</form>

Сервер получая форму, зная, что она должна прислать количество полей равных количеству элементов массива $data и все ключи массива данных этой формы должны соответствовать ключам массива $data, проверяет это условие. Если пользователь выберет в трех списках значение 2, может ли сервер знать что выбрано, и сформировать согласно принятому список, который основан на описании в массиве $data:

Выбрана фигура: круг
Выбран размер фигуры: средний
Цвет фигуры выбран: черный

???

Наверное же это не будет для него проблемой. Вы думаете для него будет проблемой что-то и посчитать, если он знает, что цена за единица товара Т, идентификатор которого равен 15, равна 200 руб., а формой прислано под ключом 'goods' определяющем выбор товара, во вложении под ключом 15, значение равное 3, которое означает количество выбранного?

Прежде чем писать приложения, а тем более многопользовательские и открытые "всем ветрам", нужно изучить способы хранения данных на сервере - почему так, а не иначе, с чем это связано и т.д. Не зная этого, вы ставите все с ног на голову.