Jquery value изменить жить -- jquery поле с участием html пол Связанный проблема

Jquery value change live


0
vote

проблема

русский

Пожалуйста, обратитесь к этому HTML.

 <код> <input type="text" name="amount1" value="10" /> <input type="text" name="amount2" value="5" /> <input type="text" name="total" value="" disabled="disabled" />   

Пожалуйста, обратитесь к этому коду. Что я точно хочу. Когда я ввожу некоторое значение (int) в текстовом поле 1, Это значение автоматически отображается в общем поле,

Когда я положу немного значения на сумму2, Всего должно показать (сумму1 + сумму2) = значение

Я пытался с этим jQuery, но не решил мою проблему

 <код> $(document).ready(function() {     $('#amount1').keyup(function() {      $('#total').html('<input type="text" name="total" style="width: 49%;" value="' + $(this).val() + '"/>');     }); });   

Может кто-нибудь помочь мне. Отлично!

Английский оригинал

Please refer this HTML.

<input type="text" name="amount1" value="10" /> <input type="text" name="amount2" value="5" /> <input type="text" name="total" value="" disabled="disabled" /> 

Please refer this code. what I exact want. when I type some value (int) in amount1 textbox, that value automatically show in total box,

when I put some value to amount2, total should show (amount1+amount2) = value

I tried with this jQuery, but did not resolve my problem

$(document).ready(function() {     $('#amount1').keyup(function() {      $('#total').html('<input type="text" name="total" style="width: 49%;" value="' + $(this).val() + '"/>');     }); }); 

can anyone help me. great!

</div
     

Список ответов

4
 
vote

демонстрация Требуется добавить <код> class> class на вход, чтобы вы могли добавить как можно больше ввода, и избегайте списка names , если вам это не нужно простым редактированием Вы можете сделать это работает с вашим HTML

HTML :

 <код> <input type="text" class='amount' name="amount1" value="10" /> <input type="text" class='amount' name="amount2" value="5" /> <input type="text" name="total" value="" disabled='disabled' />   

