How to send input from forms in html to javascript to my json file-CodePudding

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  for="question">Question</label>
        <input  id="question" placeholder="Enter your question" required>
        <label  for="answer">Answer</label>
        <input  id="answer" placeholder=" Enter your answer" required>
        <button  type="reset">Clear Fields</button>
        <button  type="submit">Enter Question</button>
    </form>
    <script src="index.js"></script>
</body>

</html>

CodePudding user response：

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

CodePudding user response：

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  for="question">Question</label>
        <input  id="question" placeholder="Enter your question" required>
        <label  for="answer">Answer</label>
        <input  id="answer" placeholder="Enter your answer" required>
        <button  type="reset">Clear Fields</button>
        <button  type="submit">Enter Question</button>
    </form>
</body>

</html>