'jQuery to Send Email from Form?

I'm trying to have my form send me an email every time the "Submit Query" button is clicked. The form is validated and brings the user to a confirmation page after the button is clicked, but I get no email.

Form code:

$(document).ready(function() {
    $('#sumbit').click(function() {
        $('#contactform').attr('action',
                       'mailto:[email protected]?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:[email protected]">
</form>

<script src="js/form.js"></script>
</body>
</html>
javascriptjqueryhtml


Solution 1:[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>

Solution 2:[2]

$(function() {
  $('#contactform').submit(function(e) {
    e.preventDefault();
    $(this).attr(
      'action',
      'mailto:[email protected]?subject=Jeannette Chambliss Digital Portfolio');
    console.log($(this)[0].action);
    return true;
  });
});
form ul {
  padding: 0;
  margin: 0;
}

form ul li {
  list-style: none;
}
<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>

Solution 3:[3]

Welcome to Stack Overlfow.

I suspect you are missing the .preventDefault() to prevent the click event from proceeding.

$(document).ready(function() {
  $('#submit').click(function(e) {
    e.preventDefault();  
    $('#contactform').attr(
      'action',
      'mailto:[email protected]?subject=Jeannette Chambliss Digital Portfolio');
    $('#contactform').submit();
  });
});

Mind you, if the user bypasses clicking the button, and hits Enter, this code will not execute. You may want to consider moving your verification code into the submit event in jQuery, and move this code in there too.

I noticed a potential typo: $('#sumbit').click(function() {

Did you mean: $('#submit').click(function() {

Update

According to the HTML specifications, the action field of the form should be a correctly formed HTTP URL. So ‘mailto:’ is not valid for the action field.

Also, this will not "send" the email. It will only ask the default email program to compose a message that the user can send. If you want the data submitted to be sent via SMTP, this must be done by a server-side script (ASP/ASP.NET, PHP, ColdFusion, Perl, Python...) via a form handler.

$(function() {
  $('#contactform').submit(function(e) {
    e.preventDefault();
    $(this).attr(
      'action',
      'mailto:[email protected]?subject=Jeannette Chambliss Digital Portfolio');
    console.log($(this)[0].action);
    return true;
  });
});
form ul {
  padding: 0;
  margin: 0;
}

form ul li {
  list-style: none;
}
<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Noman Arshad
Solution 2 Rafael Junk
Solution 3

Related Questions