无法将表单数据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循环获取表单数据，如下所示。

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>