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>

you cannot send data to js files.. who are the actors in your game? you showed an html form having some inputs that will be sent with an http request made to an url that should be defined in form attribute action. But you didn't define any and you didn't better explain what you wish to do. You probably need a server side action in charge of processing those requests but your question is too vague so far — Diego D
– Diego D, Commented May 5, 2022 at 10:19

MAMO EMIRU · Accepted Answer · 2022-05-05 11:18:15Z

1

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>

answered May 5, 2022 at 11:18

MAMO EMIRU

1521 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

the python guy Over a year ago

it working but why is it downloading a file

MAMO EMIRU Over a year ago

This is your question → 'How to send input from forms in HTML to JavaScript to my JSON file'. Right? So, the file is a JSON file that stores the value entered in those form elements.

the python guy Over a year ago

Yea but i Alderdy have a json file in vs code i want it to go there

net-js · Accepted Answer · 2022-05-05 10:26:41Z

0

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

answered May 5, 2022 at 10:26

net-js

1291 silver badge9 bronze badges

2 Comments

the python guy Over a year ago

yoo bro it's storing the things in type in my input function its storing this input#question.Question_input input#answer.answer_input input#question.Question_input input#answer.answer_input How to fix

net-js Over a year ago

then you can get the values after the buttons is clicked

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related