Получение результата вычесления php из формы через AJAX

[nartan]

Код формы:

<form action="cgi-bin/calc.php" method="post" id="Calculating" >
<table>
<tr>
<td><label for="sityfrom">Город отправитель:</label></td>
<td>
<select name="sityfrom" id="sityfrom" >
<option value=1>Москва</option>
<option value=2>Ростов-на-Дону</option>
</select>
</td></tr>

<tr>
<td><label for="sityto">Город получатель:</label></td>
<td>
<select name="sityto" id="sityto" >
<option value=1>Москва</option>
<option value=2>Ростов-на-Дону</option>
</select></td></tr>

<tr><td>
<label for="ves">Вес груз, кг:</label></td><td><input type="text" name="ves" value="" id="ves"></td></tr>
<tr><td><label for="vol">Объем, м3:</label></td><td><input type="text" name="vol" value="" id="vol"></td></tr>
<tr><td><label for="ins">Дополнительное страхование:</label></td><td><input type="checkbox" name="ins" value="1" id="ins" ></td></tr>
<tr><td><label for="price">Стоимость груза, руб.:</label></td><td><input type="text" name="price" value="" id="price" >
</td></tr>
<tr><td>
<input type="button" onclick="send();" value="Отправить" /></td><td> <div id="result"> </div> </td></tr>
</table>
</form>

Скрипт получает данные и обрабатывает:

$cityfrom=$_POST['cityfrom'];
$sityto=$_POST['sityto'];
$ves=$_POST['ves'];
$vol=$_POST['vol'];
$ins=$_POST['ins'];
$price=$_POST['price'];

//вычисления для полученных данных

echo "Стоимость перевозки $price_end рублей"; // результат

Сам скрипт имеет вид:

<script>  
function send()
{
//Получаем параметры
var cityfrom = $('#cityfrom').val()
var sityto = $('#sityto').val()
var ves = $('#ves').val()
var vol = $('#vol').val()
var ins = $('#ins').val()
var price = $('#price').val()
var zab_m = $('#zab_m').val()
  // Отсылаем паметры
       $.ajax({
                type: "POST",
                url: "cgi-bin/calc.php",
				data: "cityfrom="+cityfrom+"&sityto="+sityto+"&ves="+ves+"&vol="+vol+"&ins="+ins+"&price="+price+"&zab_m="+zab_m,
                // Выводим то что вернул PHP
                success: function(html) {
 //предварительно очищаем нужный элемент страницы
                        $("#result").empty();
//и выводим ответ php скрипта
                        $("#result").append(html);
                }
        });

}
</script>

Наверное где-то допущена очень грубая ошибка, но я не могу её найти. Это мои первые пробы, помогите разобраться, пожалуйста.

[Burevestnik]

Попробуйте в функции send() строку data: оформить без переносов (в одну строку)

P.S. у меня из за переносов в консоли ошибка отображается

а также в php скрипте не увидел где высчитывается переменная $price_end

[nartan]

Попробуйте в функции send() строку data: оформить без переносов (в одну строку)

P.S. у меня из за переносов в консоли ошибка отображается

а также в php скрипте не увидел где высчитывается переменная $price_end

На другом форуме подсказали, что проблема вот в чем: Форму _так_ никто не сабмиттит на jQuery. Это вредно для здоровья, надо смотреть функцию ajaxSubmit() в jQuery

Код php работает, я чтобы не загружать страницу не стал его весь выводить. Если интересно, вот так выглядит:

<?php
$cityfrom=$_POST['cityfrom'];
$sityto=$_POST['sityto'];
$ves=$_POST['ves'];
$vol=$_POST['vol'];
$ins=$_POST['ins'];
$price=$_POST['price'];

$marshrut=$cityfrom.$sityto;

$marshrut=$cityfrom.$sityto;

if (($marshrut==12)||($marshrut==21)){
		if ( $ves<=100 ) {$ves*=6.21;}
		elseif ( ($ves<=200) && ($ves>100) ) {$ves*=6.1;}
		elseif ( ($ves<=300) && ($ves>200) ) {$ves*=5.99;}
		elseif ( ($ves<=400) && ($ves>300) ) {$ves*=5.9;}
		elseif ( ($ves<=500) && ($ves>400) ) {$ves*=5.88;}
		elseif ( ($ves<=700) && ($ves>500) ) {$ves*=5.66;}
		elseif ( ($ves<=1000) && ($ves>700) ) {$ves*=5.55;}
		elseif ( ($ves<=1500) && ($ves>1000) ) {$ves*=5.35;}
		elseif ( ($ves<=2000) && ($ves>1500) ) {$ves*=5.12;}
		elseif ( ($ves<=2500) && ($ves>2000) ) {$ves*=5.02;}
		elseif ( ($ves<=3000) && ($ves>2500) ) {$ves*=4.91;}
		else {$ves*=4.79;}
	}
else {
exit("Маршрут отсутствует!");
}

$vol*=220;
if ( $vol>$ves ){$price_end=$vol;}
else { $price_end=$ves; }

