Sending data by html form (POST method)

Viewed 42

I have a question regarding POST method. I'm trying to record the data from form into txt file. But the string is empty (in txt file I have only "The request: ")

HTML:

  <form
    action=""
    method="POST"
    id="form"
    class="section-contact-me-form"
  >
    <fieldset>

      <div class="section-contact-me-input">
        <label class="section-contact-me-input__label" for="name">Name*</label>
        <input
          type="text"
          name="name"
          class="section-contact-me-input__input _req"
          id="name"
        >
      </div>

      <div class="section-contact-me-input">
        <label class="section-contact-me-input__label" for="email">E-mail*</label>
        <input
          type="text"
          name="email"
          id="email"
          class="section-contact-me-input__input _req _email"
        >
      </div>

      <div class="section-contact-me-input">
        <label class="section-contact-me-input__label" for="phone">Phone</label>
        <input
          type="text"
          name="phone"
          id="phone"
          class="section-contact-me-input__input phone"
        >
      </div>

      <div class="section-contact-me-textarea">
        <label class="section-contact-me-textarea__label" for="message">Your message*</label>
        <textarea
          rows="10"
          cols="45"
          name="message"
          id="message"
          class="section-contact-me-textarea__textarea _req"
        ></textarea>
      </div>

    </fieldset>
    
    <div id="submit" class="submit-button">
      <button class="submit-button_active">Send data</button>
    </div>

  </form>

JS:

form.addEventListener("submit", formSend);

async function formSend() {

    const formData = {
      name: document.querySelector("#name").value,
      email: document.querySelector("#email").value,
      phone: document.querySelector("#phone").value,
      message: document.querySelector("#message").value
    };

    const formDatatoSend = JSON.stringify(formData)

    sendData("http://localhost:3000/101_susov_newDesign/contactme.php", formDatatoSend)
      .then(() => {
        form.reset();
      })
      .catch((err) => console.log(err))
};

const sendData = async (url, data) => {
  const response = await fetch (url, {
    method: "POST",
    body: data
  })

  if (!response.ok) {
    throw new Error (`URL with error ${url}, status ${response}`)
  };

  return await response;
};

PHP:

<?php
    $value = $_POST['value'];

    $f = fopen('file.txt', 'a+');
    fwrite($f, "The request: ".$value."\n");
    fclose($f);
?>

So, the server works properly: there is the access to php code and txt file refreshes every time I use form button, but the content sended from form is empty. As I told before in txt file I have only "The request: "

Where is the eror in my code? Thanks in advance and have a good day!

1 Answers

You do not have a field called value so $_POST['value'] doesn't return anything. You can get the value of each field by adding it's name attribute as the array key:

  • $value = $_POST['phone'] would return 'The request: PHONE_NUMBER' into your TXT file.

  • $value = json_encode($_POST) would return the whole post into your TXT file

This should work:

$value = json_encode($_POST);
Related