Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > PHP: Общие вопросы > Калькулируемые поля

Автор: Lacrima 13.6.2007, 15:46

Добрый день!

Есть, например, html-форма с тремя полями и кнопкой submit.

Код


<form name="form1" method="get" action="result.php">

<input name="amount" type="text" />
<input name="amount2" type="text" value="5.1" />
<input name="total" type="text" />
<input type="submit" />             

</form>

Как реализовать, чтобы пользователь ввел в поля amount и amount2 числовые данные, а в поле total автоматически отобразился результат каких-либо математических операций с введенными данными.

Например, поле 1 - Количество рублей
Поле 2 - Количество единиц продукции
Поле 3 - Всего (поле1 * поле2)

Сначала я думал, что это можно сделать с помощью php, но потом подумал и понял, что страница сначала должна отправиться на сервер для обработки php-кода, а затем только возвращается результат. Поэтому на php так сделать нельзя. Или можно? Или нужно использовать Javascript?

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

Автор: Serkys 13.6.2007, 15:55

Это можно сделать и с помощью РНР, используя AJAX. Но гораздо проще, логичнее и умнее будет сделать с помощью JavaScript.
К примеру, вот так:

Код


function calculate()
{
  document.form1.total.value = document.form1.amount.value * document.form1.amount2.value;
}
<form name="form1" method="get" action="result.php">
  <input name="amount" type="text" />
  <input name="amount2" type="text" value="5.1" />
  <input name="total" type="text" />
  <input type="button" onclick="calculate()" />             
</form>

Не проверял, но должно работать.
Но лучше тебе будет обратиться в раздел по JavaScript.

Автор: Mymik 13.6.2007, 16:06

Lacrima,

Код


<form name="form1" method="get" action="result.php">
<input name="amount" id="amount" onchange="calc(this, 'amount2', 'total')" type="text" />
<input name="amount2" type="text" id="amount2" onchange="calc(this, 'amount', 'total')" value="5.1" />
<input name="total" id="total" readonly type="text" />
<input type="submit" />             
</form>

Код


function calc(firstField, secondField, sumField)
{
    var first = parseFloat(firstField.value);

    var second = parseFloat(document.getElementById(secondField).value);
    if(!isNaN(first) && !isNaN(second))
    {
       document.getElementById(sumField).value = first * second;
    }
}

Автор: Lacrima 13.6.2007, 17:34

Спасибо большое!

Работает!