javascript - 当按下发送按钮时，如何将表格发送到我的电子邮件？

Question

我从这个链接中使用了这个代码:https://codepen.io/TimQuincey/pen/Dtjox/

我不确定如何得到“发送!”按钮将用户重定向到我的电子邮件地址，包括他们的消息、姓名和电子邮件。

我尝试将我的电子邮件添加到“发送”按钮，但这只是重新启动表单，任何帮助将不胜感激!

body {
  padding-top: 25px;
  background-color: #454545;
  margin-left: 10px;
  margin-right: 10px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #FAFAFA;
}

.head {
  -webkit-border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  border-radius: 6px 6px 0px 0px;
  background-color: #2ABCA7;
  color: #FAFAFA;
}

h2 {
  text-align: center;
  padding: 18px 0 18px 0;
  font-size: 1.4em;
}

input {
  margin-bottom: 10px;
}

textarea {
  height: 100px;
  margin-bottom: 10px;
}

input:first-of-type {
  margin-top: 35px;
}

input,
textarea {
  font-size: 1em;
  padding: 15px 10px 10px;
  font-family: 'Source Sans Pro', arial, sans-serif;
  border: 1px solid #cecece;
  background: #d7d7d7;
  color: #FAFAFA;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 80%;
  max-width: 600px;
}

::-webkit-input-placeholder {
  color: #FAFAFA;
}

:-moz-placeholder {
  color: #FAFAFA;
}

::-moz-placeholder {
  color: #FAFAFA;
}

:-ms-input-placeholder {
  color: #FAFAFA;
}

button {
  margin-top: 15px;
  margin-bottom: 25px;
  background-color: #2ABCA7;
  padding: 12px 45px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #2ABCA7;
  -webkit-transition: .5s;
  transition: .5s;
  display: inline-block;
  cursor: pointer;
  width: 30%;
  color: #fff;
}

button:hover,
.button:hover {
  background: #19a08c;
}

label.error {
  font-family: 'Source Sans Pro', arial, sans-serif;
  font-size: 1em;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #d89c9c;
  width: 80%;
  margin: auto;
  color: #FAFAFA;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}


/* media queries */

@media (max-width: 700px) {
  label.error {
    width: 90%;
  }
  input,
  textarea {
    width: 90%;
  }
  button {
    width: 90%;
  }
  body {
    padding-top: 10px;
  }
}

.message {
  font-family: 'Source Sans Pro', arial, sans-serif;
  font-size: 1.1em;
  display: none;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #2ABCA7;
  width: 80%;
  margin: auto;
  color: #FAFAFA;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

<br/>
<br />
<br />

<script>
  // When the browser is ready...
  $(function() {
    // validate
    $("#contact").validate({
      // Set the validation rules
      rules: {
        name: "required",
        email: {
          required: true,
          email: true
        },
        message: "required",
      },
      // Specify the validation error messages
      messages: {
        name: "Please enter your name",
        email: "Please enter a valid email address",
        message: "Please enter a message",
      },
      // submit handler
      submitHandler: function(form) {
        //form.submit();
        $(".message").show();
        $(".message").fadeOut(4500);
      }
    });
  });
</script>

<!-- 
contact form created for treehouse competition.
-->
<form id="contact">
  <div class="container">
    <div class="head">
      <h2>Say Hello</h2>
    </div>
    <input type="text" name="name" placeholder="Name" /><br />
    <input type="email" name="email" placeholder="Email" /><br />
    <textarea type="text" name="message" placeholder="Message"></textarea><br />
    <div class="message">Message Sent</div>
    <a href="mailto:holdenrebecca.24@gmail.com" target="_blank">
      <button id="submit" type="submit">
      Send!
    </button>
    </a>
  </div>
</form>

Answer 1

还有很多其他方法可以做到这一点，但我通常这样做:

您可以删除标签 <a> ，将 id 属性添加到您的输入中，并向您的 SubmitHandler 添加一个 AjaxCall，如下所示:

 $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                url: '@Url.Action("actionName","controllerName")',
                data: JSON.stringify({
                    'name': $('#name').val(),
                    'email': $('#email').val(),
                    'message': $('#message').val(),
                })
            });

然后，在您的controllerName中创建您的操作actionName，如下所示:

        [HttpPost]
        public JsonResult actionName(string name, string email, string message)
        {
            try
            {
                yourContext.Database.ExecuteSqlCommand("exec dbo.emailProcedure @name @email @message", new SqlParameter("@name", name), new SqlParameter("@email", email), new SqlParameter("@message", message));
                return Json(true);
            catch (Exception)
            {
                return Json(false);
            }            
        }

此外，您应该创建您的 emailProcedure 并根据需要在您的 View 中处理返回的 Json。

编辑

抱歉，我刚刚在评论中看到您正在使用 PHP。我在示例中使用了 C#。但它可能会给你一些提示。