วันพฤหัสบดีที่ 8 พฤษภาคม พ.ศ. 2557

Jquery บวก ลบ ค่า Input text 2 ช่องอัตโนมัติ

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Plus Value</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function() {
    var output_element = $('#output_ele');
    var output_element1 = $('#output_ele1');

    $('#the_input_id').keyup(function() {  
        updateTotal();
    });
    
    $('#the_input_id1').keyup(function() {  
        updateTotal();
    });
    
    var updateTotal = function () {
      var input1 = parseInt($('#the_input_id').val());
      var input2 = parseInt($('#the_input_id1').val());
       var totals = parseFloat(input1 + input2) || 0;
       //parseFloat($('#totals').val()) || 0; 
      $('#total').text(totals);
    };

  // output_total.text(total);

 });
</script>
</head>
<body>
<form method="post">
<input type="text" id="the_input_id">
<input type="text" id="the_input_id1">
</form>
<div id="total">

</div>
</body>


</html>


ตัวอย่าง

ไม่มีความคิดเห็น:

แสดงความคิดเห็น