Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: сложение лету данных из input number

Есть нижеуказанный код. Не получается динамически показывать сумму значений input id="number1"+input id="number2". В innerHtml я эти значения вывожу, в переменную по событию onchange значение я тоже получется, а сложить и вывести сумму динамически не могу Спасибо!


Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<div class="main1"><img src="images/voda1.png" alt="Вода 1">
 
<p>Выберите количество</p>
 
<input id="number1" action="application.php" type="number" name="watnumb1" value="0" min="0" max="1200" step="12" onchange="jsum1=+this.value*100;">
 </div>
 
 
 
<div class="main2"><img src="images/voda2.png" alt="Вода 2">
 
<p>Выберите количество</p>
 
 <input id="number2"  name="watnumb2" action="application.php" type="number" value="0" min="0" max="1200" step="12" onchange="jsum2=+this.value*50;"></div>
 
 
 
 </div>
 
   <div class="main3">
   
     <h3>Внимание</h3>
      <p>Оставьте ваши контактные данные</p>
       
        <form id="application" action=" application.php" method="POST" name=" application ">
            <input name="name" id="applicationName" maxlength="20" placeholder="Введите ваше имя" required />
            <input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Введите ваш E-mail" required/>
            <input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Введите ваш телефон" required />
            
                    <input name="adress" type="Adr" id="applicationAdress" maxlength="20" placeholder="Введите ваш адрес" required />
                    
            <button class="applicationButton" type="submit" form="application"> Заказать </button>
        </form>
            
        
         <div id="summ1"></div>
 
 <script>
 
document.getElementById ('number1').oninput = function()
{document.getElementById ('summ1').innerHTML = this.value*100} 
</script>
 
 
 
             <div id="summ2"></div>
 
 <script>
document.getElementById ('number2').oninput = function ()
{document.getElementById ('summ2').innerHTML = this.value*50}
 
</script>
 
        
    </div>
    
    
    
    
 
        
    </div>
Ответ: Сергей, у Вас в этом месте какой-то бред написан:
HTML5
1
onchange="jsum1=+this.value*100;">
И мелкое замечание, слово "wat" пишется "what".
Вот, посмотрите мой вариант:
HTML5
1
2
3
<div id="summ2"></div>
<input type="number" id="number1" min="0" max="1200" step="12" value="0">
<input type="number" id="number2" min="0" max="1200" step="12" value="0">
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var dp = document.getElementById('summ2');
var n1 = document.getElementById('number1');
var n2 = document.getElementById('number2');
var v1, v2, Sum, Sump;
document.getElementById('number1').oninput = function(){
v1 = parseInt(this.value);
v2 = parseInt(n2.value);
Sump = v1*100 + v2*50;
Sum =  v1 + v2;
dp.innerHTML = "Сумма равна: "+Sum+"<br>";
dp.innerHTML += "Сумма перемноженная равна: "+Sump+"<br>";
dp.innerHTML += "Первый input: "+v1+"<br>";
dp.innerHTML += "Второй input: "+v2+"<br>";}
//dp.innerHTML = this.value*100;
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
document.getElementById('number2').oninput = function (){
//document.getElementById('summ2').innerHTML = this.value*50;
v1 = parseInt(n1.value);
v2 = parseInt(this.value);
Sump = v1*100 + v2*50;
Sum =  v1 + v2;
dp.innerHTML = "Сумма равна: "+Sum+"<br>";
dp.innerHTML += "Сумма перемноженная равна: "+Sump+"<br>";
dp.innerHTML += "Первый input: "+v1+"<br>";
dp.innerHTML += "Второй input: "+v2+"<br>";}
Вопрос: Убрать в input number возможность изменять число стрелками

Сделал input number и появились стрелки при фокусе. Как сделать так, что бы стрелки не появлялись?
Ответ:
CSS
1
2
3
4
5
6
7
8
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
    margin:0;
}
input[type=number]{
  -moz-appearance:textfield;
}
Вопрос: Изменение значения input[number] отдельными кнопками

Здравствуйте!
Сразу прошу прощения за возможно детский вопрос, и по причине невладения темой попробую объяснить своими словами:

