使用AJAX从表单输入发送电子邮件

Question

I'm new to AJAX and I'm trying to send an automated email using it once the user has inputted his email address into the form and clicked submit. I have built a form where the user inputs information, including name and email. Once they click submit the inputted email address should receive an email.

I'm sorry if this is a bad question or it has been asked before but I was struggling to find my answer.

 // Dummy function function getCookie(arg) { return arg } $("form.ajax").click(function(e) { alert("Starting Ajx"); var dealerID = getCookie("dealerID"); var userID = getCookie("userID"); $.ajax({ type: "POST", url: "https://example.org", headers: { 'X-Location-Id': dealerID, 'X-Id': userID }, data: { id: $(this).val(), // < note use of 'this' here access_token: $("#access_token").val() }, success: function(result) { alert('ok'); }, error: function(result) { alert('error'); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="ajax" method="POST" action=""> <p class="error-message" id="error-message"></p> <select name="title" id="title" class="wrap-input2 validate-input"> <option value="">Title</option> <option value="Mr">Mr</option> <option value="Ms">Ms</option> <option value="Miss">Miss</option> <option value="Mrs">Mrs</option> <option value="Sir">Sir</option> <option value="Dr">Dr</option> <option value="Prof">Prof</option> <option value="Mstr">Mstr</option> </select> <div class="wrap-input2 validate-input"> <input class="input2" name="forename" id="forename"> </div> <div class="wrap-input2 validate-input"> <input class="input2" name="surename" id="surename" `> </div> <div class="wrap-input2 validate-input"> <input class="input2" name="email" id="email" type="email" required> </div> <input class="spin" type="image" src="images/click.png" alt="Submit"> </form> 

Answer 1

agree also, Ajax is only a method to send data to the web server, it has no way to send mail directly. However you can implement a mail send function in the server which you can activate via Ajax.

Answer 2

AJAX = A synchronous J avaScript A nd X ML.

AJAX is not a programming language.

AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web server)
• JavaScript and HTML DOM (to display or use the data)

There is no way to send an email using AJAX alone, nor is there a way to send an email using JavaScript alone. You can use HTML or JavaScript along with a server side scripting language, such as CGI, PHP, or ASP.NET to send an email from your web server (or a SMTP Relay).

That said, you can have the browser help the user send an email using their email program. This is done with by setting a specific Form attribute.

Example

<form action="mailto:someone@example.com" method="post" enctype="text/plain">
  Name:<br>
  <input type="text" name="name" /><br />
  E-mail:<br />
  <input type="text" name="mail" /><br />
  Comment:<br />
  <input type="text" name="comment" size="50" /><br /><br />
  <input type="submit" value="Send" />
  <input type="reset" value="Reset" />
</form>

When the form is submitted, the browser asks the default email program to compose an email message and direct it to someone@example.com and the body of the message will contain the form filed entries, like so: [name]=[value]\\r\\n .

If this is acceptable, you could do this too in your script.

 // Dummy function function getCookie(arg) { return arg } $("form.ajax").submit(function(e) { console.log("Form Submission"); var dealerID = getCookie("dealerID"); var userID = getCookie("userID"); $("<input>", { type: "hidden", name: "location-id", value: dealerID }).appendTo(this); $("<input>", { type: "hidden", name: "user-id", value: userID }).appendTo(this); $(this).attr("action", "mailto:" + $("[name='email']").val() + "?cc=myemai@address.com&subject=Form%20Submission%20From%20Website"); return true }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="ajax" method="POST" action=""> <p class="error-message" id="error-message"></p> <select name="title" id="title" class="wrap-input2 validate-input"> <option value="">Title</option> <option value="Mr">Mr</option> <option value="Ms">Ms</option> <option value="Miss">Miss</option> <option value="Mrs">Mrs</option> <option value="Sir">Sir</option> <option value="Dr">Dr</option> <option value="Prof">Prof</option> <option value="Mstr">Mstr</option> </select> <div class="wrap-input2 validate-input"> <input class="input2" name="forename" id="forename"> </div> <div class="wrap-input2 validate-input"> <input class="input2" name="surename" id="surename" `> </div> <div class="wrap-input2 validate-input"> <input class="input2" name="email" id="email" type="email" required> </div> <input class="spin" type="image" src="images/click.png" alt="Submit"> </form> 

The user can just send the email at that point. It's not exactly the best method. It does work though.

Anything else would require a Server API that you could POST the data to and the web server would then construct a SMTP message and send it.

Hope that helps.