送信ボタンなしでテキストフィールド値を計算する方法

Question

送信ボタンなしで値を計算しようとしています。ユーザーがPCの重量、高さ、および数を入力すると、自分のコードが値を計算し、ページを更新せずに自動的に合計テキストフィールドに表示する必要があります。どうやってやるの？

この

は私の計算である： total = weight * height * no of pcs

<div class="right"> 
    <label> 
     <span>Id :</span> 
     <input id="name" type="text" name="roll" /> 
    </label>   
    <label> 
     <span>material name :</span> 
     <input type="text" name="material" placeholder="material Name" /> 
    </label>   
    <input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>    
    <label> 
     <span>Weight:</span> 
     <input name="kg" type="text" size="10" maxlength="10" value="0"/> 
    </label> 
    <label> 
     <span> height:</span> 
     <input name="mytax" type="text" value="0" size="3" maxlength="4"/> 
    </label> 
    <label> 
     <span> no of pcs :</span> 
     <input name="no" type="text" id="no" value="0" size="3" maxlength="4"/> 
    </label> 
    <label> 
     <span> Total :</span> 
     <input name="Total" type="text" value="0" size="3" maxlength="4"/> 
    </label> 
</div> 

Answer 1

このコードを試してください

javascriptのコード

<script type="text/javascript"> 
       function getOrderTotal() { 
        var iweight= document.myform.weight.value; 
        var iheight= document.myform.iheight.value; 
        var ino= document.myform.no.value; 

        if(!iweight.match(recurrency)) { 
         alert('Please provide an item cost in 0.00 format!'); 
        } 

        else { 

         var ifinal=iweight * iheight * ino; 

         ); 


         ifinal *= 100; 
         ifinal = Math.ceil(ifinal); 
         ifinal /= 100; 
         if(ifinal) { 
          ifinal = ifinal; 
         } 

         document.getElementById('mytotal').value = ifinal; 

        } 
} 

htmlコード jQueryを使って

<div class="right"> 
     <label> 
     <span> Id :</span> 
     <input id="name" type="text" name="roll" /> 
    </label> 

    <label> 
     <span>material name :</span> 
     <input type="text" name="material" placeholder="material Name" /> 
    </label> 



     <label> 
     <span>Weight:</span> 
    <input name="weight" type="text" id="weight" onchange="getOrderTotal()" size="10" maxlength="10" value="0"/> 
    </label> 

    <label> 
     <span> height:</span> 
     <input name="height" id="height" type="text" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/> 
    </label> 


    <label> 
     <span> no of pcs :</span> 

     <input name="no" type="text" id="no" onchange="getOrderTotal()" value="0" size="3" maxlength="4"/> 



    </label> 
    <label> 
     <span> Total :</span> 

     <input name="Total" type="text" id="mytotal" value="0" size="3" maxlength="4"/> 



    </label> 


    </div> 

Answer 2

あなたはこの

のようなものを使用しますが

<script> 

    $(document).ready(function() { 

     $('input[name="no"]').keyup(function() { 

      var kg = $('input[name="kg"]').val(); 

      var mytax = $('input[name="mytax"]').val(); 

      var no = $('input[name="no"]').val(); 

      var total = parseInt(kg) * parseInt(mytax) * parseInt(no); 

      $('input[name="Total"]').val(total); 

     }); 

    }); 

    </script> 

が、それは動作しますホープは、あなたのファイルにjqueryのコードを含める

Answer 3

$('[name="mytax"]').change(function() { 
    //add here your formula 
}); 

Answer 4

これを試してみてください：

HTMLで

我々は簡単に任意の要素を識別することができるように、すべての入力フィールドにIDを追加：

<div class="right"> 
    <label> 
     <span> Id :</span> 
     <input id="name" type="text" name="roll" /> 
    </label> 

    <label> 
     <span>material name :</span> 
     <input type="text" name="material" placeholder="material Name" /> 
    </label> 

    <input name="myprice" id="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/> 

    <label> 
     <span>Weight:</span> 
     <input name="kg" id="kg" type="text" size="10" maxlength="10" value="0"/> 
    </label> 

    <label> 
     <span> height:</span> 
     <input name="mytax" id="mytax" type="text" value="0" size="3" maxlength="4"/> 
    </label> 

    <label> 
     <span> no of pcs :</span> 
     <input name="no" id="no" type="text" value="0" size="3" maxlength="4"/> 
    </label> 
    <label> 
     <span> Total :</span> 
     <input name="total" id="total" type="text" value="0" size="3" maxlength="4"/> 
    </label> 
</div> 

のjQuery：

1）parseFloatは

有する任意の変数の値がない次いでストア値かどうかを確認価格または重量は浮動小数点値である可能性があるため、ここではparseFloatを使用しています。

$(document).ready(function() { 
    $('#kg, #mytax, #no').change(function() { 
     var kg = ($("#kg").val() != "") ? parseFloat($("#kg").val()) : 0; 
     var mytax = ($("#mytax").val() != "") ? parseFloat($("#mytax").val()) : 0; 
     var no = ($("#no").val() != "") ? parseFloat($("#no").val()) : 0; 
     var total = kg * mytax * no; 
     $('#total').val(total); 
    }); 
}); 

Answer 5

JQueryやその他のJavaScriptライブラリを使用しないと、プレーンバニラJavaScriptソリューションは「キー押し」イベントをタップすることになります。ここで

は例のコードは、ちょうどあなたのアイデアを与えることです：

<html> 
<head> 
<script> 
function calculate() { 
var a = document.getElementById("a").value; 
var b = document.getElementById("b").value; 
document.getElementById("result").innerHTML = a * b; 
} 

</script> 
</head> 
<body> 
First Value <input type="text" id="a"></input> 
<br> 
Second Value <input type="text" id="b" onkeyup="calculate()"></input> 
<br> 
<div id="result"></div> 

</body> 
</html> 

機能calculate()がキーを押すことで起動されます。それは値をとり、乗算を行います。

Answer 6

これを試すことができます。

<div class="right"> 
    <label> 
     <span>Id :</span> 
     <input id="name" type="text" name="roll" /> 
    </label>   
    <label> 
     <span>material name :</span> 
     <input type="text" name="material" placeholder="material Name" /> 
    </label>   
    <input name="myprice" type="hidden" size="10" maxlength="10" value="1000" readonly/>    
    <label> 
     <span>Weight:</span> 
     <input name="kg" type="text" id="weight" onblur="findTotal()" size="10" maxlength="10" value="0"/> 
    </label> 
    <label> 
     <span> height:</span> 
     <input name="mytax" type="text" id="height" onblur="findTotal()" value="0" size="3" maxlength="4"/> 
    </label> 
    <label> 
     <span> no of pcs :</span> 
     <input name="no" type="text" id="nopc" onblur="findTotal()" value="0" size="3" maxlength="4"/> 
    </label> 
    <label> 
     <span> Total :</span> 
     <input name="Total" type="text" id="total" value="0" size="3" maxlength="4"/> 
    </label> 
</div> 
<script type="text/javascript"> 
function findTotal(){ 
    var weight = document.getElementById('weight').value; 
    var height = document.getElementById('height').value; 
     var pc = document.getElementById('nopc').value; 


    total = weight * height * pc; 
    if(isNaN(total)){ 
     alert("Please enter only numbers"); 

    } 
    document.getElementById('total').value = total; 
} 
    </script>