I am working on my coursework and I am stuck with a small problem on passing the value to HTML form using a javascript function. So basically I am supposed to validate the form and create 2 buttons. the first button is to edit and the second button is to send and if the user clicks on edit I am supposed to send back the values that previously the user input back to the form and let the user edit whatever he wants.
I have created 2 buttons and I don't know how to pass the value back to the form. I tried so many ways but nothing worked someone please help me. Thanks in advance
function formValidator(){
var user_name = document.queryForm.name.value;
var email = document.queryForm.email.value;
var subject = document.queryForm.subject.value;
var query = document.queryForm.query.value;
if(user_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 : " + user_name + "<br/>");
document.write("Email : " + email + "<br/>");
document.write("Subject : " + subject + "<br/>");
document.write("Query : " + query + "<br/><br/>");
document.write("<button onclick='editFunction()'>Edit</button>");
document.write("<button onclick='return sendFunction()'>Send</button>")
}
}
function editFunction(){
alert("edit function working");
}
function sendFunction(){
alert("send function 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" onsubmit="return formValidator();return editFunction()">
<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>
Aucun commentaire:
Enregistrer un commentaire