问题是从HTML表单中获取输入,并检查是否输入了输入,如果输入正确,应该有两个名为编辑和发送的按钮。在编辑按钮中,我需要再次将输入恢复为表单,并让用户编辑
所以现在我已经创建了编辑按钮,但我不知道如何调用js`中的函数
function formValidator(){
var name = document.queryForm.name.value;
var email = document.queryForm.email.value;
var subject = document.queryForm.subject.value;
var query = document.queryForm.query.value;
if(name.length == 0){
alert("Name cant be empty");
return false;
}
else if (email.length == 0){
alert("Email cant be empty");
return false;
}
else if (query.length == 0){
alert("Query cant be empty");
return false;
}
else{
document.write("Name : " + name + "<br/>");
document.write("Email : " + email + "<br/>");
document.write("Subject : " + subject + "<br/>");
document.write("Query : " + query + "<br/><br/>");
var editButton = document.write("<button onclick='editFunction'>edit</button>");
}
}
function editFunction(){
alert("edit is working");
}
<!DOCRTYPE html>
<html>
<head>
<title>Query</title>
<meta charset="utf-8">
<link rel = "stylesheet" href = "FormStyles.css">
</head>
<body>
<h1>QUERY FORM</h1>
<form name="queryForm" method ="POST" onsubmit="return formValidator()">
<label for = "name">Name</label><br>
<input type = "text" id = "name" name = "name" placeholder="Type your name"><br><br>
<label for = "email">Email</label><br>
<input type="text" id = "email" name = "email" placeholder="Type your email"><br><br>
<label for="subject">Select the query subjet</label><br>
<select name="subject" id="subject">
<option value="Delivery">Delivery</option>
<option value="Delivery_cost">Delivery cost</option>
<option value="Damaged_goods">Damaged goods</option>
<option value="Over_charged">Over payed</option>
<option value="Refund">Requesting for a refund</option>
<option value="Other">Other</option>
</select><br><br>
<label for = "query">Enter your query here</label><br>
<textarea name="query" id="query" cols="60" rows="10" placeholder="Brief your query"></textarea><br><br>
<input type="submit" value="View query">
</form>
<script src="FormJs.js"></script>
</body>
</html>
`
您可以创建一个新的HTML按钮并添加一个事件侦听器:
var b = document.createElement("button");
b.addEventListener("click", editFunction);
someHtmlElement.appendChild(b);