02.06.2017, 11:22
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
Не получается отправить форму с калькулятора
Здравствуйте!
Скопировал с одного сайта Wordpress на другой калькулятор. Все работает, за исключением отправки формы.
<form method="post" action="/wp-content/themes/xmag-child/calc/mail.php?go=quick" id="form_888">
<h3>Калькулятор стоимости</h3>
<div class="pole_calc inline-str"><input type="tel" class="valid" name="sq" id="sq" style="width:73px" placeholder=" 60-3000" /><label>Площадь (кв.м.)</label></div>
<div class="pole_calc inline-str"><input type="tel" name="th" class="valid" id="th" style="width:73px" placeholder=" 50-150" /><label>Толщина (мм)</label></div>
<div class="pole_calc inline-str"><input type="tel" name="et" id="et" style="width:50px" class="valid" placeholder=" 1-25" /><label>Этаж</label></div>
<p>Местоположение объекта: <input type="text" name="dst" id="dst" style="width:187px" class="valid" placeholder=" Населенный пункт" required/> </p>
<input type="hidden" name="contact_subject" value="Предварительный расчет стоимости стяжки" />
<input type="button" id="calk" style="display: inline-block !important;text-align: center;border-radius: 4px;background: #FF5100;; width:190px; height:41px; border:none;cursor:pointer;color:#fff;" value="Расчет стоимости"/>
<input type="reset" style="display: inline-block !important;text-align: center;border-radius: 4px;background: #20AA73;; width:150px; height:41px; border:none;cursor:pointer;color:#fff;" value="Очистить"/>
<p>Итого:</p><b><input type="text" id="results" name="price" value="" readonly /></b>
<p>Отправить расчет на свою почту:</p>
<input type="email" name="useremail" id="calc_email" value="" required/>
<input type="button" class="button" value="Отправить" id="button_888"/>
</form>
jQuery(function(){
//... функции расчетов самого калькулятора пропускаю - оставил только нажатие на кнопку отправить...
jQuery('#button_888').click(function(){
if(Valid()){
if(obrCalc()){
var json = {
area: jQuery('#sq').val(),
aver_thick_screed: jQuery('#th').val(),
floor: jQuery('#et').val(),
Location_of_object: jQuery('#dst').val(),
summa: jQuery('#results').val(),
my_mail: jQuery('#calc_email').val()
};
jQuery.post('/wp-content/themes/xmag-child/calc/mail.php',json,function(data){
data = JSON.parse(data);
console.log(data);
if(data['status']=='1'){
alert('Ваш заказ принят, спасибо!');
}
});
}
}
});
});
При нажатии на кнопку "Отправить" ничего не происходит, в консоле после нажатия кнопки вижу ошибку: "(index):322 Uncaught ReferenceError: Valid is not defined".
Пробовал убрать if(Valid()){} - тогда "Uncaught SyntaxError: Unexpected token o"
Возможно, это из-за версии jQuery? Как исправить?
|
|
02.06.2017, 11:47
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
кажется понял - там еще в другом файле всякие функции js прописаны... 
сейчас попробую разобраться "методом" тыка... ( |
|
02.06.2017, 11:52
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Функции Valid и obrCalc имеются или просто скопирован код чужой?
Отправлять как var json = { area: jQuery('#sq').val() .... так принципиально? Тогда почему не просто $(form).serializeArray()?
data = JSON.parse(data); - тут либо проверка нужна, что да, положительно, либо определите тип данных ожидаемых у метода post(), в случае ошибки data ничего не вернет, иначе готовый объект.
|
|
02.06.2017, 12:34
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
нашел функцию Valid в другом файле (функция obrCalc тоже имеется)
теперь письма отправляются, но не появляется сообщение об успешной отправке (Ваш заказ принят, спасибо!)... и в консоле: "Uncaught SyntaxError: Unexpected token o"
|
|
02.06.2017, 12:53
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Значит сервер вернул не json.
|
|
02.06.2017, 12:59
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
Сообщение от laimas
|
|
Значит сервер вернул не json.
|
А как теперь быть? |
|
02.06.2017, 13:19
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от Igorsrt
|
|
А как теперь быть?
|
А зачем вам JSON, для того чтобы сообщить 'Ваш заказ принят, спасибо!'? Это сообщение может и сервер вернуть, а клиент просто вывести.
JSON, значит можно вернуть сообщения об ошибках ввода в конкретных полях формы, что и обязан делать сервер - проверять полученные данные. У вас этого нет, а проверка на клиенте, это лажа для сервера.
Так что разберитесь сначала чего вы делаете на сервере. |
|
02.06.2017, 15:40
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
Сообщение от laimas
|
|
А зачем вам JSON, для того чтобы сообщить 'Ваш заказ принят, спасибо!'? Это сообщение может и сервер вернуть, а клиент просто вывести.
|
Я не особо в этом понимаю... (скопировал готовый калькулятор)... мне бы подсказочку, что в коде написать что бы сообщение появлялось (можно и без JSON) |
|
02.06.2017, 16:05
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Зачем тогда копируете чужое, да еще не понимая что к чему. И какую вам подсказочку можно дать не имея понятия что происходит на сервере?
Вот это к примеру
input type="tel" class="valid" name="sq" id="sq"
но
area: jQuery('#sq').val()
для чего? Это кто такое придумал, вы или же скопировано так? Почему тогда не сразу name="area" и отправлять форму обрабатывая это событие? Сервер хоть ожидает area или ...?
Valid() и obrCalc() для сервера пустой звук, он об этом не знает. Хотите получать почту, значит проверяйте форму на сервере, реагируйте на ошибки заполнения.
А вариантов диалога клиент-сервер может быть множество, все их как примеры перечислять зачем, чтобы вы их как это код копировали "как есть" и "а че не работает?".
|
|
02.06.2017, 16:42
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
Сообщение от laimas
|
Зачем тогда копируете чужое, да еще не понимая что к чему. И какую вам подсказочку можно дать не имея понятия что происходит на сервере?
Вот это к примеру
input type="tel" class="valid" name="sq" id="sq"
но
area: jQuery('#sq').val()
для чего? Это кто такое придумал, вы или же скопировано так? Почему тогда не сразу name="area" и отправлять форму обрабатывая это событие? Сервер хоть ожидает area или ...?
Valid() и obrCalc() для сервера пустой звук, он об этом не знает. Хотите получать почту, значит проверяйте форму на сервере, реагируйте на ошибки заполнения.
А вариантов диалога клиент-сервер может быть множество, все их как примеры перечислять зачем, чтобы вы их как это код копировали "как есть" и "а че не работает?".
|
Ваш упрек правильный - мне и самому не приятно что-то делать не понимаю сути... но в свое время, я именно так "методом тыка" изучил html, css и даже немного php. JS для меня пока "темный лес" - это правда ((
Передо мной стоит задача - перенести готовый калькулятор (не украденный, а сделанный на заказ) с одного сайта на другой и немного переработать внешний вид. Калькулятор состоит из двух файлов, насколько я понимаю calc.php и mail.php (собственно сама отправка почты)
calc.php (туда же перенес функцию Valid(), которая была в отдельном js файле:
<form method="post" action="/wp-content/themes/xmag-child/calc/mail.php?go=quick" id="form_888">
<h3>Калькулятор стоимости</h3>
<div class="pole_calc inline-str"><input type="tel" class="valid" name="sq" id="sq" style="width:73px" placeholder=" 60-3000" /><label>Площадь (кв.м.)</label></div>
<div class="pole_calc inline-str"><input type="tel" name="th" class="valid" id="th" style="width:73px" placeholder=" 50-150" /><label>Толщина (мм)</label></div>
<div class="pole_calc inline-str"><input type="tel" name="et" id="et" style="width:50px" class="valid" placeholder=" 1-25" /><label>Этаж</label></div>
<p>Местоположение объекта: <input type="text" name="dst" id="dst" style="width:187px" class="valid" placeholder=" Населенный пункт" required/> </p>
<input type="hidden" name="contact_subject" value="Предварительный расчет стоимости стяжки" />
<input type="button" id="calk" style="display: inline-block !important;text-align: center;border-radius: 4px;background: #FF5100;; width:190px; height:41px; border:none;cursor:pointer;color:#fff;" value="Расчет стоимости"/>
<input type="reset" style="display: inline-block !important;text-align: center;border-radius: 4px;background: #20AA73;; width:150px; height:41px; border:none;cursor:pointer;color:#fff;" value="Очистить"/>
<p>Итого:</p><b><input type="text" id="results" name="price" value="" readonly /></b>
<p>Отправить расчет на свою почту:</p>
<input type="email" name="useremail" id="calc_email" value="" required/>
<input type="button" class="button" value="Отправить" id="button_888"/>
</form>
<script type="text/javascript">
jQuery(function(){
jQuery('.trigger#trigger .t').text('Калькулятор');
jQuery('#calk').click(function(){
obrCalc();
});
var obrCalc = function(){
var sq = jQuery('#sq').val();
var th = jQuery('#th').val();
var et = jQuery('#et').val();
var dst = jQuery('#dst').val();
var k1 = 0; var k2 = 0; var k3 = 0;
var checkErr = false;
var x = 1;
var y = 0;
var z = 0;
/*проверка ввода*/
if ((sq == 0)||(th == 0)||(et == 0)){
alert('Необходимо указать все размеры!');
return;
}
if (isNaN(sq) || isNaN(th) || isNaN(et)){
alert('Введите число!');
return;
}
//..здесь всякие расчеты - убрал что бы место не занимало
function Valid(){
res = true;
jQuery('form#form_888 input.valid').each(function(){
if ( jQuery(this).val() == '') {
jQuery(this).addClass('novalid');
jQuery(this).addClass('animated');
jQuery(this).addClass('shake');
res = false;
}
});
return res;
};
function SayHello(){
if( Valid() ) {
jQuery('.trigger.active').trigger('click');
var th = jQuery('form#form_888');
jQuery.ajax({
type: "POST",
url: "/wp-content/themes/xmag-child/calc/mail.php", //Change
data: th.serialize()
}).done(function() {
// ThsPopUp(true);
swal("Благодарим за заявку!", "Просчет отправлен на вашу почту!", "success");
});
return false;
}
};
jQuery('.fa.fa-times').click(function(){
ThsPopUp(false);
});
jQuery('#button_888').click(function(){
if(Valid()){
if(obrCalc()){
var json = {
area: jQuery('#sq').val(),
aver_thick_screed: jQuery('#th').val(),
floor: jQuery('#et').val(),
Location_of_object: jQuery('#dst').val(),
summa: jQuery('#results').val(),
my_mail: jQuery('#calc_email').val()
};
jQuery.post('/wp-content/themes/xmag-child/calc/mail.php',json,function(data){
data = JSON.parse(data);
console.log(data);
if(data['status']=='1'){
alert('Ваш заказ принят, спасибо!');
}
});
}
}
});
});
</script>
mail.php:
<?php
/*
* Contact Form Class
*/
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
$admin_email = "mail@mail.ru"; // Your Email
$message_min_length = 1; // Min Message Length
class Contact_Form{
function __construct($details, $email_admin){
$this->area = trim(stripslashes($details['area']));
$this->aver_thick_screed = trim(stripslashes($details['aver_thick_screed']));
$this->floor = trim(stripslashes($details['floor']));
$this->Location_of_object = trim(stripslashes($details['Location_of_object']));
$this->summa = trim(stripslashes($details['summa']));
$this->my_mail = trim(stripslashes($details['my_mail']));
$this->subject = "Заказ с калькулятора!"; // Subject
$this->message =
"<h1>Данные отправителя</h1>
<div style='font: 14px \"trebuchet ms\";'>
<br>
Площадь помещения (кв.м.): <b>".$this->area."</b>
<br>
Средняя толщина стяжки (мм): <b>".$this->aver_thick_screed."</b>
<br>
Этаж: <b>".$this->floor."</b>
<br>
Местоположение объекта: <b>".$this->Location_of_object."</b>
<br>
Итого: <b>".$this->summa."</b>
<br>
Почта отправителя: <b>".$this->my_mail."</b>
</div>";
$this->email_admin = $email_admin;
$this->response_status = 1;
$this->response_html = "Ваша заказ принят!";
}
private function sendEmail(){
$mail = mail($this->email_admin, $this->subject, $this->message,
"From: Teeth\r\n"
."Content-type: text/html; charset=utf-8\r\n"
."Reply-To: ".$this->contact."\r\n"
."X-Mailer: PHP/" . phpversion());
$mail2 = mail($this->my_mail, $this->subject, $this->message,
"From: Teeth\r\n"
."Content-type: text/html; charset=utf-8\r\n"
."Reply-To: ".$this->contact."\r\n"
."X-Mailer: PHP/" . phpversion());
if($mail)
{
$this->response_status = 1;
$this->response_html = $this->message;
}
}
function sendRequest(){
if($this->response_status)
{
$this->sendEmail();
}
$response = array();
$response['status'] = $this->response_status;
$response['html'] = $this->message;
echo json_encode($response);
}
}
$contact_form = new Contact_Form($_POST, $admin_email);
$contact_form->sendRequest();
?>
|
|
|
|
