无法将表单数据 onclick 传递给 javascript

Question

我正在编写一个带有 HTML 表单的小代码，当我单击按钮时，它应该将数据发送到 js。但不幸的是，它打印空白。这是我的代码。

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>

请让我知道我哪里出错了，我该如何解决这个问题。

谢谢

Answer 1

对于您的用例，onsubmit 是有意义的。此外，如果您的FormData 构造函数使用您的form 元素来构建data 对象，您也不需要使用data.append。

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>

Answer 2

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));
}

Answer 3

您可以简单地执行以下操作：

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>

Answer 4

将onsubmit() 方法添加到html 表单。在javascript函数中，使用querySelector通过for循环获取formdata，如下所示。

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>