Обработка формы form (input) событием onchange

vla · 01.12.2011

Здравствуйте. Пытаюсь понять основы JS.
Не могу решить задачу: Хочу cделать чтото типа калькулятора - в форме (input) пользователь вводит число, а сразу под формой выводится результат функции работающей с этим числом...(т.е даже к серверу не надо обращаться)

Я предполагаю, что это так будет:

Код:

<input type="text" name="pole1" id="pole1"  onChange="__?__">

Блин, и не знаю как обьяснить, что функции javascript надо работать с числом взятым из input.

p.s: А вообще сысл этого калькулятора перевести пиксели в сантиметры, при заданной dpi. Если с этим разберусь, то и сделаю, чтоб и dpi можно выбрать было...

lekzd · 01.12.2011

в onChange надо прописать ссылку на функцию в скрипте
в ней нужно взять значение поля

Код:

var pix = document.getElementById('pole1').value;

далее идут ваши расчеты
потом надо вывести результат, для этого под полем должен быть некий контейнер для вывода результата, допустим с id="result"

Код:

var res = document.getElementById('result');
res.innerHTML = сюда вставить значение вычислений + 'см'

Aristotel · 01.12.2011

не очень понял что вы хотите сделать.onChange это событие, например когда есть изменение то срабатывает какая либо функция :

<input type="text" name="pole1" id="pole1" onchange="XXX()">

а дальше в скриптах надо
function XXX(){
var x = document.getElementById('pole1').value;}

x это то с чем работать

vla · 01.12.2011

[member=lekzd], спасибо завтра попробую, сообщу че получилось. Как я понял:

Код:

onChange="return f_calculator();"

а в функции:

Код:

function f_calculator() {
var pix = document.getElementById('pole1').value;
// далее вычисления с переменной "pix"

И еще вопрос: Можно обойтись тегом <input> без тега <form>? это корректно? ведь мне не надо передавать результат...

[member=Aristotel], в первую очередь я хочу понять как передавать значения из input в скрипт и из скрипта обратно в html. А сделать хочу похожую тему, как в фотошопе ({изображение}->{размер изображения}). Там вводишь число в одном поле, он выдает сразу в другом поле пропорциональное значение.

lekzd · 01.12.2011

vla сказал(а):
он выдает сразу в другом поле пропорциональное значение.

onChange срабатывает только после того как фокус с элемента убран (вы кликнули вне элемента) для подсчета "на лету" советую onKeyPress

vla сказал(а):
onChange="return f_calculator();"

только без return

vla сказал(а):
это корректно?

да, форма нужна только для отправки на сервер

vla · 02.12.2011

Не могу научиться выводить информацию, фиг с ней с фунцкцией. Никак не справлюсь с задачей:
Взять из формы через onKeyPress передать в функцию и вывести на страницу

Код:

<HEAD>
<script type="text/javascript">
<!--
function f_calculator() {
var pixx;
var pixx = document.getElementById("i01").value;
return pixx;
}
//-->
</script>
</HEAD>

<BODY>
<input name="i01" id="i01" onKeyPress="f_calculator();">
<p>
<script type="text/javascript">
<!--
var cmm = f_calculator();
document.write (cmm);
//-->
</script>
</p>
</BODY>

первые шаги даются не легко... помогите советом.

lekzd · 02.12.2011

я же вот вам объяснял про вывод

lekzd сказал(а):
потом надо вывести результат, для этого под полем должен быть некий контейнер для вывода результата, допустим с id="result"

Код:

var res = document.getElementById('result'); res.innerHTML = сюда вставить значение вычислений + 'см'

вставить надо вместо

return pixx;

а document.write отработает только на старте

vla · 03.12.2011

у меня получилось! )))
[member=lekzd], onKeyPress пришлось заменить на onKeyUp.

В итоге:

html

Код:

<HEAD>
<link type="text/css" href="css/calculator.css">
<script type="text/javascript" src="js/calculator.js"></script>
</HEAD>
<BODY>
<div class="calculator">
<table>
<tr>
  <td><input type="text" name="i01" id="i01" onKeyUp="f_calculator();">&nbsp;дюйм</td>
  <td><div class="result" id="i02">&nbsp;</div>пиксель</td>
</tr>
</table>
</div>
</BODY>

calculator.js

Код:

function f_calculator() {
var p01 = document.getElementById("i01").value;
p01 = 300*p01
var p02 = document.getElementById("i02"); p02.innerHTML = p01
}

calculator.css

Код:

div.calculator,div.calculator input{font-family:monospace,"Lucida Console",Monaco;font-weight:normal;font-size:14px;}
div.calculator input,#i02{background-color:#fff;border:1px solid #ccc;width:10em;height:1em;margin:1px;padding:1px;}
#i02{float:left;}

Теперь встал вопрос: Как вставить результат не в <DIV>, а в поле другого <INPUT> (поле с пикселями). Чтобы можно было вводить в любое поле значение, а в противоположном появлялся результат...

motek · 03.12.2011

vla сказал(а):

у меня получилось! )))
[member=lekzd], onKeyPress пришлось заменить на onKeyUp.

В итоге:

html

Код:

