Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 19, средняя оценка - 4.95
denikos
1 / 1 / 0
Регистрация: 26.03.2015
Сообщений: 46
#1

Получить значение input в javascript - JavaScript

10.04.2015, 17:22. Просмотров 4264. Ответов 18
Метки нет (Все метки)

Здравствуйте все!
Пишу сайт на РНР, в одном месте нужно сделать что-то типа маленького калькулятора. Т.к. РНР исполняется на стороне сервера, а Javascript на стороне клиента, то будем пользоваться последним... А я в нем ни бум-бум! Курил несколько дней мануалы - все безрезультатно.

В общем задача такая:
Есть поле <input name="input" id="input" type="text" value="">, есть РНР переменная $ppp.
Пользователь вводит цифры в input, скрипт введенное число умножает на переменную $ppp и выводит результат в нужном месте в блоке <div>. И все это на автомате без нажатия каких-либо кнопок.

Вторым этапом ЯваСкрипт должен выдать РНР скрипту
1. Значение, которое ввел Пользователь в input
2. Значение, которое высчитал ЯваСкрипт (хотя, его может быть и не обязательно, если у меня на руках Инфа из input и исходная переменная $ppp. РНРшкой посчитаю)

Как загнать переменную РНР в Скрипт я нашел. Ничего сложного:
Код
<? $var = "Hello, world"; ?>
<script>
var a = "<? echo $var ?>";
</script>
не проверял, но думаю работать должно.

Нашел в сети вот такую штуку:
Код
<input type="text"> oninput: <span id="result"></span>
<script>
  var input = document.body.children[0];

  input.oninput = function() {
    document.getElementById('result').innerHTML = input.value;
  };
</script>
Проверял. Работает.

Но я никак не могу понять как! из поля input в код взять значение переменных?
Что мы присваиваем переменной input вот этим: document.body.children[0]?
Как это вообще работает???
Повторюсь, курю мануалы уже несколько дней. Ничегошеньки не понимаю, а сделать надо.

Подскажите с какого конца подобраться, в какую сторону смотреть? Может есть хорошие инструкции, которые мне не попались?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.04.2015, 17:22
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Получить значение input в javascript (JavaScript):

JavaScript взять значение из input - JavaScript
Нужно вытащить значение из input, которое пользователь вводит в текстовое поле и создать кнопку с таким именем, принажатии на кнопку...

Как получить значение input=value? - JavaScript
Изучаю JS, пытаюсь решить задачу для самого себя, решив сделать калькулятор по примеру одного из сайтов. Если поля &lt;input type=&quot;radio&quot;...

Получить и вывести значение из input - JavaScript
Всем привет, я новичек в javascript и никак не могу понять в чем ошибся. Есть код: &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML...

Как мне получить значение input.value из текущего div ? - JavaScript
Здравствуйте друзья. Помогите мне пожалуйста с функцией по вызову confirm. Есть у меня такая вот структура документа с множеством...

Получить значение input type text runat=server - JavaScript
Всем привет. Собственно тема- надо получить значение input с тэгом runat=server с помощью javascript или jquery. Как это сделать? ...

Javascript - Получить значение из select - JavaScript
Никак не пойму, как же нужно передать значение из select. Кручу по разному его, а оно все никак не хочет считать. Посмотрите, что не так...

18
kalabuni
Супермизантроп
3049 / 2396 / 426
Регистрация: 18.04.2012
Сообщений: 7,081
10.04.2015, 21:05 #2
Цитата Сообщение от denikos Посмотреть сообщение
2. Значение, которое высчитал ЯваСкрипт (хотя, его может быть и не обязательно, если у меня на руках Инфа из input и исходная переменная $ppp. РНРшкой посчитаю)
не посчитаете

PHP-файл работает на сервере, а пользователь, который вводит данные в инпут, - он у себя дома
это, во-первых, разные в пространстве места
а во-вторых, они ещё и разделены по времени