Имеется числовое поле ввода
Код:
<input type="number" min="1" class="uk-form-small" name="quantity" value="1">
Для изменения значения используются стандартные "стрелки" которые появляются при наведении на поле. НО этих стрелок нет, при просмотре страницы на планшете или телефоне, то есть пользователь не может изменить количество в поле.
Появилась идея сделать внешние кнопки изменения количества. Перелопатил кучу сайтов, нашел единственный подходящий для себя вариант:
Код:
<button onclick="document.getElementById('num1').value=parseInt(document.getElementById('num1').value)-1">-</button> 
<input id="num1" type="number" min="1" class="uk-form-small" name="quantity" value="1">
<button id="sendButton" onclick="document.getElementById('num1').value=parseInt(document.getElementById('num1').value)+1">+</button>
Теперь значения в поле изменяются при нажатии на соответствующую кнопку, НО не происходит пересчета суммы, как это происходит при изменении количества стандартными стрелками.
Я так понимаю, что не хватает какого-то события типа Submit для отправки формы при нажатии на кнопку. Но как это реализовать я, к сожалению, не понимаю.
Заранее благодарен за помощь!
п.с. Возможно есть другие варианты реализации этой задачи? Буду рад любой помощи.
Ответ: Большое спасибо за помощь!
<button onClick="jQuery('#num1').val(parseInt(jQuery('#num1').val())+1);jQuery('#num1').change();">+</button>


Пришлось заменить & на jQuery и с change() заработало!

Но конечно не без нюансов, теперь могут получатся минусовые значения. Хотя в input стоит min=1 и вылазит предупреждение, но сумма считается минусовая.
Вопрос: Получить данные input type с таблицы

Добрый вечер, форумчане.

Есть таблица
<table id="masktable" name="masktable" border="1">
<tr id="shapka" >
<td>№</td><td>IP</td><td>Mask</td><td>+/-</td>
</tr>
<tr id="tr1" >
<td>1</td>
<td><input type="text" id="ip1" name="ip1" /></td>
<td><input type="text" id="mask1" name="mask1" /></td>
<td nowrap> <a href='javascript:AddMask()' id="plus1" name="plus1"><b>+</b></a>
   </td>
</tr>
<tr id="tr1" >
<td>2</td>
<td><input type="text" id="ip2" name="ip2" /></td>
<td><input type="text" id="mask2" name="mask2" /></td>
<td nowrap> <a href='javascript:AddMask()' id="plus1" name="plus1"><b>+</b></a>
   </td>
</tr>
</table>

Необходимо получить в массив данные с 2-х "input type='text'" -в каждой из 2 строк. Помогите, пожалуйста.
Ответ: stinggga,
  var givenArray = Array.map(
            document.getElementById('masktable').querySelectorAll('td > input[type=text]'),
            function(t){
                return t.value
            }
      );
Вопрос: Как запретить вводить в инпут number после , все цифры кроме 5?

Есть калькулятор с инпутами типа number с step=0.5. Шаг (0,5) запрещает ввод стрелочками чисел типа 7,78 или 4,11175649, но не запрещает их ввод вручную. Как запретить вводить все цифры кроме 5 в качестве первой цифры после запятой?
Спасибо!
Ответ: ArmaTiK,

<input type="number" step="0.5" oninput="var v = this.value;this.value=v.replace(/[.,]\d+/,'.5')" />
Вопрос: Запретить ввод минусовых чисел в input number

HTML5
1
<input type="number" name="numb" id="numb" max="1000" value="0" placeholder="100" autocomplete="off">
Есть возможность так сделать в HTML?
Или нужен скрипт?
Ответ: Если запретить ввод с клавиатуры, то скриптом. Если стрелками, то min="0".
Вопрос: Кастомизация input=number

Вопрос в следующем...Можно ли используя голый CSS. Изменить сей Input так как я хочу?
Например что-то в таком стиле

Спасибо
Ответ:
Сообщение от LonerZzz
это 2 отдельных
Я имел ввиду цельный правый и цельный левый... Правый больше похож на две кнопки и инпут в котором меняется значение взависимости от нажатой кнопки... Правый аналогично только одна кнопка...
Вопрос: Создание таблицы из значений в input

