Умножьте и добавьте 2 поля ввода, используя jquery

0

Я хотел бы, чтобы сценарий умножал значения из полей ввода на значения скрытых входов и печатал результат при нажатии кнопки.

Сценарий в значительной степени делает это, но только для 1 входа.

Любой простой способ сделать это?

Очень признателен.

Скрипт: http://jsfiddle.net/eN7S6/3/

 <table>
        <tr>
            <td>
    <input name="inputone" id="inputone" class="calc" value="1"><span id="Total"></span>
                </td>
        </tr>
            <tr>
            <td>
    <input name="inputone" id="inputone" class="calc" value="1"><span id="Total"></span>
                </td>
                </tr>
    </table>
        <input name="inputtwo" id="inputtwo" class="calc" value="2" type="hidden" readonly>
        <input name="inputtwo" id="inputtwo" class="calc" value="3" type="hidden" readonly>
        <input type="button" id="update" value="Calculate" />

И jQuery

$(document).ready(function() {      
    $('#update').click(function() { 
        var inputone = $('#inputone').val();
        var inputtwo = $('#inputtwo').val();
        var totalTotal = ((inputone * 1) * (inputtwo * 1));     
        $('#Total').text(totalTotal);
    });
}); 
  • 3
    идентификаторы должны быть уникальными на странице.
Теги:
calculator

3 ответа

1
Лучший ответ

Идентификаторы элементов не уникальны. У вас есть дубликаты, такие как "inputone" и "inputtwo".

Я изменил их имена и добавил новый полный диапазон.

Здесь обновленный код:

<table>
    <tr>
        <td>
<input name="inputone" id="inputone" class="calc" value="1"><span id="TotalOne"></span>
            </td>
    </tr>
        <tr>
        <td>
<input name="inputtwo" id="inputtwo" class="calc" value="1"><span id="TotalTwo"></span>
            </td>
            </tr>
</table>
    <input name="multiplierone" id="multiplierone" class="calc" value="2" type="hidden" readonly>
    <input name="multipliertwo" id="multipliertwo" class="calc" value="3" type="hidden" readonly>
    <input type="button" id="update" value="Calculate" />

и jQuery:

$(document).ready(function() {      
    $('#update').click(function() { 
        var inputone = $('#inputone').val();
        var multiplierone = $('#multiplierone').val();
        var inputtwo = $('#inputtwo').val();
        var multipliertwo = $('#multipliertwo').val();
        var totalTotalOne = (inputone * multiplierone);
        var totalTotalTwo = (inputtwo * multipliertwo);
        $('#TotalOne').text(totalTotalOne);
        $('#TotalTwo').text(totalTotalTwo);
    });
}); 

и обновленный jsFiddle: http://jsfiddle.net/eN7S6/4/

0

Там никогда не может быть двух IDs той же странице одинаковы, поэтому class был изобретен.

Измените код следующим образом:

 <table>
   <tr>
     <td>
         <input name="inputone"class="inputone calc" value="1"><span id="Total"></span>
     </td>
   </tr>
   <tr>
     <td>
       <input name="inputone" class="inputone calc" value="1"><span id="Total"></span>
     </td>
   </tr>
 </table>
 <input name="inputtwo" class="calc inputtwo" value="2" type="hidden" readonly>
 <input name="inputtwo" class="calc inputtwo" value="3" type="hidden" readonly>
 <input type="button" id="update" value="Calculate" />

Затем:

$(document).ready(function() {      
    $('#update').click(function() { 
        var inputone = $('.inputone').val();
        var inputtwo = $('.inputtwo').val();
        var totalTotal = ((inputone * 1) * (inputtwo * 1));     
        $('#Total').text(totalTotal);
    });
}); 
0

Этот маленький алгоритм получит все элементы input.calc и умножит их значения. Думайте, что это должно сработать для вас на основе вашего html.

var total = 1;
$("input.calc").val(function(idx, val) {
    total*= val;
})
$('#Total').text(total);

Демо-версия JSFiddle

Ещё вопросы

Сообщество Overcoder
Наверх
Меню