сначала
PHP на сервере создаёт HTML+CSS+JS-код (и затем PHP сразу отключается, потому что свою задачу исполнил, и все переменые файла, включая $ppp, уничтожаются),
затем сервер по сети интернет передаёт этот код в браузер пользователя
потом браузер этот код отображает в своем окне
и, наконец, только теперь пользователь может что-то ввести в инпут, и сделать он это может, например, через полчаса после того, как PHP на сервере отключился (более того, пользователь вообще интернет-кабель может из компа/роутера выдернуть за эти полчаса -- и никакой связи с сервером уже вообще не будет)
0
denikos
1 / 1 / 0
Регистрация: 26.03.2015
Сообщений: 46
11.04.2015, 05:37  [ТС] #3
Цитата Сообщение от kalabuni Посмотреть сообщение
PHP-файл работает на сервере, а пользователь, который вводит данные в инпут, - он у себя дома
это, во-первых, разные в пространстве места
а во-вторых, они ещё и разделены по времени
сначала PHP на сервере создаёт HTML+CSS+JS-код (и затем PHP сразу отключается, потому что свою задачу исполнил, и все переменые файла, включая $ppp, уничтожаются),
затем сервер по сети интернет передаёт этот код в браузер пользователя
потом браузер этот код отображает в своем окне
и, наконец, только теперь пользователь может что-то ввести в инпут, и сделать он это может, например, через полчаса после того, как PHP на сервере отключился (более того, пользователь вообще интернет-кабель может из компа/роутера выдернуть за эти полчаса -- и никакой связи с сервером уже вообще не будет)
Благодарю за размышления, но у меня есть вот такая штука, которая запустит РНР хоть через час!
Код
if(isset($_POST['submit']))
Т.е. Юзер ввел число в форму, ЯваСкрипт умножил его на нужное и вывел Юзеру результат в реальном времени.
Затем Юзер нажимает кнопочку "Подтвердить" и сохраняет введенные данные.
Еще раз благодарю вас, но у меня вопрос в другом был.
Как мне понять логику записи значений из input и вывод их в нужный div?
Я смотрю на найденный мной пример и не понимаю его!
По-сути, мне в него только переменную из РНР загнать, помножить, да вывести.
0
kalabuni
Супермизантроп
3049 / 2396 / 426
Регистрация: 18.04.2012
Сообщений: 7,081
11.04.2015, 06:12 #4
1) ну и где весь этот час будет находиться ваша переменная $ppp из первого обращения к PHP-файлу?

2) после сабмита формы в окно браузера будет загружен другой документ -- и где будет во время этой перезагрузки находиться ваш инпут вместе с введённым туда пользователем значением?
0
denikos
1 / 1 / 0
Регистрация: 26.03.2015
Сообщений: 46
11.04.2015, 06:18  [ТС] #5
Цитата Сообщение от kalabuni Посмотреть сообщение
1) ну и где весь этот час будет находиться ваша переменная $ppp из первого обращения к PHP-файлу?
Я ее в куки воткну, а потом из них вытащу.
Цитата Сообщение от kalabuni Посмотреть сообщение
2) после сабмита формы в окно браузера будет загружен другой документ -- и где будет во время этой перезагрузки находиться ваш инпут вместе с введённым туда пользователем значением?
При всем уважении, мы мой РНР код разбирать будем или вы мне поможете в конкретных вопросах?

Сижу вот тыкаю вот это:
PHPHTML
1
2
3
4
5
6
7
<input name="wm_input" type="text" value="">wm_output: <span id="wm_output"></span>
<script>
  var wm_input = document.body.children[0];
  wm_input.oninput = function() {
    document.getElementById('wm_output').innerHTML = wm_input.value;
  };
</script>
Так работает.
Вот так не хочет:
PHPHTML
1
2
3
4
5
6
7
8
<input name="wm_input" type="text" value="">wm_output: <span id="wm_output"></span>
<script>
  var wm_input = document.body.children[0];
  wm_calc = 2*wm_input;
  wm_calc.oninput = function() {
    document.getElementById('wm_output').innerHTML = wm_calc.value;
  };