<HEAD>
<link type="text/css" href="css/calculator.css">
<script type="text/javascript" src="js/calculator.js"></script>
</HEAD>
<BODY>
<div class="calculator">
<table>
<tr>
  <td><input type="text" name="i01" id="i01" onKeyUp="f_calculator();">&nbsp;дюйм</td>
  <td><div class="result" id="i02">&nbsp;</div>пиксель</td>
</tr>
</table>
</div>
</BODY>

calculator.js

Код:

function f_calculator() {
var p01 = document.getElementById("i01").value;
p01 = 300*p01
var p02 = document.getElementById("i02"); p02.innerHTML = p01
}

calculator.css

Код:

div.calculator,div.calculator input{font-family:monospace,"Lucida Console",Monaco;font-weight:normal;font-size:14px;}
div.calculator input,#i02{background-color:#fff;border:1px solid #ccc;width:10em;height:1em;margin:1px;padding:1px;}
#i02{float:left;}

html

Код:

<HEAD>
<link type="text/css" href="css/calculator.css">
<script type="text/javascript" src="js/calculator.js"></script>
</HEAD>
<BODY>
<div class="calculator">
	<label title="дюйм" for="i01">дюйм</label><input type="text" name="i01" id="i01" onKeyUp="f_calculator();"/>
	<label title="пиксель">пиксель</label><span class="result" id="i02">&nbsp;</span>
</div>
</BODY>

vla · 03.12.2011

motek сказал(а):

Код:

<label title="дюйм" for="i01">дюйм</label><input type="text" name="i01" id="i01" onKeyUp="f_calculator();"/>
<label title="пиксель">пиксель</label><span class="result" id="i02">&nbsp;</span>

А как вводить в первом поле тогда, чтото не могу понять...

motek · 03.12.2011

vla сказал(а):
motek сказал(а):

Код:

<label title="дюйм" for="i01">дюйм</label><input type="text" name="i01" id="i01" onKeyUp="f_calculator();"/> <label title="пиксель">пиксель</label><span class="result" id="i02"> </span>

Нажмите, чтобы раскрыть...

А как вводить в первом поле тогда, чтото не могу понять...

что значит как вводить? ручками

можно нажать на слово "дюйм" - и фокус переместится в инпут

vla · 03.12.2011

motek сказал(а):
что значит как вводить? ручками можно нажать на слово "дюйм" - и фокус переместится в инпут

первое поле не активно! можно ввести только во втором (в первом результат)...

motek · 03.12.2011

vla сказал(а):
motek сказал(а):

что значит как вводить? ручками можно нажать на слово "дюйм" - и фокус переместится в инпут

Нажмите, чтобы раскрыть...

первое поле не активно! можно ввести только во втором (в первом результат)...

:laugh: так поменяй их местами...ты css-ку переделал?...убери #i02{float:left;}

vla · 03.12.2011

motek сказал(а):
убери #i02{float:left;}

Это не принципиально...

[member=motek], у меня и до этого все работало: вводишь цифры в первый, результат в втором.

А я хочу сделать: вводишь в любое поле цифры, в оставшемся результат. (соответственно, вводишь в первое - срабатывает одна функция, во второе - другая{типа обратная})

Есть возможность передать результат в value input'a?
<input value="__как сюда вставить текст из функции javascripr?__">

Aristotel · 03.12.2011

document.getElementById("id vashego inputa").value = 'to chto nado vstavit'';

vla · 06.12.2011

Сделано, как хотел! Спасибо всем!

motek · 10.12.2011

vla сказал(а):
Сделано, как хотел! Спасибо всем!

а поделится? нам тоже интересно

vla · 10.12.2011

motek сказал(а):
а поделится? нам тоже интересно

Конечно, не вопрос!
калькулятор - вот страница с калькулятором, видок у него правда щас не лучший, но работает )))
http://nng10.ru/js/calculator.js - JavaScript
http://nng10.ru/css/calculator.css - CSS, может тоже пригодится

PS: НУ И ТАМ НЕ ПОДПИСАНО ПОКА - ПЕРВОЕ ДЛИНА, ВТОРОЕ ШИРИНА...

lekzd · 10.12.2011

vla сказал(а):
калькулятор - вот страница с калькулятором, видок у него правда щас не лучший, но работает )))

Теперь "шлифуем" его:

Добавляем parseFloat() для проверки введенного числа чтобы в полях не было NaN при расчете
Округляем пикселы до целого числа при помощи Math.round()
Округляем дюймы до сотых при помощи этой функции
Так же неплохо ввести предустановки по форматам бумаги в выпадающем списке (A4,A3), при выборе которых поля с сантиметрами заполнялись бы автоматически

vla · 10.12.2011

lekzd сказал(а):
Теперь "шлифуем" его

[member=lekzd], полностью с тобой согласен по всем пунктам! Ты прям читаешь мои мысли!
И еще один пункт: запятую воспринимать как точку - это удобно для пользователя...

Буду дорабатывать на следующей неделе...

Обработка формы form (input) событием onchange

Well-Known Member

parse error: parse error, unexpected T_STRING...

Well-Known Member

Well-Known Member

parse error: parse error, unexpected T_STRING...

Well-Known Member

parse error: parse error, unexpected T_STRING...

Well-Known Member

злой как @

Well-Known Member

злой как @

Well-Known Member

злой как @

Well-Known Member

Well-Known Member

Well-Known Member

злой как @

Well-Known Member

parse error: parse error, unexpected T_STRING...

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей