CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JokerMartini
JokerMartini

Reputation: 6147

adjusting input field - places total value in div

Below is a basic HTML layout that contains two input fields and one div with the class of 'output'. What I want to know is how to make the div with the class of 'output' be updated with the multiplication of the two spinners upon change. So as the values are adjusted and changed the answer is updated in real time.

Thank you guys for the help. I'm new to the whole javascript thing which I'm assuming this will require. 

    <meta charset="utf-8" />

</head>


<body>

    <div class="pagewrap">

        <form id="totalRenderTime">

            <fieldset>

                <div class="item">
                    <label>Count</label>
                    <input type="number" min="0" max="99999999" step="1" value="100" />
                </div><!--END item -->

                <div class="item">
                    <label>Multiplier</label>
                    <input type="number" min="0" max="99999999" step="1" value="10" /> 
                </div><!--END item -->

                <div class="item">
                    <label class="highlight">Total Render Time</label>
                    <div class="output">1000</div>
                </div><!--END item -->

            </fieldset>
        </form>

    </div><!--END pagewrap -->  

</body>

Upvotes: 0

Views: 136

Answers (3)

Shn
Shn

Reputation: 368

You can use onkeyup event in javascript

<script>
function showTotal()
{
document.getElementById("output").innerHTML=parseInt(document.getElementById("count").value)*parseInt(document.getElementById("multipy").value);

}
</script>
</head>
<body>
<div class="pagewrap">
<form id="totalRenderTime">
<fieldset>
<div class="item">
<label>Count</label>
<input type="number" id="count" min="0" max="99999999" step="1" value="100" onkeyup="showTotal();" />
</div><!--END item -->
<div class="item">
<label>Multiplier</label>
<input id="multipy" type="number" min="0" max="99999999" step="1" value="10" onkeyup="showTotal();"  /> 
</div><!--END item -->
<div class="item">
<label class="highlight">Total Render Time</label>
<div class="output" id="output">1000</div>
</div><!--END item -->
</fieldset>
</form>
</div>

</body>

Upvotes: 2

Biby Augustine
Biby Augustine

Reputation: 425

Added Fiddle here for your solution http://jsfiddle.net/8nhmU/16/

Source:

<div class="pagewrap">

        <form id="totalRenderTime">

            <fieldset>

                <div class="item">
                    <label>Count</label>
                    <input id="txtfirst" type="number" min="0" max="99999999" step="1" value="100" />
                </div><!--END item -->

                <div class="item">
                    <label>Multiplier</label>
                    <input id="txtSecond" type="number" min="0" max="99999999" step="1" value="10" /> 
                </div><!--END item -->

                <div class="item">
                    <label class="highlight">Total Render Time</label>
                    <div class="output">1000</div>
                </div><!--END item -->

            </fieldset>
        </form>

    </div><!--END pagewrap -->

Javascript:

$(document).ready(function() {
    $("#txtfirst, #txtSecond").change(function(){
     var result=$("#txtfirst").val()* $("#txtSecond").val();
    $(".output").text(result);
    });
});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

Try this:

$("input").change(function() {
var mul=1;
$('input').each(function(){
mul=mul*parseInt($(this).val());
})
$('.output').html(mul);
});

Working Fiddle

Upvotes: 2

Related Questions