</script>
0
kalabuni
Супермизантроп
3049 / 2396 / 426
Регистрация: 18.04.2012
Сообщений: 7,081
11.04.2015, 06:39 #6
Цитата Сообщение от denikos Посмотреть сообщение
мы мой РНР код разбирать будем или вы мне поможете в конкретных вопросах?
я ваш PHP-код не разбираю - ни мне, ни вам этого не нужно

вы совершенно не понимаете - как устроен web, я пытаюсь вам это объяснить, а вы упорно не хотите прочитать и понять то, о чём я вам пишу

раз вам этого не нужно, не буду настаивать

помогать мартышке одевать очки не считаю нужным
0
denikos
1 / 1 / 0
Регистрация: 26.03.2015
Сообщений: 46
11.04.2015, 06:52  [ТС] #7
Цитата Сообщение от kalabuni Посмотреть сообщение
помогать мартышке одевать очки не считаю нужным
kalabuni, только без обид и гнева, будьте любезны так. (интонацию не передашь, но никакого издевательства и высокомерия не услышьте уж. Помощь мне ваша нужна на деле)

Не надо мартыше (мне то бишь) очки надевать, сам одену, сниму и переодену правильно.
Давайте упростим мой вопрос:
Нет никакого РНР, забудем про него.
Есть поле: <input name="wm_input" type="text" value="">, есть блок <div></div>
Как мне взять из input значение, введенное пользователем, умножить на 2 и вписать в div?
Без нажатия каких-либо кнопок, в реальном времени.
0
kalabuni
Супермизантроп
3049 / 2396 / 426
Регистрация: 18.04.2012
Сообщений: 7,081
11.04.2015, 07:21 #8
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
можно, например, так:
HTML5
1
2
<input oninput="document.getElementById ('myDIV').innerHTML = this.value * 2">
<div id="myDIV"></div>
HTML5
1
2
3
4
5
6
7
8
или так:
<input id="myInput">
<div id="myDiv"></div>
 
<script>
document.getElementById ('myInput').oninput = function ()
{document.getElementById ('myDiv').innerHTML = this.value}
</script>
а если вдруг по каким-то причинам у тега <input> не будет установлено значение id и при этом этот тег будет самым первым после открывающего тега <body>, то можно так:
HTML5
1
2
3
4
5
6
7
8
9
<body>
<input>
<div id="myDiv"></div>
 
