How to send input from forms in html to javascript to my json file
Question
I want to send the input from id="question" and id="answer" to a javascript file to a json file and I want to store multiple questions with their answers, I don't know how to do that could anyone help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study App</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
</head>
<body>
<form action="">
<label class="Question_text" for="question">Question</label>
<input class="Question_input" id="question" placeholder="Enter your question" required>
<label class="answer_text" for="answer">Answer</label>
<input class="answer_input" id="answer" placeholder=" Enter your answer" required>
<button class="Reset_btn" type="reset">Clear Fields</button>
<button class="enter_question" type="submit">Enter Question</button>
</form>
<script src="index.js"></script>
</body>
</html>
2 answers
solution1
0 2022-05-05 10:26:41
first you need to get the values from the input like this
var q = document.getElementById("question")
var ans = document.getElementById("answer")
and then vanilla javascript cannot write to a fiile so you will need to use php or node.js or for local use you can use cookies or localstorage elsewise you can use some kind of database
solution2
0 2022-05-05 11:18:15
You can the below JS function.
You have to call the function in onSubmit attribute of HTML form.
function exportToJSON() { const userQuestion = document.getElementById("question").value; const userAnswer = document.getElementById("answer").value; const data = { questions: { question: userQuestion, answer: userAnswer } }; const a = document.createElement("a"); a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, ' ')], { type: "text/plain" })); a.setAttribute("download", "data.json"); document.body.appendChild(a); a.click(); document.body.removeChild(a); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Study App</title> </head> <body> <form action="" onSubmit="exportToJSON()"> <label class="Question_text" for="question">Question</label> <input class="Question_input" id="question" placeholder="Enter your question" required> <label class="answer_text" for="answer">Answer</label> <input class="answer_input" id="answer" placeholder="Enter your answer" required> <button class="Reset_btn" type="reset">Clear Fields</button> <button class="enter_question" type="submit">Enter Question</button> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.