title: How to get the submitted <select> option in a html page where multiple forms (and select fields) are created dynamically
body: <p>I'm having troubles in getting the submitted option in a html page where I create dynamically a number of forms, the corresponding <code>&lt;select&gt;</code> and the <code>&lt;option&gt;</code> values within it.</p>
  <p>This is <strong>my html</strong></p>
  <pre><code>&lt;div class=&quot;inputs_container&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>my js</strong>:</p>
  <pre><code> var data = {
          &quot;name&quot;: &quot;forest&quot;,
          &quot;inputs&quot;: [
              {
                  &quot;name&quot;: &quot;input_1&quot;, &quot;formats&quot;: [&quot;JPG&quot;]
              },
              {
                  &quot;name&quot;: &quot;input_2&quot;, &quot;formats&quot;: [&quot;TXT&quot;,&quot;ODT&quot;]
              }
          ]
  }
  var data_files = {
      &quot;resources&quot;: [
          {&quot;name&quot;: &quot;file_1.jpg&quot;, &quot;format&quot;: &quot;JPG&quot;},
          {&quot;name&quot;: &quot;file_2.jpg&quot;, &quot;format&quot;: &quot;JPG&quot;},
          {&quot;name&quot;: &quot;text_1.txt&quot;, &quot;format&quot;: &quot;TXT&quot;},
          {&quot;name&quot;: &quot;text_2.txt&quot;, &quot;format&quot;: &quot;TXT&quot;},
          {&quot;name&quot;: &quot;odt_1.odt&quot;, &quot;format&quot;: &quot;ODT&quot;},
          {&quot;name&quot;: &quot;odt_2.odt&quot;, &quot;format&quot;: &quot;ODT&quot;}
      ]
  }
  
  document.addEventListener('DOMContentLoaded', function() {
      $.each(data.inputs, function(i, input) {
          let format_in = input.formats;
          var form_id = input.name;
          var select_id = form_id + &quot;_id&quot;;
          var select_name = form_id + &quot;_name&quot;;
          
          let $h5 = $(`&lt;h5&gt;Select ${input.formats} file&lt;/h5&gt;`).appendTo('.inputs_container');
          $('&lt;form&gt;', {
              &quot;id&quot;: form_id,
              &quot;html&quot;: '&lt;div class=&quot;input_field s12 l6&quot;&gt; &lt;select id=&quot;' + select_id + '&quot; name= &quot;' + select_name +'&quot;&gt;  &lt;/select&gt; &lt;/div&gt; &lt;div class=&quot;col s12 l6&quot;&gt;&lt;button class=&quot;btn blue&quot; type=&quot;submit&quot;&gt; submit&lt;/button&gt; &lt;/div&gt;'
      }).appendTo(`.inputs_container`);
  
          var select = document.getElementById(select_id);
          var file_list_URI =  serverURI + &quot;/resources?formats=&quot; + format_in + &quot;&quot;;
          $.getJSON(file_list_URI, function(file){
              $.each(file.resources, function(j, fieldopt){
                  select.add(new Option(fieldopt.name, fieldopt.name));
              }); // each
              M.FormSelect.init(document.querySelectorAll('select'));
              var input_form = document.getElementById(form_id);
              input_form.onsubmit = function(e) {
                  e.preventDefault();
                  var input_file = input_form.select_name.value;
                  console.log(&quot; FORM SUBMIT &quot; + input_file);
              }
           });
      });
  });
  </code></pre>
  <p>The code renders two select fields (with the correct options), one for <code>JPG</code> and one for <code>TXT, ODT</code> file formats. But when I click any of the two submit buttons I get</p>
  <pre><code>Uncaught TypeError: input_form.select_name is undefined
  </code></pre>
  <p>Could anyone help me in fixing this error?</p>
  <p>Thank you in advance</p>