<script>
document.body.children [0].oninput = function ()
{document.getElementById ('myDiv').innerHTML = this.value * 2}
</script>
</body>
для второго и третьего вариантов можно скриптовой блок в коде "поднять" (т.е. поместить в заголовок страницы (между <head> и </head>), но тогда весь javascript-код следует "обернуть" в функцию и запустить её по событию onload страницы, вот так (показываю для последнего варианта):
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<head>
<script>
onload = function ()
{document.body.children [0].oninput = function ()
{document.getElementById ('myDiv').innerHTML = this.value * 2}
}
</script>
</head>
<body>
<input>
<div id="myDiv"></div>
</body>
вообще-то перед умножением нужна "проверка на число" - буквально вчера здесь же делал, посмотрите тему Javascript деление чисел, кто поможет?
1
denikos
1 / 1 / 0
Регистрация: 26.03.2015
Сообщений: 46
11.04.2015, 08:44  [ТС] #9
Цитата Сообщение от kalabuni Посмотреть сообщение
можно, например, так:
Супер! Как же я ждал этого ответа! Огромнейшее вам благодарю!!!

Так работает:
PHPHTML
1
2
3
4
5
6
7
8
<br><br><br>Берем - выводим<br>
<input id="myInput">
<div id="myDiv"></div>
 
<script>
document.getElementById ('myInput').oninput = function ()
{document.getElementById ('myDiv').innerHTML = this.value}
</script>
Так тоже работает:
PHPHTML
1
2
3
4
5
6
7
8
<br><br><br>Берем, множим на 2, выводим<br>
<input id="myyInput">
<div id="myyDiv"></div>
 
<script>
document.getElementById ('myyInput').oninput = function ()
{document.getElementById ('myyDiv').innerHTML = this.value*2}
</script>
И так работает!
PHPHTML
1
2
3
4
5
6
7
8
9
<br><br><br>Берем, множим на a2, выводим<br>
<input id="myyyInput">
<div id="myyyDiv"></div>
 
<script>
a2 = 2;
document.getElementById ('myyyInput').oninput = function ()
{document.getElementById ('myyyDiv').innerHTML = this.value*a2}
</script>
А это вообще класс! Работает!!!!
PHPHTML
1
2
3
4
5
6
7
8
9
<br><br><br>Берем, множим на $aaw, выводим<br>
<input id="myyyyInput">
<div id="myyyyDiv"></div>
<?php $aaw = '2'; ?>
<script>
aa2 = "<? echo $aaw ?>";
document.getElementById ('myyyyInput').oninput = function ()
{document.getElementById ('myyyyDiv').innerHTML = this.value*aa2}
</script>
Благодарю вас еще раз!
На счет число-не число обязательно почитаю. А у меня еще вопрос один. Я, признаюсь, не гуглил его еще. Не успел. Немножко усложнить задачу если.
Есть вот такая штука:
HTML5
1
2
3
4
<SELECT NAME="Item">
<OPTION VALUE="w2">W2
<OPTION VALUE ="w3">W3
</SELECT>
Как сделать, чтобы если выбрано W2, то на 2 умножать, а если W3, то на 3 умножить?
Насколько я помню, видел, что в ЯваСкрипте условия if - else работают. Повторюсь, не гуглил еще, решил сперва выразить благодарность за огромнейшую помощь.

Добавлено через 47 минут
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<br><br><br>Берем, сравниваем с Селектом, множим на $aaw, выводим<br>
<SELECT NAME="Item">
<OPTION VALUE="wz" id="wmz">WZ
<OPTION VALUE ="wk" id="wmk">WK
</SELECT>
<input id="myyyyzInput">
<div id="myyyyzDiv"></div>
<?php $aaw = '2'; ?>
<?php $aaz = '3'; ?>
<script>
if (document.getElementById ('wz').oninput == wz) {
  aa2 = "<? echo $aaw ?>";
} else {
  aa2 = "<? echo $aaz ?>";
}
 
document.getElementById ('myyyyzInput').oninput = function ()
{document.getElementById ('myyyyzDiv').innerHTML = this.value*aa2}
</script>
Умножает только на 3 т.е. только это: aa2 = "<? echo $aaz ?>"; принимает в значение. Мне кажется, что я в этом месте косячу: (document.getElementById ('wz').oninput == wz)

Добавлено через 55 секунд
Па-ма-ги-теееее!!!!!
0
Shakalaka
Эксперт HTML/CSS
641 / 545 / 254
Регистрация: 27.01.2015
Сообщений: 1,373
11.04.2015, 10:37 #10
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Javascript
1
2
3
4
5
6
7
8
9
document.getElementById ('myyyyzInput').oninput = function (){
    if (document.getElementsByTagName('SELECT')[0].value == 'wz') {
      aa2 = 2;
    } 
    else {
      aa2 = 3;
    }
document.getElementById ('myyyyzDiv').innerHTML = this.value*aa2
}
Но вообще, лучше select-у присвоить id и вместо document.getElementsByTagName('SELECT')[0] писать document.getElementById('select id');
Ну и понятное дело, вместо чисел 2, 3 вставить значения из php
1
denikos
1 / 1 / 0
Регистрация: 26.03.2015
Сообщений: 46
11.04.2015, 18:34  [ТС] #11
Цитата Сообщение от Shakalaka Посмотреть сообщение
Но вообще, лучше select-у присвоить id и вместо document.getElementsByTagName('SELECT')[0] писать document.getElementById('select id');
Ну и понятное дело, вместо чисел 2, 3 вставить значения из php
Благодарю за помощь! Все заработало.
Так как я не являюсь заядлым форумчанином и к форумам обращаюсь только за помощью, то получив ее хочу выразить благодарность всем, кто отвечал на мои вопросы и выкладываю рабочую программу, которая у меня в итоге получилась для тех, кто попадет на эту тему форума с похожим вопросом:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
            <form method="post" class="buyForm">
                <div class="buy-userpage-top">
                    <select name="wm_select" id="wm_select">
                        <option value="wmz">WMZ
                        <option value ="wmk">WMK
                    </select>
                </div>
                <div class="buy-userpage-tl">
                    <h4>Количество WebMoney</h4>
                    <div class="input">
                        <input name="wm_input" id="wm_input" type="text" value="">
                    </div>
                </div>
                <div class="buy-userpage-tr">
                    <h4>Сумма в тенге</h4>
                    <div class="input">
                        <div class="input_field" id="wm_output"></div>
                    </div>
                </div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
<script>                    
document.getElementById ('wm_input').oninput = function (){
    if (document.getElementById('wm_select').value == 'wmz') {
      jwm_buy = <?php echo $wmz_buy; ?>;
    } 
    else {
      jwm_buy = <?php echo $wmk_buy; ?>;
    }
document.getElementById ('wm_output').innerHTML = this.value*jwm_buy
}
</script>
Значения переменных РНР я вывожу из базы, не вижу смысла их тут выкладывать.
Форма не окончена, поэтому закрывающего тэга у формы нет.
0
denikos
1 / 1 / 0
Регистрация: 26.03.2015
Сообщений: 46
16.04.2015, 11:03  [ТС] #12
И снова здравствуйте! Мне еще помощь нужна по JavaScript
Как полученное мной значение
Javascript
1
document.getElementById ('wm_output').innerHTML = this.value*jwm_buy
округлить до целого в большую сторону? А то бывают моменты, что результат 989.3 или 989.7, а мне надо чтобы при любом таком значении 990 получалось.
0
Shakalaka
Эксперт HTML/CSS
641 / 545 / 254
Регистрация: 27.01.2015
Сообщений: 1,373
16.04.2015, 12:20 #13
Javascript
1
2
3
Math.ceil(value); // до большего
Math.floor(value); // до меньшего
Math.round(value); // по правилам математики
0
denikos
1 / 1 / 0
Регистрация: 26.03.2015
Сообщений: 46
16.04.2015, 12:22  [ТС] #14
Цитата Сообщение от Shakalaka Посмотреть сообщение
1
2
3
Math.ceil(value); // до большего
Math.floor(value); // до меньшего
Math.round(value); // по правилам математики
Вот так?
Javascript
1
document.getElementById ('wm_output').innerHTML = Math.ceil(this.value*jwm_buy)
0
Shakalaka
Эксперт HTML/CSS
641 / 545 / 254
Регистрация: 27.01.2015
Сообщений: 1,373
16.04.2015, 12:40 #15
Цитата Сообщение от denikos Посмотреть сообщение
Вот так?
Код Javascript
1
document.getElementById ('wm_output').innerHTML = Math.ceil(this.value*jwm_buy)
Ну это вам виднее, что у вас там кроется за this.value и jwm_buy.
0
16.04.2015, 12:40
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.04.2015, 12:40
Привет! Вот еще темы с ответами:

Как получить значение из javascript? - JavaScript
Всем доброго времени суток! Стоит задача: получить текущий остаток секунд из javascript в php. Имеется форма, на которой расположено...

Как получить значение из javascript в php? - JavaScript
Всем доброго времени суток! Стоит задача: получить текущий остаток секунд из javascript в php. Имеется форма, на которой расположено...

Получить названия файлов из input file в input text - JavaScript
Как переместить названия файла из input type file в input type text с помощью javascript?

Получить значение атрибута href ссылки при наведении на нее курсора javascript - JavaScript
Всем привет! Подскажите как можно реализовать на javascript получение значения href у ссылки при наведении курсора на нее. Я в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.