Question

每次点击“提交查询”按钮时，我都会尝试将表单发送给我。表单已经过验证，并在点击按钮后将用户带到确认页面，但我没有收到任何电子邮件。

表格代码：

$(document).ready(function() {
    $('#sumbit').click(function() {
        $('#contactform').attr('action',
                       'mailto:chinochinako@gmail.com?subject=Jeannette Chambliss Digital Portfolio' +
                       $('#name').val() + '&body=' + $('#email').val() + '&body=' + $('#comments').val() + '&body=');
        $('#contactform').submit();
    });
});

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
</head>
<body>
<form onSubmit="MM_validateForm('name','','R','comments','','R');return document.MM_returnValue" id="contactform">
	<label for="name">Full Name:
		<input name="name" type="text" id="name" required="required"></label><br /><br />
	<label for="email">Email:
	<input name="email" type="email" id="email" required="required"></label><br /><br />
	<label for="comments">Comments:
	<textarea name="comments" id="comments" required></textarea></label><br /><br />
<input name="submit" type="submit" id="submit" formaction="confirmation.html" formmethod="POST" formtarget="_self" action="mailto:chinochinako@gmail.com">
</form>

<script src="js/form.js"></script>
</body>
</html>

Answer 1

<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); // To empty previous error/success message.
// Checking for blank fields.
if (name == '' || email == '' || contact == '') {
alert("Please Fill Required Fields");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("contact_form.php", {
name1: name,
email1: email,
message1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
</script>

Answer 2

欢迎使用Stack Overlfow。

我怀疑您错过了.preventDefault()以防止点击事件继续进行。

$(document).ready(function() {
  $('#submit').click(function(e) {
    e.preventDefault();  
    $('#contactform').attr(
      'action',
      'mailto:chinochinako@gmail.com?subject=Jeannette Chambliss Digital Portfolio');
    $('#contactform').submit();
  });
});

请注意，如果用户绕过单击按钮，然后点击 Enter ，则此代码将不会执行。您可能需要考虑将验证码移动到jQuery中的submit事件中，并将此代码也移到那里。

我注意到了一个潜在的错字：$('#sumbit').click(function() {

您的意思是：$('#submit').click(function() {

<强>更新

根据HTML规范，表单的操作字段应该是正确形成的HTTP URL。因此'mailto：'对于操作字段无效。

此外，这不会发送＆＃34;电子邮件。它只会要求默认电子邮件程序撰写用户可以发送的消息。如果您希望通过SMTP发送提交的数据，则必须通过表单处理程序通过服务器端脚本（ASP / ASP.NET，PHP，ColdFusion，Perl，Python ...）来完成。

＆＃13;

$(function() {
  $('#contactform').submit(function(e) {
    e.preventDefault();
    $(this).attr(
      'action',
      'mailto:chinochinako@gmail.com?subject=Jeannette Chambliss Digital Portfolio');
    console.log($(this)[0].action);
    return true;
  });
});

＆＃13;

form ul {
  padding: 0;
  margin: 0;
}

form ul li {
  list-style: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
  <ul>
    <li>
      <input type="text" placeholder="Name" id="name" />
    </li>
    <li>
      <input type="text" placeholder="Email" id="email" />
    </li>
    <li>
      <input type="text" placeholder="Comments" id="comments" />
    </li>
  </ul>
  <button type="submit" id="submit">Send</button>
</form>

＆＃13;

jQuery从表单发送电子邮件？

2 个答案: