Я хотел бы, чтобы сценарий умножал значения из полей ввода на значения скрытых входов и печатал результат при нажатии кнопки.
Сценарий в значительной степени делает это, но только для 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);
});
});
Идентификаторы элементов не уникальны. У вас есть дубликаты, такие как "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/
Там никогда не может быть двух 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);
});
});
Этот маленький алгоритм получит все элементы input.calc
и умножит их значения. Думайте, что это должно сработать для вас на основе вашего html.
var total = 1;
$("input.calc").val(function(idx, val) {
total*= val;
})
$('#Total').text(total);