0

I'm writing a small code that has an HTML form and when I click the button, it should send data to js. but unfortunately, it is printing blank. Here is my code.

function postData() {
  const form = document.getElementById('form');
  const data = new FormData(form);
  data.append('contact_name', form.contact_name.value);
  data.append('contact_email', form.contact_email.value);
  data.append('contact_subject', form.contact_subject.value);
  data.append('message', form.message.value);
  console.log(JSON.stringify(data));
  return false;
}
<div class="form">
  <div class="row">
    <p class="success" id="success" style="display:none;"></p>
    <p class="error" id="error" style="display:none;"></p>
    <form name="contact_form" method="post" form action="javascript:postData()" id="form">
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="Your full name" name="contact_name" id="contact_name" class="input"></div>
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="E-mail Address" name="contact_email" id="contact_email" class="input"></div>
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="Subject" name="contact_subject" id="contact_subject" class="input"></div>
      <div class="col-md-12"><textarea data-delay="500" class="required valid" placeholder="Message" name="message" id="message"></textarea></div>
      <div class="col-md-2"><input type="submit" value="Submit">
      </div>
    </form>

  </div>
</div>

Please let me know where am I going wrong and how can I fix this.

Thanks

user3872094
  • 3,269
  • 8
  • 33
  • 71

4 Answers4

1

For your use-case, onsubmit makes sense. Also you don't need to use data.append if your FormData constructor took your form element to build the data object.

function postData(e) {
  // Added below statement to prevent page reload for demo purposes - otherwise log value will disappear.
  e.preventDefault();
  const form = e.target;
  const data = new FormData(form);
  const object = {};
  data.forEach((value, key) => object[key] = value);
  console.log(JSON.stringify(object));
}
<div class="form">
  <div class="row">
    <p class="success" id="success" style="display:none;"></p>
    <p class="error" id="error" style="display:none;"></p>
    <form name="contact_form" method="post" onsubmit="postData(event)" id="form">
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="Your full name" name="contact_name" id="contact_name" class="input"></div>
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="E-mail Address" name="contact_email" id="contact_email" class="input"></div>
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="Subject" name="contact_subject" id="contact_subject" class="input"></div>
      <div class="col-md-12"><textarea data-delay="500" class="required valid" placeholder="Message" name="message" id="message"></textarea></div>
      <div class="col-md-2"><input type="submit" value="Submit">
      </div>
    </form>

  </div>
</div>
Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39
0
function postData() {
        const form = document.getElementById('form');
        const data = new FormData(form);
        var object = {};
        data.forEach(function (value, key) {
            object[key] = value;
        });

        console.log(JSON.stringify(object));
}
Akil Makda
  • 373
  • 1
  • 3
  • 9
0

You can do simply the following:

function postData() {
  const form = document.getElementById('form');
  const data = new FormData(form);
  console.log(JSON.stringify(Object.fromEntries(data.entries())));
  //return false;
}
<div class="form">
  <div class="row">
    <p class="success" id="success" style="display:none;"></p>
    <p class="error" id="error" style="display:none;"></p>
    <form name="contact_form" method="post"  onsubmit="javascript:postData();return false;" id="form">
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="Your full name" name="contact_name" id="contact_name" class="input"></div>
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="E-mail Address" name="contact_email" id="contact_email" class="input"></div>
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="Subject" name="contact_subject" id="contact_subject" class="input"></div>
      <div class="col-md-12"><textarea data-delay="500" class="required valid" placeholder="Message" name="message" id="message"></textarea></div>
      <div class="col-md-2"><button type="submit">submit</button>
      </div>
    </form>

  </div>
</div>
MSQ
  • 489
  • 5
  • 15
0

Add the onsubmit() method to the html form. In the javascript function, use the querySelector to get the formdata using a for loop as shown below.

function postData() {
  const form = document.querySelector('form');
  const data = new FormData(form);
  const dataObject = {};

  for (const [key, value] of data.entries()) {
    dataObject[key] = value;
  }

  console.log(JSON.stringify(dataObject));
  console.log(dataObject);
  return false;
}
<div class="form">
  <div class="row">
    <p class="success" id="success" style="display:none;"></p>
    <p class="error" id="error" style="display:none;"></p>
    <form name="contact_form" method="post" onsubmit="return postData()" id="form">
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="Your full name" name="contact_name" id="contact_name" class="input"></div>
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="E-mail Address" name="contact_email" id="contact_email" class="input"></div>
      <div class="col-md-4"><input type="text" data-delay="300" placeholder="Subject" name="contact_subject" id="contact_subject" class="input"></div>
      <div class="col-md-12"><textarea data-delay="500" class="required valid" placeholder="Message" name="message" id="message"></textarea></div>
      <div class="col-md-2"><input type="submit" value="Submit">
      </div>
    </form>

  </div>
</div>
Lahiru Tennakoon
  • 621
  • 1
  • 6
  • 8