<Сильные> js :

 <код> var total = 0; $(document).ready(function () {     //Calculate the first total once the page is loaded     $('input.amount').each(function () {         total += parseInt($(this).val());     });     $('input[name="total"]').val(total);      //Each time the input value change(right click, keyboard, any) recalculate the total     $('input.amount').on('input', function () {         total = 0;         $('input.amount').each(function () {             var amountInfo = parseInt($(this).val());             amountInfo = (amountInfo) ? amountInfo : 0; //Check if number otherwise set to 0             total += amountInfo;         });         $('input[name="total"]').val(total);     }); });   
 

DEMO It require to add class to the input so you can add as much input as you want and avoid a list of names, if you don't need it with a simple edit you can make it works with your html

HTML:

<input type="text" class='amount' name="amount1" value="10" /> <input type="text" class='amount' name="amount2" value="5" /> <input type="text" name="total" value="" disabled='disabled' /> 

JS:

var total = 0; $(document).ready(function () {     //Calculate the first total once the page is loaded     $('input.amount').each(function () {         total += parseInt($(this).val());     });     $('input[name="total"]').val(total);      //Each time the input value change(right click, keyboard, any) recalculate the total     $('input.amount').on('input', function () {         total = 0;         $('input.amount').each(function () {             var amountInfo = parseInt($(this).val());             amountInfo = (amountInfo) ? amountInfo : 0; //Check if number otherwise set to 0             total += amountInfo;         });         $('input[name="total"]').val(total);     }); }); 
</div
 
 
       
       
0
 
vote

Вы отсутствуете идентификатор в своем HTML и то, как вы вводите значение, немного странно. Попробуйте это вместо этого:

<Сильные> HTML

 <код> <input type="text" id="amount1" name="amount1" value="10" /> <input type="text" id="amount2" name="amount2" value="5" /> <input type="text" id="total" name="total" value="" disabled="disabled" />   

<Сильный> JavaScript

 <код> $(document).ready(function() { $('#amount1,#amount2').keyup(function() {     var total = parseInt($('#amount1').val()) + parseInt($('#amount2').val());  $('#total').val(total); });   

});

и скрипка для этого

jsfiddle

Обратите внимание, что вам нужно размещать ваши (текстовые) значения для целочисления, чтобы получить правильный расчет. Вот почему я использую <код> parseInt() . Если вам нужно вводить номера с плавающей запятой, вам нужно будет заменить этот листок <код> parseFloat() метода. Вы также можете проверить, действительно ли введенное значение действительно число, которое может быть сделано по-разному, один из них является <код> isNaN() методом (isnotanumber = & gt; возвращает true, если значение не является число)

 

You're missing id's in your HTML and the way you input the value is a bit strange. Try this instead :

HTML

<input type="text" id="amount1" name="amount1" value="10" /> <input type="text" id="amount2" name="amount2" value="5" /> <input type="text" id="total" name="total" value="" disabled="disabled" /> 

Javascript

$(document).ready(function() { $('#amount1,#amount2').keyup(function() {     var total = parseInt($('#amount1').val()) + parseInt($('#amount2').val());  $('#total').val(total); }); 

});

And the fiddle for this

jsFiddle

Note that You need to cast your (text) values to integer to get the calculation right. This is why I use parseInt(). If you need to input floating point numbers, you'll need to replace this cast with parseFloat() method. You might also want to check if the entered value is indeed a number, which can be done in different ways, one of them being the isNaN() method (isNotaNumber => returns true if the value is not a number)

</div
 
 
0
 
vote
 <код> $(document).ready(function() {     $('#amount1').keyup(function() {         $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount2').val(), 10));     });     $('#amount2').keyup(function() {         $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount1').val(), 10));     }); });   
 
$(document).ready(function() {     $('#amount1').keyup(function() {         $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount2').val(), 10));     });     $('#amount2').keyup(function() {         $('#total').val(parseInt($(this).val(), 10) + parseInt($('#amount1').val(), 10));     }); }); 
</div
 
 
0
 
vote
 <код> names0  

Часть jQuery,

 <код> names1  

Eddle: Здесь

 
<table>     <tr>         <td width="40px">1</td>         <td>Number</td>         <td><input class="txt" type="text" name="txt1" /></td>     </tr>     <tr>         <td>2</td>         <td>Number</td>         <td><input class="txt" type="text" name="txt2" /></td>     </tr>     <tr>         <td>3</td>         <td>Number</td>         <td><input class="txt" type="text" name="txt3" /></td>     </tr>     <tr id="summation">         <td  colspan ="2" align="right">             Sum :         </td>         <td>           <input type="text" id='sum1' name="input" />         </td>         </span>         </td>     </tr> </table> 

JQuery part,

$(document).ready(function() {         //this calculates values automatically          calculateSum();          $(".txt").on("keydown keyup", function() {             calculateSum();         });     });      function calculateSum() {         var sum = 0;         //iterate through each textboxes and add the values         $(".txt").each(function() {             //add only if the value is number             if (!isNaN(this.value) && this.value.length != 0) {                 sum += parseFloat(this.value);                 $(this).css("background-color", "#FEFFB0");             }             else if (this.value.length != 0){                 $(this).css("background-color", "red");             }         });          $("input#sum1").val(sum.toFixed(2));     } 

Fiddle : here

</div
 
 
0
 
vote

Почему добавить ввод как HTML? Просто используйте $ ('# Total'). Val ([Значение, которое вы хотите]);

Используйте этот код:

 <код> names2  

И не забудьте добавить идентификатор в входных элементах, как это:

 <код> names3  

И это лучше использовать функцию Parsint (), чтобы быть уверенным в целочисленном типе.

Вы можете увидеть скрипку по адресу: http://jsfiddle.net/qmaster/8gthskvb/ < / P >.

 

Why add the input as HTML? Just use $('#total').val([value you want]);

Use this code:

$(document).on('keyup', '#amount1, #amount2', function() {     var sumAll = parseInt($('#amount1').val()) + parseInt($('#amount2').val());   $('#total').val(sumAll); }); 

And don't forget to add id in input elements like this:

<input type="text" id="amount1" name="amount1" value="10" /> <input type="text" id="amount2" name="amount2" value="5" /> <input type="text" id="total" name="total" value="" disabled="disabled" /> 

And that is better to use parsInt() function to sure about integer type.

You can see fiddle at: http://jsfiddle.net/QMaster/8gthskvb/

</div
 
 
0
 
vote
 <код> names4  

Вот ваше решение, поскольку вы не использовали идентификационный тег, потому что jQuery работает с IDZ и классами, которые вы не устояли. Поэтому я повторно воссоздал свое решение, надеюсь, это просто, и вы можете понять его, BTTER.

С уважением Имран Касим Идеальные веб-решения

Рабочая ссылка

 
<input type="text" id="amount1" name="amount1" value="10" /> <input type="text" id="amount2" name="amount2" value="5" /> <input type="text" id="total" name="total" value="" disabled="disabled" />      $(document).ready(function() {     $('#amount1').keyup(function() {    $('#total').val(parseInt($('#amount1').val())+parseInt($('#amount2').val()));            }); });   

here is your solution as you have not used id tag because jquery works with IDz and CLasses which you haven't difined. so i have re-recreated your solution hopefully its simple and you can understand it btter.

Regards Imran Qasim Perfect Web Solutions

Working Link

</div
 
 
   
   

Связанный проблема

1  jquery адрес плагин  ( Jquery address plugin issue ) 
Я использую плагин jQuery Address, я реализовал плагин на странице списка, когда я нажимаю на одну из ссылок, функция будет вытащить данные, используя AJAX и ...

1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки  ( Angular js validation function returns before the api call for validation is com ) 
<код> if (!validate()) { return; }; function validate() { var nameIsValid = ...

0  Удалите подстроку из строки в jQuery [дублировать]  ( Remove a substring from a string in jquery ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

-2  Как мне получить значение флажков ряд в таблице JavaScript  ( How do i get value of a checkboxes of a row in a table javascript ) 
Это может быть глупым вопросом, но мне нужно получить значения проверенных флажков определенной строки. <код> script5 Так что в основном я хочу, чтобы по...

0  Авто не показывая результат jQuery  ( Auto complete not showing result jquery ) 
Я пытаюсь создать автоматическую комплектацию, используя jqueryui.i am echo ing a jquery a age ange Результат базы данных из удаленного поиска файлов.php.it п...

5  модальный всплывающий как Google  ( Modal pop up like google ) 
Как сделать модальное всплывающее окно, как Gmail (когда мы пытаемся загрузить EXE, который генерирует крышки прокрутки страницы) ...

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

0  Boxy Эта отправка не работает  ( Boxy this submit does not work ) 
У меня есть несколько форм в моем коде, и я хочу назначить подтверждающее поле, чтобы показать, прежде чем он будет отправлен. Следовательно, я использую Bo...

-1  Jquery первый раз попробовал ajax  ( Jquery first time tried ajax ) 
Это я впервые попробовал ajax, кнопку нажала, но ничего не произойдет, если это должно быть предупреждено, когда успех? Любой может помочь мне взглянуть, пожа...

2  Совет инструмента не работает на текстовой зоне Bootstrap  ( Tool tip not working on text area bootstrap ) 
У меня есть форма Bootstrap 3, на которой я применяю Tootip через скрипт. Toottip работает нормально на поле ввода, но не работает над Textarea. <код> <div ...

2  Как получить выделенные тексты?  ( How to get the highlighted texts ) 
Я пытаюсь получить выбранные тексты от пользователя (выделенный текст, который выделяет пользователь). У меня есть следующее: <код> function getSelectedTe...

4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {}))  ( What are the difference between document bindready function and docume ) 
Я хочу обновить от Verysjs версии 2.0.0 до 2.1.5 Вот код: <код> define(['jquery', 'test.js'], function ($, test) { var test = new $.test({ ...

102  Как получить место мыши в jQuery без мыши-событий?  ( How to get mouse position in jquery without mouse events ) 
Я хотел бы получить текущую позицию мыши, но я не хочу использовать: <код> $(document).bind('mousemove',function(e){ $("#log").text("e.pageX: " + e...

0  Разрежьте строку в JavaScript [Закрыто]  ( Cut the string in javascript ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...

0  Почему это работает над сафари и Firefox, но не на хроме?  ( Why is this working on safari and firefox but not on chrome ) 
У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот з...