ThunderCat

Вопрос: как после обновления страницы сохранить эти данные, мол купон такой-то активирован. У меня код купона, его скидка и статус пишутся в массив $_SESSION.

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

1) Каждую секунду обновлять данные - плохо, рано или поздно это приведет к неоправдано высокой нагрузке сервера.
2) По уму на такие задачи поднимают сокет, и при изменении на сервере рассылают в нужные сокеты изменившуюся информацию.
3) Как простой вариант - по setInterval() запускайте аякс запрос и полученные данные выводите в нужный див.

Как нужно действовать (в принципе всегда):
1) Проверить что форма срабатывает и делает запрос: открываем консоль разработчика в браузере - нетворк, субмитим форму - смотрим что форма сделала запрос к серверу. Если не сделала - разбираемся в консоли какие ошибки со скриптами и все чиним.
2) В отсылаемом запросе смотрим данные, которые отправляет скрипт, а так же ответ сервера, на предмет ошибок. Если есть ошибки - исправляем.
3) Проверяем данные которые пришли на сервер, делаем var_dump($_POST), смотрим - то ли пришло на сервер. Если что-то не пришло - возвращаемся на фронт и ищем ошибку в хтмл разметке и форме.
4) Правильные данные сначала вставляем в отдельную переменную как строку запроса, а потом передаем ее на выполнение в $mysql->query(). Таким образом перед выполнением запроса можно тем же var_dump() вывести запрос и проверить его визуально на правильность, ну или вставить руками в бд через phpmyadmin или другой инструмент работы с бд. Посмотреть ошибки - исправить.
5) Во всех случаях нужно использовать подготовленные выражения. Код станет на 3 строчки длиннее, но на 90% качественнее.
Профит.

Короче, код конечно... давайте по пунктам, так проще будет.
1) onfocus="validateFreight()" onchange="validateConfirm()" - так делать не надо. Делаете биндинг события по загрузке документа, это аккуратнее и прозрачнее.
2) function validateFreight() и validateVolume() внутри себя каждый раз при вызове создают 2 константы, которые опять же можно было определить вне этой функции и один раз определять по загрузке документа, и так же каждый раз вешает биндинг на событие freight.oninput, НО НЕ ВЫЗЫВАЕТ НИКАКИХ ПРОВЕРОК в момент вызова, соответственно if(validateVolume() && validateFreight()) никогда срабатывать не будут, так как по сути нифига не проверяют.

Пр обновлении страницы он на секунду разворачивается и сворачивается обратно. Как убрать это?

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

Как убрать это?

1) в коде добавить элементу closed, и уже при вызове функции убирать, если в куке нужный флаг. Задержка тоже будет, но уже на открытие, что не так страшно.
2) На стороне сервера проверять куку, и добавлять в разметку нужный класс еще на сервере.

https://www.google.ru/search?q=js+image+crop