24.02.2017, 23:07
|
|
Интересующийся
|
|
Регистрация: 20.02.2017
Сообщений: 18
|
|
|
Ajax-Javascript обратная связь
Не могу получить информацию обратно. Нужно с помощью ajax мне моментально выводилась стоимость. Сразу же после того как ввиду длину и высоту и походу от моих действий изменялась.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="analytics.js"></script>
<script type="text/javascript" src="script.js"></script>
<!--<script type="text/javascript" src="calc.js"></script>
<script>
function funcGiff() {
$("#information").text ("Please wait...");
}
function funcSuccess(data) {
$("#information").text (data);
}
$(document).ready (function () {
$("#load").bind("click", function () {
//var itogo = "Стоимость:";
var res = itog;
$.ajax({
url: "www.php",
type: "POST",
data: ({name : res}),
dataType: "js",
beforeSend: funcGiff,
success: funcSuccess
});
});
});
</script>-->
</head>
<body>
<div class="content_calck">
<div class="fix">
<div class="top"><canvas id='example'></canvas></div>
</div>
</div>
<div class="content_calck_block_2">
<div class="fix">
<h2>Рассчитать <span style="color: #ffb400;">стоимость</span></h2>
<div class="calc">
<center>
<form id="load" name="form1">
<table border=1 cellpadding=5 cellspacing=0>
<table>
<tr>
<td>Вид лесов</td>
<td id="les">
<input type=radio name="vidlesov" value="lrsp30" checked><label>ЛРСП-30</label>
<input type=radio name="vidlesov" value="lrsp40"><label>ЛРСП-40</label>
<input type=radio name="vidlesov" value="lrsp60"><label>ЛРСП-60</label>
<input type=radio name="vidlesov" value="lrsp100"><label>ЛРСП-100</label>
</td>
</tr>
<tr>
<td>Длина и высота объекта</td>
<td><input class="block" type="namber" name="d" placeholder="Длина, м" size=15 maxlength=10 required>
<input type="namber" name="h" placeholder="Высота, м" size=15 maxlength=10 required></td>
</tr>
<tr>
<p class="cratno">кратно 3</p>
<td>Число рабочих ярусов</td>
<td><input type="namber" name="yarus" size=15 maxlength=10 required></td>
</tr>
<tr>
<td>Комплектация связями</td>
<td>
<input type=radio name="connect" value="chess" checked>шахматный порядок
<input type=radio name="connect" value="solid">сплошная
</td>
</tr>
<tr>
<td>Количество подъемов</td>
<td><input name="ascent" type="namber" placeholder="2" required></td>
</tr>
<tr>
<td>Комплектация опорами</td>
<td>
<input type=radio name="support" value="yes" checked>да
<input type=radio name="support" value="no">нет
</td>
</tr>
<tr>
<td>Комплектация кронштейнами</td>
<td>
<input type=radio name="bracket" value="yes" checked>да
<input type=radio name="bracket" value="no">нет
</td>
</tr>
<tr>
<td>
<!--<input type="button" name="button" value="Вычислить" onClick="areaRectangle();"><br><br>
<input type="text" name="res" size="10">-->
</td>
</tr>
</table>
</td></tr></table>
<div id="information" name="res1"></div>
</form>
<p id="demo"></p>
</center>
</div>
</div>
</div>
</body>
</html>
<?php
echo "Стоимость:".$_POST['name'];
?>
/**
* Created by W1LD on 21.02.2017.
*/
/**
Шаг-3,5
*/
function funcGiff() {
$("#information").text ("Please wait...");
}
function funcSuccess(data) {
$("#information").text (data);
}
$(document).ready (function () {
$("#load").bind("click", function () {
//var itogo = "Стоимость:";
var res = itog;
$.ajax({
url: "www.php",
type: "POST",
data: ({name : res}),
dataType: "js",
beforeSend: funcGiff,
success: funcSuccess
});
});
});
function areaRectangle() {
var el = document.querySelector('[name="vidlesov"]:checked')||{value : "x"} ;
var cena = {"lrsp30" : 100, "lrsp40" : 200, "lrsp60" : 300, "lrsp100" : 400}[el.value];
var i = document.form1.d.value,
h = document.form1.h.value;
if (i%3 > 0) {
i = --i;
}
if (i%3 > 0) {
i = --i;
}
if (h%2 > 0) {
h = --h;
}
var s, section, yarus, itog;
s = i*h;
yarus = document.form1.yarus.value;
section = (h/2)*(i/3);
var yarus1 = i/3;
var sectionYarus = yarus*yarus1;//цена ригели = 30р за шт, настил = 50р за шт
var sectionYarus1 = (sectionYarus*60)+(sectionYarus*150);
var solid1 = section*65;//65p цена одной сплошной
var chess1 = section/2;//80р цена одной шахматы
if (chess1%2 == 0) {
chess = section/2*65+section/2*80;
} else if (chess1%2 > 0){
chess = (section/2-0.5)*65+(section/2+0.5)*80
}
var el1 = document.querySelector('[name="connect"]:checked')||{value : "x"};
var connection = {"chess" : chess, "solid" : solid1} [el1.value];
var ascent = document.form1.ascent.value;// price ascent 70p шт
ascent = ascent*70;
var el2 = document.querySelector('[name="support"]:checked')||{value : "x"};
var support1 = (yarus1+1)*2*120;//120Р цена за 1 опору
var supports = {"yes" : support1, "no" : 0}[el2.value];
var el3 = document.querySelector('[name="bracket"]:checked')||{value : "x"};
var bracket1 = ((i/3)+1)*(h/2)/2;
if (bracket1%2 == 0) {
bracket2 = bracket1*30;//30 цена за 1 шт
} else if (bracket1%2 > 0) {
bracket2 = (bracket1-0.5)*30;
}
var bracket = {"yes" : bracket2, "no" : 0}[el3.value];
itog = cena+sectionYarus1+ascent+connection+supports+bracket;
//document.form1.res.value = itog;
}
Подскажите пожалуйста как это воплотить.
|
|
25.02.2017, 03:57
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от DeathDji
|
|
с помощью ajax мне моментально выводилась стоимость.
|
Если так, то зачем же тогда это function areaRectangle()? |
|
25.02.2017, 11:19
|
|
Интересующийся
|
|
Регистрация: 20.02.2017
Сообщений: 18
|
|
|
Он даже начало не считает сразу ошибку выдает
Uncaught TypeError: Cannot read property 'd' of undefined
at script.js:31
|
|
25.02.2017, 13:41
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от DeathDji
|
|
Он даже начало не считает сразу ошибку выдает
|
Ну с такой формой и ее обработкой, это не удивительно. )
Я не об ошибках, пока интересует вопрос - за какой ценой клиент обращается к серверу и зачем? |
|
25.02.2017, 15:15
|
|
Интересующийся
|
|
Регистрация: 20.02.2017
Сообщений: 18
|
|
Я маленько может не понял вопроса. Он обращается за ценой всего строительно леса, который ему необходим. Указывает длину и высоту чтобы получить площадь своего леса, кол-во секций т.д., и стоимость этого всего. То есть когда он набирает длину и высоту ему сразу рассчитывается стоимость, следом он набирает кол-во ярусов стоимость увеличивается. Весь расчет производится сразу после ввода данных. У меня не получается это сделать. Сначала у меня был button при клике выдавалась стоимость из расчета введенных данных. Но мне нужно чтобы расчет производился сразу же после ввода. Типа как http://www.xxlesa.ru/o-produkcii/calc/ ТУТ |
|
25.02.2017, 17:20
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Понятно. Ну зачем тогда опрашивать сервер?
Например, если магазин ведет учет товаров и не оперирует "извините, подождите", то он имеет полный контроль над корзиной. То есть корзина хранится на сервере, добавление товара в нее только через сервер, он же рассчитывает стоимость корзины возвращая ее клиенту, который просто размещает информацию на странице.
В вашем же случае, это просто калькулятор, сервис для клиента. Цены всего нужно отдавать клиенту сразу при формировании страницы (формы). Но только не помещать эти данные в функцию как объект, так как если что-то изменилось, придется руками править скрипт, что есть не гут. Цены можно прописать в атрибутах полей формы, откуда их и брать.
Такое - document.querySelector('[name="vidlesov"]:checked')||{value : "x"}, конечно не серьезно, хотя бы уже потому, что есть значение по умолчанию.
value="lrsp30", value="chess", value="yes", ... - это совсем плохо. Как говорят математики - "Мы можем описать цифрами все что угодно". У цифр в отличии от строк есть есть одна особенность - с ними работать легче. Держать данные на сервере в виде "lrsp30", "chess" никуда не годится, если данные описывают набор свойств. Данные хранят в базе, и для подобных наборов (если они фиксированы) в ней существует удобный тип - ENUM. В описаниях набора, это строки, а во внутреннем представлении, это числа. Форма принятая от клиента подлежит обязательной проверке, а зная, что тип ожидаемых данных это integer, даже простейшими операциями легко проверить форму. С набором же "lrsp30", "lrsp40", "lrsp60", ... придется попотеть.
Посчитал клиент на калькуляторе без всяких запросов сервера, отправил форму, которая отражает выбор пользователя, теперь уже сервер зная все цены, на основе выбора клиента считает и проверяет. Если Ок, работает далее, если нет, возвращает клиенту ошибки, пусть трудится.
|
|
25.02.2017, 18:45
|
|
Интересующийся
|
|
Регистрация: 20.02.2017
Сообщений: 18
|
|
|
Огромное спасибо я кажется догнал. Да с цифрами проще работать. Так значит лучше вообще обойтись без php? Смотрел везде че как делать, все не то, все через php, все только по клику кнопки. Может знаете где можно посмотреть хорошие уроки(подсказки), что то близкое к этому. А то Google меня не понимает)))
Последний раз редактировалось DeathDji, 25.02.2017 в 19:28.
|
|
25.02.2017, 19:21
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от DeathDji
|
|
Так значит лучше вообще обойтись без php?
|
Это как, форма для кого тогда как не для сервера?
|
Сообщение от DeathDji
|
|
Может знаете где можно посмотреть хорошие уроки(подсказки), что то близкое к этому
|
Конкретно к вашему примеру вряд-ли, а вот о всяких калькуляторах тем в сети море. Калькулятор он и в Африке калькулятор, может только условия и логика иная может быть, а так все едино.
Сперва надо не калькуляторы читать, а с html разобраться, так как <table border=1 cellpadding=5 cellspacing=0> <table>, это ошибка. Поле формы type=" namber" может и появится в HTML505, но в настоящее время только type=" number", у которого нет maxlength=10, зато есть min и мах.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('#load').on('change input', function() {
var e = $(this.elements), //коллекция полей формы
v, f, s = 0, o = $('#info');
e.filter('[required]').each(function() { //обход полей ввода
f = this.name; //текущее поле, по его имени можно определять те или иные операции
this.value = v = +$.trim(this.value) || this.min; //значение не меньше минимального
//расчет и вывод, далее просто пример
s += e.filter('[name="vidlesov"]:checked').data('price') * v;
})
o.text(s)
})
});
</script>
<form id="load">
<table>
<tr>
<td>Вид лесов</td>
<td id="les">
<label><input type="radio" name="vidlesov" data-price="100" value="1" checked=""> ЛРСП-30</label>
<label><input type="radio" name="vidlesov" data-price="200" value="2"> ЛРСП-40</label>
<label><input type="radio" name="vidlesov" data-price="300" value="3"> ЛРСП-60</label>
<label><input type="radio" name="vidlesov" data-price="400" value="4"> ЛРСП-100</label>
</td>
</tr>
<tr>
<td>Длина и высота объекта</td>
<td><input class="block" min="1" max="5" type="number" value="1" name="d" required>
<input type="number" min="1" max="5" name="h" value="1" required></td>
</tr>
<tr>
<p class="cratno">кратно 3</p>
<td>Число рабочих ярусов</td>
<td><input type="number" min="1" max="5" name="yarus" value="1" required></td>
</tr>
<tr>
<td>Комплектация связями</td>
<td>
<label><input type="radio" name="connect" value="0" checked> шахматный порядок</label>
<label><input type="radio" name="connect" value="1"> сплошная</label>
</td>
</tr>
<tr>
<td>Количество подъемов</td>
<td><input name="ascent" type="number" min="1" max="5" value="1" required></td>
</tr>
<tr>
<td>Комплектация опорами</td>
<td>
<label><input type="radio" name="support" value="1" checked> да</label>
<label><input type="radio" name="support" value="0"> нет</label>
</td>
</tr>
<tr>
<td>Комплектация кронштейнами</td>
<td>
<label><input type="radio" name="bracket" value="1" checked> да</label>
<label><input type="radio" name="bracket" value="0"> нет</label>
</td>
</tr>
</table>
<div id="info"></div>
</form>
Здесь для примера - обрабатываются события изменения и ввода полей формы. Из коллекции полей формы берутся обязательные поля и обходятся в цикле .each(). Цены для первой группы кнопок содержатся в атрибутах ее полей - data-price. Аналогично можно хранить цены или корректирующие значения в других группах кнопок. То есть при каждом изменении формы производится расчет.
name="connect" value="0" - значение по умолчанию, удобно будет 0.
name="support" value="1" - значение 1 будет удобно для "да", и 0 для "нет".
Разберетесь с этим, значит сделаете, нет, значит нет. А что там у вас за расчеты, темный лес, и чтобы понять что к чему, нужно знать условия, именно поэтому найти в сети калькулятор именно для вас, это нонсенс. )
Последний раз редактировалось laimas, 25.02.2017 в 19:33.
|
|
26.02.2017, 12:58
|
|
Интересующийся
|
|
Регистрация: 20.02.2017
Сообщений: 18
|
|
|
Огромное спасибо вам за информацию, за код, за ваши знания переданные мне, и потраченное время. Впредь буду делать все красиво)))
|
|
|
|
