1

I am beginner at programming and I am making a website project, which has a contact form and I have to somehow save the data from the inputs. I can only do it with local storage, but in this case it saves only the last input and I want to save the data on a json server.

This is my HTML for the contact form:

<section class="enquiries">

  <input type="text" name="name" id="name" autofocus="autofocus" placeholder=" Name:"></input>
  <br>
  <input type="email" name="email" id="email" placeholder=" Email:"></input>
  <br>
  <input type="text" name="subject" id="subject" placeholder=" Subject:"></input>
  <br>

  <textarea id="extra" name="extra" placeholder=" Message..."></textarea>

</section>
<button class="button" type="submit">Send</button>

I have already installed json server, created a db.json file in which I have this:

{
  "contactInfo": [
    {
      "id": 1,
      "name": "",
      "email": "",
      "subject": "",
      "extra": ""
    }
  ]
}

it works when I make requests with Postman. How can I connect it with my server and how can I save the data from the inputs?

I will be very grateful if you help me. Thanks in advance.

Rodrigo García
  • 1,357
  • 15
  • 26
Ana
  • 13
  • 4
  • If it works with postman, have the form submit to the same url? https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form#Sending_form_data_to_your_web_server – Shilly Feb 27 '19 at 12:44

1 Answers1

0

How about the next:

<form action="/contactInfo" method="post">
  <section class="enquiries">

    <input type="text" name="name" id="name" autofocus="autofocus" placeholder=" Name:"></input>
    <br>
    <input type="email" name="email" id="email" placeholder=" Email:"></input>
    <br>
    <input type="text" name="subject" id="subject" placeholder=" Subject:"></input>
    <br>

    <textarea id="extra" name="extra" placeholder=" Message..."></textarea>

  </section>
  <button class="button" type="submit">Send</button>
</form>

Don't forget put your form elements inside a <form> tag.

In your case /contactInfo in the action attribute, refers to the name of your JSON object defined in your db.json, don't put it literally like that, you need to write the correct valid URL of the endpoint.

Rodrigo García
  • 1,357
  • 15
  • 26
  • Hello Rodrikor, Thanks a lot for you answer, it is working now! But the problem now is that everytime I add info in the inputs and press the submit button, it directly shows the new object that is created, but I want it to stay on the same page, just to clears the input fields without showing anything. I apologise if my question is stupid but how can I do it? – Ana Feb 27 '19 at 13:38
  • [Here](https://stackoverflow.com/a/1263859/3848267) is the answer for that. "Just handle the form submission on the submit event, and return false" – Rodrigo García Feb 27 '19 at 13:45
  • If the answer satisfies your question, then accept it as correct (: – Rodrigo García Feb 27 '19 at 13:47