3

The code

<body>
<script>
    function addInput() {
    var container = document.getElementById("container");
    var element = document.createElement("input");
    element.setAttribute("list", "browsers");
    container.appendChild(element);
    
    var container = document.getElementById("container");
    var element = document.createElement("input");
    element.setAttribute("list", "op");
    container.appendChild(element);
    }
</script>
  <!-- List -->
  <form action="mailto:test@gmail.com" method="post" enctype="text/plain">
<fieldset>
    <legend>Info:</legend>
    <label for="fname">first name:</label>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">last name:</label>
    <input type="text" id="lname" name="lname"><br>
    <label for="date">date:</label>
    <input type="date" id="date" name="date"><br>
      <input type="radio" id="hkp" name="send" value="HKP">
      <label for="hkp">HKP</label><br>
      <input type="radio" id="patienten" name="send" value="Pat">
      <label for="patienten">Pat</label><br>
      <div id="container">
      <label for="browser">Product:</label>
      <input list="browsers" name="Product" id="browser">
      <datalist id="browsers">
              <option value=" x">
              <option value=" y">
              <option value=" z">
              <option value=" a">
              <option value=" b">
      <option value=" c">
      </datalist> 
      <label for="op">OP:</label>
      <input list="op" name="op" id="op"><br>
    </div>
      <input type="button" value="+ Product" onclick="addInput()">
</fieldset>
<input type="submit" value="Senden">
<input type="reset" value="Reset">
</form>

Here's the problem, once I fill all the stuff and click on the button + Product it does add the lists of the "browsers" and the "op" but it isn't shown in the email once I click submit is there a way to fix than? I also need help with adding the text in front of the copied lists I only copy the lists but not the label at least I don't know how.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
yuno
  • 31
  • 1

1 Answers1

0

Submitting your form with a standard submit button will not work in this case. The submit button does not take into account the form fields that are created after page load.

You'll have to write a submit handler that serializes your data and create a mailto link on the fly:

function formSubmit(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    var mail = document.createElement("a");
    mail.href = "mailto:test@gmail.com";
    mail.body = // get elements from formData;
    mail.click();
}

const form = document.getElementById('form');
form.addEventListener('submit', formSubmit);

Don't forget to add id="form" to the form.

iamdlm
  • 1,885
  • 1
  • 11
  • 21
  • it tells me "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')" do you know why? :( / Im using Visual Studio Code is that relevant to know – yuno Sep 15 '21 at 11:33
  • Did you add `id="form"`? – iamdlm Sep 15 '21 at 11:36
  • i did changed the submit thingy "" that should be what you meant right? – yuno Sep 15 '21 at 11:43
  • No, I meant the form `
    `.
     – iamdlm Sep 15 '21 at 11:49
  • Oh, but it still says the same. :c – yuno Sep 15 '21 at 11:55
  • You have to put your script tag after the HTML because when the JavaScript inside the tag gets executed the HTML form was not rendered yet and that's why you get the error. – iamdlm Sep 16 '21 at 08:33
  • it does work now atleast it opens the email but it doesnt take in information from the form like the name and stuff. heres the code again if thats needed https://jsfiddle.net/yunoo/pms2e8u9/3/ – yuno Sep 16 '21 at 10:51
  • Well... I literally wrote in comments `mail.body = // get elements from formData;` that you need to extract the information from `formData`. Have a look at [this topic](https://stackoverflow.com/questions/2276463/how-can-i-get-form-data-with-javascript-jquery). – iamdlm Sep 16 '21 at 10:54
  • doesnt it just take the name of the input and the "value" what i just typed in the input? thats whar i need im confused q.q – yuno Sep 16 '21 at 11:31