Dynamically total input field values, after they have been entered, but before they are submitted

Refresh

December 2018

Views

5.6k time

2

I don't usually use js, so am hoping for a quick win. Although I can't find the answer on SO in spite of quite a few similar questions out there.

I have a form...

<input type="text" size="5" id="value1" name="value1" />
<input type="text" size="5" id="value2" name="value2" />

<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

How can I use ajax (or otherwise) to multiply value1 by value2 after their inputs have been entered, but before the form is submitted?

Requirement is to simply display a product of value1 * value 2 as the form is being filled out. But it would be nice to embed it to the form field, as above, in case I want to add it to my database.

Edit: Below is my attempt. But I can only get a span element to update, and not automatically. Also it fails if the fields are blank.

<script>
function calculateSum()
{
    value1 = parseInt(document.getElementById("value1").value);
    value2 = parseInt(document.getElementById("value2").value);

    sum = value1 * value2;

    document.getElementById("totalpledge").innerHTML = sum;
}
</script>

Seems to work with a button...

<input type="text" size="5" id="value1" name="value1" />
<input type="text" size="5" id="value2" name="value2" />

<span id="totalpledge">--</span>
<span><button onclick="calculateSum()">Submit!</button></span>

3 answers

0
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
 value1 = parseInt(document.getElementById("value1").value);
 value2 = parseInt(document.getElementById("value2").value);
    if(!value1==""&&!value2=="")
    {
     sum = value1 * value2;
     document.getElementById("total").value = sum;
    }
}
</script>
</head>
<body>
<form action="some.php" method="POST" id="myForm">
    <input type="text" size="5" id="value1" name="value1"  onkeyup="myFunction()"/>
    <input type="text" size="5" id="value2" name="value2"  onkeyup="myFunction()"/>
    <input type="text" size="5" id="total" class="bckground" name="total" />
    <input type="submit" value="submit"/>
</form>

</body>
</html>

Это работает, пожалуйста, попробуйте это

5

Я хотел бы сделать что-то вроде этого:

HTML

<input type="text" size="5" id="value1" name="value1" class="value"/>
<input type="text" size="5" id="value2" name="value2" class="value"/>

<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

Просто добавил class="value"к элементам , так что вы можете легко определить все те , которые должны внести свой вклад в общем.

JQuery:

jQuery(document).ready(function($) {
    var $total = $('#total'),
        $value = $('.value');
    $value.on('input', function(e) {
        var total = 1;
        $value.each(function(index, elem) {
            if(!Number.isNaN(parseInt(this.value, 10)))
                total = total * parseInt(this.value, 10);
        });
        $total.val(total);
    });
});

Это связывает обработчик события для всех .valueэлементов (все из элементов , с class="value") для inputслучая, который срабатывает при значении изменения входного сигнала. Тогда он просто перебирает каждый из требуемых входов и умножает их значения вместе. Наконец он ставит , что общее значение в #totalэлемент.

jsFiddle демо

0

Я не уверен, если это то, что вы хотите.

HTML часть:

<form action="some.php" method="POST" id="myForm">
    <input type="text" size="5" id="value1" name="value1" />
    <input type="text" size="5" id="value2" name="value2" />
    <input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
    <input type="submit" value="submit" />
</form>

JQuery сделать расчет:

$("#myForm").submit( function(e) {
    $("#total").val( parseFloat($("#value1").val()) * parseFloat($("#value2").val()) );
});

И тогда вы могли бы принести результат, $_POST['total']на some.php.