I have the form with action targeted for the specified task. I want to have this form also sent by email. It can be the :mailto option or other.
Mailto on submit button https://stackoverflow.com/questions/12626940/mailto-on-submit-button
因此，当我单击“提交表单”时，表单就会被提交。但是，我想在此操作中附加另一个操作，即我想通过检查复选框将已填写的表格发送到电子邮件。
到目前为止，我看到可以通过复选框发送表单：
选中复选框时提交表单 https://stackoverflow.com/questions/10602470/submitting-a-form-when-a-checkbox-is-checked
但这里的关键是分配另一个form action以我的形式...
具有多个“操作”的 HTML 表单 https://stackoverflow.com/questions/16660734/html-form-with-multiple-actions
我尝试过这样的事情：
<form id="c_form" action="default_url_when_press_enter" method="get" onsubmit="return validate(this);" target="_blank" >
....
<input type="checkbox" action="mailto:[email protected] /cdn-cgi/l/email-protection" id="cfemail" name="email">
<input class="btn" action="c_form.html" type="submit" id="cfsubmit" value="Submit form">
但不幸的是，它并没有像下面应用的代码一样工作：
document.getElementById("cfsubmit").addEventListener("click", function(){
document.getElementById("c_form").className="submitted";
});
当我的复选框被选中时，如何在提交表单的同时发送电子邮件？
完整的代码可以在这里找到：
https://jsfiddle.net/ptgbvfen/ https://jsfiddle.net/ptgbvfen/
到目前为止，如果我正确理解您的问题，您希望正常提交表单。但是，如果选中该复选框，您想要执行mailto功能也一样。
HTML:
<form id="c_form" onsubmit="return validate(this);" target="_self" >
....
<input type="checkbox" id="openmail" name="email">
<input class="btn" type="button" id="cfsubmit" value="Submit form">
JavaScript
document.getElementById("cfsubmit").addEventListener("click", function() {
var check = document.getElementById("opemail"); // Get checkbox element
var mainForm = document.getElementById("c_form"); // Get form element
if (check.checked == true) { // If checked then fire
let link=document.createElement("a"); // Creates <a> element in DOM
link.href = "mailto:[email protected] /cdn-cgi/l/email-protection"; // Adds mailto link to <a>
link.click(); // Clicks the <a> and open default mail app
link.remove();
}
mainForm.submit(); // Submits the form
});
Updated___
删除了action属性来自form元素，因为当您希望表单在当前页面上提交时不需要它。还改变了target归因于_self这样每当您提交表单时它就不会打开新选项卡。
更新V2_
Made mailto自动填充电子邮件内容checkbox检查并form已按要求提交。如果您觉得它有帮助，请点赞，如果您遇到更多问题，请在下面发表评论。谢谢。
Demo: https://jsfiddle.net/rzos1bwt/ https://jsfiddle.net/rzos1bwt/
HTML
<form id="c_form" onsubmit="return false;">
<div id="Page1">
<h2 class="property">Property information</h2>
<fieldset>
<figure class="property_information">
<figure class="fig">
<label>
<div class="order">A</div>
<p>Proposed Cable Route<span class="asterisk">*</span></p>
</label>
<br>
<select name="proposed_cable_route" id="cf_proposed_cable_route">
<option value="" disabled selected>-Select your answer-</option>
<option value="External">External</option>
<option value="Internal">Internal</option>
<option value="Combination">PIA</option>
</select>
</figure>
<figure class="fig" id="cf_building_post_2000">
<label>
<div class="order">B</div>
<p>Is the building post 2000?
<span class="asterisk">*</span>
</p>
</label>
<br>
<input name="building_post_2000" type="radio" value="Yes" selected>Yes
<input name="building_post_2000" type="radio" value="No">No
<br>
</figure>
<figure class="fig" id="cfasbestos">
<label>
<div class="order">C</div>
<p>Do you have asbestos report?
<span class="asterisk">*</span>
</p>
</label>
<br>
<input name="asbestos_report" type="radio" value="Yes" selected>Yes
<input name="asbestos_report" type="radio" value="No">No
<br>
<h3 class="alert">Please contact your team leader for advice!</h3>
</figure>
</figure>
<figure class="fig">
<label>
<div class="order">9</div>
<p>Surveyor<span class="asterisk">*</span></p>
</label>
<br>
<input type="text" name="surveyor" placeholder="Surveyor's name">
<input type="email" name="surveyor_email" placeholder="Email">
<br>
</figure>
<div class="emailreceipt">
<input type="checkbox" id="opemail" name="email">
<label for="opemail">Send me an email receipt of my responses</label>
</div>
<input class="btn" type="submit" id="cfsubmit" value="Submit form">
</fieldset>
</div>
</form>
JavaScript
document.getElementById("cfsubmit").addEventListener("click", function() {
var check = document.getElementById("opemail"); // Get checkbox element
var formEl = document.forms.c_form; // Get the form
var formData = new FormData(formEl); // Creates form object
// Get all form data values
var cableRoute = formData.get('proposed_cable_route');
var buildingPost = formData.get('building_post_2000');
var asbestosReport = formData.get('asbestos_report');
var surveyorName = formData.get('surveyor');
var surveyorEmail = formData.get('surveyor_email');
// This will create the subject of form
var subject = "Submission from " + surveyorName;
// This will create body with filled data
var body = 'My name is ' + surveyorName + '\n' + 'My email is ' + surveyorEmail + '\n' + 'Proposed Cable Route: ' + cableRoute + '\n' + 'Is the building post 2000: ' + buildingPost + '\n' + 'Do you have asbestos report: ' + asbestosReport;
// Making the mailto link with urlencoding
var mailTo = "mailto:[email protected] /cdn-cgi/l/email-protection?subject="+encodeURI(subject)+"&body="+encodeURI(body);
if (check.checked == true) { // If checked then fire
let link=document.createElement("a"); // Creates <a> element in DOM
link.href = mailTo; // Adds mailto link to <a>
link.click(); // Clicks the <a> and open default mail app
link.remove();
}
//console.log("mailTo => ", mailTo)
mainForm.submit(); // Submits the form
});