javascript - 添加两个文本框包含并在另一个文本框中显示结果,没有使用 html 和 javascript 的任何按钮
问题描述
我有 5 个动态部门。每个部门都有一些文本框,其中每个部门都有一组特定的文本字段,如果用户将任何数据放入这些文本框中的第一个文本框中,那么它应该出现在以前的只读文本框中,而不是这些部门的一部分。再次,如果用户将任何数据放入这些文本框中的第二个文本框中,那么它们的添加将显示在前一个只读文本框中。
在这里,我将附上我到目前为止尝试过的整个代码。但我无法得到想要的结果。
<%@page import="beans.*"%>
<%@page import="java.util.*" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>div data entry</title>
</head>
<body>
<br>
<div class="transbox">
<form action="dataentryservletclass" method="post">
<center>
<table><tr><td>Class Name</td> <td><input type="text" name="c_cname"></td>
<td>Class ID</td> <td><input type="text" name="c_cid" placeholder="Enter a Text"></td></tr>
<tr><td>Class Start Date</td> <td><input type="date" name="c_csdate"></td>
<td>Total Marks</td> <td><input type="text" name="c_tmarks" id="txttotal" readonly></td>
</tr></table>
No. of Students <select class="selectbtn" name="c_nos" onchange="myFunction(this)">
<option>Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="myDIV1" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<div id="myDIV2" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname2"></td>
<td><input type="text" name="c_sroll2"></td>
<td><input type="text" id="txt2" name="c_marks2" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<div id="myDIV3" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname2"></td>
<td><input type="text" name="c_sroll2"></td>
<td><input type="text" id="txt2" name="c_marks2" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname3"></td>
<td><input type="text" name="c_sroll3"></td>
<td><input type="text" id="txt3" name="c_marks3" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<script>
function myFunction(objDrop) {
var a = document.getElementById("myDIV1");
var b = document.getElementById("myDIV2");
var c = document.getElementById("myDIV3");
if(objDrop.value=="1"){
if (a.style.display === "none") {
a.style.display = "block";
b.style.display = "none";
c.style.display = "none";
}
else {
a.style.display = "none";
}
}
else if(objDrop.value=="2"){
if (b.style.display === "none") {
a.style.display = "none";
b.style.display = "block";
c.style.display = "none";
}
else {
b.style.display = "none";
}
}
else if(objDrop.value=="3"){
if (c.style.display === "none") {
a.style.display = "none";
b.style.display = "none";
c.style.display = "block";
}
else {
c.style.display = "none";
}
}
}
function sum(){
var x=document.getElementById('txt1').value;
var y=document.getElementById('txt2').value;
var z=document.getElementById('txt3').value;
if(x==""){
x=0;
}
if(y==""){
y=0;
}
if(z==""){
z=0;
}
var result=parseInt(x)+parseInt(y)+parseInt(z);
if(!isNaN(result)){
document.getElementById('txttotal').value=result;
}
}
</script>
</center>
<hr><hr>
<button type="submit" value="Submit" class="submitbtn" style="float:right">Submit</button>
</form>
</div>
</body>
</html>
解决方案
我使用 onkeyup 事件触发了 javascript,根据您的描述制作了一个模型:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
</title>
<script type="text/javascript">
function display(){
var resultBox = document.getElementById("resultbox");
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var result = input1.value + input2.value;
resultBox.value = result;
}
</script>
</head>
<body>
<input id="resultbox" type="text" readonly />
<form>
<input type="text" id="input1" onkeyup="display();" onchange="display();" />
<input type="text" id="input2" onkeyup="display();" onchange="display();" />
</form>
</body>
</html>
让我知道这是否是你想要完成的。
推荐阅读
- java - 一个人如何在 Java 中从 MusicXML 中绘制乐谱?
- kubernetes - 如何在气流 kuber pod 操作员中设置 dns 配置?
- typescript - 从嵌套对象的特定属性中获取联合类型
- c++ - 嵌套的结构数组 - 我如何正确地为结构成员赋值?
- linux - 使用 shell 命令替换随机字符串的开始和结束
- javascript - 如何在 html/css/js 中禁用页面滚动?
- flutter - “int”类型不是“List”类型的子类型
' - python-3.x - 如何消除 django 中的唯一约束失败?
- c - 尝试更改 char* 字符串中的符号时出现分段错误错误
- sql - 我可以存储大量数据吗?