Free Template 26 : Add two textbox values and display the sum in a third textbox automatically.“Input A + input B = displays sum on input C; html+JavaScript ”
สรุปง่ายๆ ก็คือ กรอกตัวเลข 2 ช่องแรกแล้วจะไปรวมผลลัพธ์ให้ในช่องที่ 3 ครับ .
Free code example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>devbanban.com</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script type="text/javascript"> function sum() { var txtFirstNumberValue = document.getElementById('txt1').value; var txtSecondNumberValue = document.getElementById('txt2').value; var txtthdNumberValue = document.getElementById('txt3').value; var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue) ; if (!isNaN(result)) { document.getElementById('txt3').value = result; } } </script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-9"> <h3>::Add two textbox values and display <br /> the sum in a third textbox automatically. ::</h3> <form method="post" name="frmbooking" action="http://devbanban.com/" class="form-horizontal"> <div class="form-group"> <div class="col-sm-1"> NUMBER1 </div> <div class="col-sm-4"> <input type="number" id="txt1" onkeyup="sum();" class="form-control" required /> </div> </div> <div class="form-group"> <div class="col-sm-1"> NUMBER2 </div> <div class="col-sm-4"> <input type="number" id="txt2" onkeyup="sum();" class="form-control" required /> </div> </div> <div class="form-group"> <div class="col-sm-1"> TOTAL </div> <div class="col-sm-4"> <input type="text" id="txt3" readonly="readonly" class="form-control" required /> </div> </div> <div class="form-group"> <div class="col-sm-1"> </div> <div class="col-sm-3"> <button type="submit" class="btn btn-primary"> SAVE TO DEVBANBN.COM</button> <br /> Cr.http://jsfiddle.net/tLKLy/ </div> </div> </form> </div> </div> </div> </body> </html> |
ทดลองใช้งาน
Result img
ขอแนะนำระบบพร้อมใช้งาน *รายละเอียดและราคาอยู่ใต้คลิป
ร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com ได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/
meter น้ำ / ไฟ
form
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <form action="" method="post"> <h4> คิดค่าน้ำค่าไฟ </h4> น้ำ <input type="number" id="txt1" onkeyup="sum();"/> หน่วยละ <input type="text" id="txt2" value="18" readonly/> รวม <input type="text" id="resulttxt1_txt2" readonly/> <br> ไฟ <input type="number" id="txt3" onkeyup="sum();" /> หน่วยละ <input type="text" id="txt4" value="20" readonly/> รวม <input type="text" id="resulttxt3_txt4" readonly/> <br> รวมทั้งสิ้น <input type="text" id="txt5" readonly/> บาท </form> <script type="text/javascript"> function sumx() { var txt1 = document.getElementById('txt1').value; var txt2 = document.getElementById('txt2').value; var txt3 = document.getElementById('txt3').value; var txt4 = document.getElementById('txt4').value; var result1 = parseInt(txt1) * parseInt(txt2); if (!isNaN(result1)) { document.getElementById('resulttxt1_txt2').value = result1; } var result2 = parseInt(txt3) * parseInt(txt4); if (!isNaN(result2)) { document.getElementById('resulttxt3_txt4').value = result2; } var resultx = parseInt(result1) + parseInt(result2); if (!isNaN(resultx)) { document.getElementById('txt5').value = resultx; } } </script> </body> </html> |