format coding for input type using java script

Question

code for multiplication javascript that will multiply unitprice and quantity and will display the result to the another textbox(total)

<script>
function calculate() {
        var myunitprice = document.getElementById('unitprice').value;   
        var myquantity = document.getElementById('quantity').value;
        var result = document.getElementById('total');  
        var myResult = myunitprice * myquantity;
        result.value = myResult.toFixed(2); }
</script>

Here's the another code for dynamic textbox, when select it will add another textbox.

    <script>
var php = '';
$('#children').on('change', function() {
    children = $(this).val();
    html = '';
    for (var i = 0; i < children; i++) {
        html += '<table><tr><td><label><b>Item Purchase</b></label><input type="text" id="item' + i + '" name="child' + i + 'Name" /><label>Amount</label><input type="text" id="amount' + i + '" name="child' + i + 'Name" /><label>Unit</label><input type="text" id="unit' + i + '" name="child' + i + 'Name" /><label>Quantity</label><input type="text" id="quantity' + i + '" name="child' + i + 'Name" onchange="calculate()" /><label>Unit Price</label><input type="text" name="child' + i + 'Age" id="unitprice' + i + '" onchange="calculate()" /><td>';
    }

    $('#kidsFields').html(html);
    $('#kidsFields').append('<br><td><input type="submit" value="Submit" /></td></tr></table>');

    $('.ui-page').trigger('create');
});
</script>

Here's my html

<form data-ajax="false" method="post" action="purchasingAddRecords.php">
 <center>
 <table>    
 <tr>
 <td>

 <td>

<div data-role="content">
<li data-role="fieldcontain"> 
<label for="children" class="select">Add</label>
<select name="children" id="children" data-mini="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> 
</li>
<div id="kidsFields"></div>
</div>

the problem is that when i put data on the textbox(quantity and unitprice), it doesn't calculate.

EliJah · Accepted Answer · 2015-08-22 07:25:16Z

You have several errors in your scripts:

You are adding a number next to the function call
You are not passing the number of iteration to the function
You don't have an element with id='total'

Try using these two scripts:

<script>
    function calculate(number) {
       var myunitprice = document.getElementById('unitprice'+ number).value;
       var myquantity = document.getElementById('quantity' + number).value;
       var result = document.getElementById('total' + number);
       var myResult = myunitprice * myquantity;
       result.value = myResult.toFixed(2);
    }

    $('#children').on('change', function() {
        children = $(this).val();
        injection = '';
        for (var i = 0; i < children; i++) {
            injection += '<table><tr><td><label><b>Item Purchase</b></label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Amount</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Unit</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Quantity</label><input type="text" id="quantity' + i + '" name="child' + i + 'Name" oninput="calculate(' + i + ')" value="0" /><label>Unit Price</label><input type="text" name="child' + i + 'Age" id="unitprice' + i + '" oninput="calculate(' + i + ')" value="0" /><label>Total</label><input type="text" id="total' + i + '" value="0" /> <td>';
        }

        $('#kidsFields').html(injection);
        $('#kidsFields').append('<br><td><input type="submit" value="Submit" /></td></tr></table>');

        $('.ui-page').trigger('create');
    });
</script>

I have a working plunker for that http://plnkr.co/edit/iKuIgbROfSEic6BNTiPy?p=preview

Thank you EliJah it works like a charm. i will take note of that.

Rachitta A Dua · Accepted Answer · 2015-08-22 06:36:50Z

0

Change

var myResult = myunitprice * myquantity;

to

var myResult = parseFloat(myunitprice) * parseInt(myquantity);

answered Aug 22, 2015 at 6:36

Rachitta A Dua

3581 silver badge11 bronze badges

2 Comments

user1650576 Over a year ago

it doesn't work, i think there's something wrong with my input text format script part.

Rachitta A Dua Over a year ago

Try alerting the variables myunitprice and myunitquantity and see what you get

Disha V. · Accepted Answer · 2015-08-22 06:42:33Z

0

try onchange instead of oninput

like this

oninput="calculate()' + i +'" to onchange="calculate()"

NOTE: onchange will run function when you lost focus from your textbox.

edited Aug 22, 2015 at 6:42

answered Aug 22, 2015 at 6:37

Disha V.

1,8641 gold badge13 silver badges21 bronze badges

2 Comments

Disha V. Over a year ago

Hey, you haven't set your id properly though. Check your all textbox ids as per calculate().

user1650576 Over a year ago

yes disha, but i'm just trying to test first the unitprice and the quantity part if it's working.

J Santosh · Accepted Answer · 2017-07-05 12:29:05Z

0

Updated Code

var php = '';
$('#children').on('change', function () {
children = $(this).val();
html = '<table>';
for (var i = 0; i < children; i++) {
    html += '<tr><td><label>Quantity</label><input type="text" id="quantity' + i + '" name="child' + i + 'Name" oninput="calculate(' + i + ')" /></td><td><label>Unit Price</label><input type="text" name="child' + i + 'Age" id="unitprice' + i + '" oninput="calculate(' + i + ')" />' +
        '</td><td><label>Total</label><input readonly="readonly" type="text" name="total" id="total' + i + '"  /></td></tr>';
}
html += '</table><label>Grand Total </label><input type="text" id="GrandTotal" />'
$('#kidsFields').html(html);
$('.ui-page').trigger('create');
}); 

function calculate(i) {
    var myunitprice = document.getElementById('unitprice' + i).value;
    var myquantity = document.getElementById('quantity' + i).value;
    var result = document.getElementById('total' + i);
    var myResult = myunitprice * myquantity;
    result.value = myResult.toFixed(2);
    TotalValue();
}

function TotalValue() {
    var totalValue = 0;
    $(document).find('input[name=total]').each(function(index, Obj) {
        if (isNaN(parseFloat($(Obj).val()))) $(Obj).val(0)
        totalValue += parseFloat($(Obj).val())

    })
    $('#GrandTotal').val(totalValue.toFixed(2))
}

http://jsfiddle.net/santoshj/5796xu77/

edited Jul 5, 2017 at 12:29

answered Aug 22, 2015 at 7:11

J Santosh

3,8223 gold badges25 silver badges44 bronze badges

3 Comments

user1650576 Over a year ago

thank you Santosh, but i only need 1 total textbox, i'll try to add all the total's of by adding them. thank you again.

user1650576 Over a year ago

this is what i wass looking for, but if you try 23 * 23 = 575.00 the result is wrong. it should be 529.00. i think there's something wrong with the formula.

J Santosh Over a year ago

updated fiddle and code . to add all totals you must store them in some place. i used input element , you are free to change it .

Collectives™ on Stack Overflow

format coding for input type using java script

4 Answers 4

1 Comment

2 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related