if ($ins==true) {
$price_end=($price*0.45+$price_end);
}



echo "Стоимость перевозки $price_end рублей";

?>

Edited June 18, 2012 by nartan

[NeoXidizer]

см.ниже.

Edited June 18, 2012 by NeoXidizer

[NeoXidizer]

к слову, лучше как-то так:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<form action="calc.php" method="post" id="Calculating" >
<p>
	<label for="cityfrom">Город отправитель:</label>
	<select name="cityfrom" >
		<option value="1" selected>Москва</option>
		<option value="2">Ростов-на-Дону</option>
	</select>
</p>
<p>
	<label for="sityto">Город получатель:</label>
	<select name="sityto" >
		<option value="1" selected>Москва</option>
		<option value="2">Ростов-на-Дону</option>
	</select>
</p>
<p>
	<label for="ves">Вес груз, кг:</label>
	<input type="text" name="ves" value="">
</p>
<p>
	<label for="vol">Объем, м3:</label>
	<input type="text" name="vol" value="">
</p>
<p>
	<label for="ins">Дополнительное страхование:</label>
	<input type="checkbox" name="ins" >
</p>
<p>
	<label for="price">Стоимость груза, руб.:</label>
	<input type="text" name="price" value="">
</p>
<input type="button" onclick="send();" value="Отправить" />
<div id="result"></div>
</form>
<script>  
function send() {
	$.ajax({
		type: "POST",
		url: "calc.php",
		data: $('#Calculating').serialize(),
		// Выводим то что вернул PHP
		success: function(html) {
			$("#result").html(html);
		}
	});
}
</script>

<?php
// Здесь дополнительная проверка на вводимые значения, включая оповещение, если пользователь ничего не ввел
$cityfrom = $_POST['cityfrom'];
$sityto = $_POST['sityto'];
$ves = (int)$_POST['ves'];
$vol = (int)$_POST['vol'];
$ins = (isset($_POST['ins']) ? 1 : 0);
$price = (int)$_POST['price'];

$marshrut = $cityfrom . $sityto;

// Насчет проверки... если $ves == 0 (пользователь не ввел), то событие пройдет
if ($marshrut==11 || $marshrut==12)
	if ( $ves<=100 ) $ves*=6.21;
	elseif ( $ves<=200 && $ves>100 ) $ves*=6.1;
	elseif ( $ves<=300 && $ves>200 ) $ves*=5.99;
	elseif ( $ves<=400 && $ves>300 ) $ves*=5.9;
	elseif ( $ves<=500 && $ves>400 ) $ves*=5.88;
	elseif ( $ves<=700 && $ves>500 ) $ves*=5.66;
	elseif ( $ves<=1000 && $ves>700 ) $ves*=5.55;
	elseif ( $ves<=1500 && $ves>1000 ) $ves*=5.35;
	elseif ( $ves<=2000 && $ves>1500 ) $ves*=5.12;
	elseif ( $ves<=2500 && $ves>2000 ) $ves*=5.02;
	elseif ( $ves<=3000 && $ves>2500 ) $ves*=4.91;
	else $ves*=4.79;
else
	exit("Маршрут отсутствует!");

$vol *= 220;
$price_end = (($vol>$ves) ? $vol : $ves);

if ($ins)
	$price_end = $price * 0.45 + $price_end;

exit("Стоимость перевозки $price_end рублей");

код полегчал, обрабатывать легче, все работает

Edited June 18, 2012 by NeoXidizer

[nartan]

Спасибо огромное NeoXidizer!

Все работает, наконец-то))) И начал понимать понемногу.

Одна строка

// Здесь дополнительная проверка на вводимые значения, включая оповещение, если пользователь ничего не ввел

- многого стоит!!!

[NeoXidizer]

может не самое элегантное решение, но думаю, идею вы поняли

<?php

$errors = array();

$cityfrom = $_POST['cityfrom'];
$sityto = $_POST['sityto'];

// Вес, включая десятичные значения, например 0.5
if ((float)$_POST['ves'] > 0)
	$ves = (float)$_POST['ves'];
else
	$errors[] = 'Введите вес';

// Объем, включая десятичные значения, например 0.5
if ((float))$_POST['vol'] > 0)
	$vol = (float)$_POST['vol'];
else
	$errors[] = 'Введите объем';

// Страхование
$ins = (isset($_POST['ins']) ? 1 : 0);

// Стоимость груза при страховании
if ($ins && (float)$_POST['price'] <= 0)
	$errors[] = 'Введите цену';
else
	$price = $_POST['price'];

// Вывод ошибок
if ($errors) {
	foreach ($errors as $key => $error)
		echo $error."<br/>\n";
	die();
}

И нужно указать посетителям, в каком формате указывать цену при страховке, ведь можно написать "1,000", "10 тыс". "сто рублей" и т.д. при том, что по вашей задумке, посетитель должен ввести (предположим) "10 000"

Edited June 18, 2012 by NeoXidizer