HTML Assigning the checkbox to the form action already defined

Question

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

So When I click the Submit form, the form is submitted. However I would like to attach another action to this action, namely I would like to send this filled form to the email by checking the ckeckbox.

So far I saw, that sending the form by checkbox is possible:

submitting a form when a checkbox is checked

but the pivot thing here is assigning the other form action to my form...

HTML form with multiple "actions"

I tried something like this:

  <form id="c_form"  action="default_url_when_press_enter" method="get" onsubmit="return validate(this);" target="_blank" >

  ....

  <input type="checkbox" action="mailto:mk@gmail.com" id="cfemail" name="email">
  <input class="btn" action="c_form.html" type="submit" id="cfsubmit" value="Submit form">

but it didn't work unfortunately as well as with the code applied below:

   document.getElementById("cfsubmit").addEventListener("click", function(){
                                                                
    document.getElementById("c_form").className="submitted";
                                                            });

How can I send email along with the form submission when my box is checked?

The full code is available here:

https://jsfiddle.net/ptgbvfen/

Answer 1

So far if I understand your problem correctly, you want to submit the form normally. But if the checkbox is checked you want to perform a mailto function as well.

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:mk@gmail.com"; // Adds mailto link to <a>
    link.click(); // Clicks the <a> and open default mail app
    link.remove();
  }
  
  mainForm.submit(); // Submits the form
 });

Updated___

Removed the action attribute from form element, because you do not need it when you want the form to submit on the current page. Also changed the target attribute to _self so that it will not open new tab whenever you submit the form.

Updated V2_

Made mailto autofill the email content when checkbox checked and form is submitted, as requested. If you find it helpful then kindly upvote, and if you are facing more issue then comment down below. Thanks.

Demo: 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">&#42;</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">&#42;</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">&#42;</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">&#42;</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:mk@gmail.com?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
 });