标签：const log color border console radio 2.23 制作 页面
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合理性审查</title>
<style>
.reSet {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.form {
width: 600px;
margin: 0 auto;
/*border: 1px solid red;*/
}
.form table {
margin: 0 auto;
}
.form table tr td {
width: 100px;
height: 30px;
border: 1px solid #000;
text-align: center;
}
button {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.centered-form {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.bordered-form {
border: 2px solid #000; /* 边框样式 */
padding: 150px; /* 可选的内边距 */
background-color: #f0f0f0; /* 可选的背景颜色 */
}
</style>
</head>
<body>
<h1 style="text-align: center">专业性审查</h1>
<!--边框居中-->
<div class="centered-form">
<!-- 增加边框-->
<div class="bordered-form">
<!-- 调整边框大小-->
<div class="form">
<form id="pass">
<label for="cardID">请输入要审查的id号</label>
<input type="text" id="cardID" name="cardID" required>
<br>
<label>学院意见</label>
<br>
<label for="class1">考核内容与各课程目标要求掌握的内容的覆盖度：</label>
<div id="class1">
<label><input type="radio" name="class1" value="全覆盖">全覆盖</label>
<label><input type="radio" name="class1" value="部分">部分</label>
<label><input type="radio" name="class1" value="基本覆盖">基本覆盖</label>
<label><input type="radio" name="class1" value="有待提高">有待提高</label>
</div>
<label for="purpose">考核方式课程目标要求达到的能力的有效性：</label>
<div id="purpose">
<label><input type="radio" name="purpose" value="非常有效">非常有效</label>
<label><input type="radio" name="purpose" value="有效">有效</label>
<label><input type="radio" name="purpose" value="基本有效">基本有效</label>
<label><input type="radio" name="purpose" value="有待提高">有待提高</label>
</div>
<label for="final">试卷合理性审查最终意见:</label>
<div id="final">
<label><input type="radio" name="final" value="通过">通过</label>
<label><input type="radio" name="final" value="不通过">不通过</label>
</div>
<br>
<button type="submit" style="display: block; margin: 0 auto;">审批</button>
</form>
</div>
</div>
</div>
</body>
<script>
document.getElementById('pass').addEventListener('submit', function (event) {
event.preventDefault();
const cardID = document.getElementById('cardID').value;
const class1 = document.querySelectorAll('input[name="class1"]');
let c;
class1.forEach(radio => {
if (radio.checked) {
c = radio.value;
console.log(c);
}
});
const purpose = document.querySelectorAll('input[name="purpose"]');
let p;
purpose.forEach(radio => {
if (radio.checked) {
p = radio.value;
console.log(p);
}
});
const professional = c + "," + p;
console.log(professional);
const final = document.querySelectorAll('input[name="final"]');
let f;
final.forEach(radio => {
if (radio.checked) {
f = radio.value;
console.log(f);
}
});
let audi;
if (f === "通过") {
audi = 2;
} else {
audi = -1;
}
const requestUrl = `http://localhost:8080/president/pass/${cardID}/${professional}/${f}/${audi}`;
fetch(requestUrl,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
alert("已完成信息的审查");
console.log(data);
} else {
alert("审查失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
})
</script>
</html>
标签：const,
log,
color,
border,
console,
radio,
2.23,
制作,
页面
From： https://www.cnblogs.com/dmx-03/p/18040278