У меня есть 3 input'а, которые я многократно умножаю:
HTML5
1
2
3
4
5
<div id="div">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 't'">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 'C'">
<input type="number" data-id="id0" name="value[]" placeholder="Введите 'Q'">
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var count = 1;
        var count2 = 1;
        var count3 = 1;
        button.addEventListener("click", function(){
        var input = document.createElement('INPUT');
        input.type = 'number';
        input.setAttribute("data-id", "id" + count);
//      input2.setAttribute("style", "margin-right: '5px'");
        input.name = "value[]";
        input.placeholder = "Введите 't'";
        document.querySelector('#div').appendChild(input);
        count++;
        var input2 = document.createElement('INPUT');
        input2.type = 'number';
        input2.setAttribute("data-id", "id" + count2);
//      input2.setAttribute("style", "margin-right: '5px'");
        input2.name = "value[]";
        input2.placeholder = "Введите 'C'";
        document.querySelector('#div').appendChild(input2);
        count2++;
        var input3 = document.createElement('INPUT');
        input3.type = 'number';
        input3.setAttribute("data-id", "id" + count3);
//      input3.setAttribute("style", "margin-right='5px'");
        input3.name = "value[]";
        input3.placeholder = "Введите 'Q'";
        document.querySelector('#div').appendChild(input3);
        count3++;
по нажатию на:
HTML5
1
<input type="button" id="button" value="Добавить">
а затем хочу добавлять их в массив js, по нажатию на:
HTML5
1
<input style="margin: 2px; display: none;" id ="addToList" type="submit" title="Создать" value="Добавить к сравнению" >
Как мне создать из данных input'ов таблицу html? При этом нужна проверка: если поля заполнены - ок, создаем <table>, если нет - подсвечиваем незаполненные input'ы и ничего не создаём.
Если кто-то хочет показать более кошерный способ по созданию полей - буду рад.

Добавлено через 8 часов 13 минут
Коллеги, может ли кто-нибудь подсказать по поводу создания таблицы из input'ов?
Ответ: Актуально

Добавлено через 2 минуты
Проверку на input'ы я сделал, осталось создать из них всех таблицу.
Вопрос: Как ввести точку в input type="number" из js?

Добрый день. Подскажите как в это поле ввести точку нажатием на блок:
<input type="number" id="textareaKeyM">
<button id="virguleKeyM">.</button>
<script>
 
var textareaKeyM = document.getElementById('textareaKeyM'),
     virguleKeyM = document.getElementById('virguleKeyM');

virguleKeyM.onclick = function() {
        textareaKeyM.value += '.';
}
</script>


Если вводить с клавиатуры точка и запятая вводятся
Ответ: Artur_Hopf,
Так не получится, input number value принимает number или string который конвертируется в number (НЕ NaN)

прежде чем добавлять проверьте
console.log(Number('.'))
Вопрос: Вставить переменную в name input а

Есть страница в которой с помощью php формируется таблица.
<table class="simple-little-table">
<tr>
<th>min</th>
<th>max</th>
<th>price</th>
</tr>
<script>
number = 0;
</script>
<?php foreach($data['table_price'] as $table_price):?>
<script>
number++;
</script>
<tr>
<td><input name="min_" size="2" value="<?php echo $table_price['min'] ?>" /></td>
<td><input name="max_" size="2" value="<?php echo $table_price['max'] ?>" /></td>
<td><input name="price_" size="2" value="<?php echo $table_price['price'] ?>" /></td>
</tr>
<?php endforeach?>
</table>

Необходимо пронумировать "name" каждого input для дальнейшей передачи.
То есть на выходе необходимо получить:
min_1,max_1,price_1,min_2,max_2,price_2,min_3,max_ 3,price_3 и т.д.

Хочу ввести в java переменную "name" и при каждом цикле увеличивать на 1. Но не могу ее вставить как часть name.
На этом решении установился потому что c помощью JS будут добавляться новые строки и их нужно нумировать.

И так вопрос:
Как мне вставить переменную в <input name="min_переменная" />?
Ответ: Еще бы оно пронумеровывалось вот таким

<script>
number = 0;
</script>


<?php foreach($data['table_price'] as $table_price):?>

<script>
number++;
</script>


Вы можете пояснить логику (если она только может в этом быть) этой хрени? Если уж надо пронумеровать, то переменная number должна быть РНР-шной, а никак не JS принадлежать, который тут как собаке лапа пятая.
В цикле foreach инкремент ее и подстановка в нужно место. А вообще это конечно полная чушь, именовать нужно так:

<td><input name="min[]" value="<?php echo $table_price['min'] ?>" /></td>
<td><input name="max[]" value="<?php echo $table_price['max'] ?>" /></td>
<td><input name="price[]" value="<?php echo $table_price['price'] ?>" /></td>
</tr>


И тогда сервер получить три массива данных с ключами min, max и price. Если эти данные связаны с объектами в базе, значит нужна не нумерация, а идентификаторы этих объектов:

<td><input name="min[112]" value="<?php echo $table_price['min'] ?>" /></td>
<td><input name="max[112]" value="<?php echo $table_price['max'] ?>" /></td>
<td><input name="price[112]" value="<?php echo $table_price['price'] ?>" /></td>
</tr>


где 112 ID объекта текущей записи.