title: Introducing Array[] field using JS innerHTML and
body: <p>Trying to build a dynamic web form using JS, please refer the sample code enclosed with this request. The registrant can choose the number of seat and different Seat price for each registration. I am looking at bringing the total value into 'pay_total' the Final Sum field - But, all entries of registration seat price 'pay_fee' are inserted into the form using JS in Array format (pay_fee[]) - so I am not sure on how to calculate the sum of all (pay_fee[]) - any help would be grateful.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function process_participant(){    
  
  function clear() {
            document.getElementById("participant_list").innerHTML = "";
   }
  
  var fieldSet = '&lt;h5 class="text-left" &gt; &lt;/h5&gt;&lt;div class="form-group "&gt;&lt;input id="fname" name="name[]" type="" class="form-control" required placeholder="Name"&gt;&lt;/div&gt;  &lt;div class="form-group "&gt;&lt;input id="email" name="email[]"  required type="email" class="sm form-control"   placeholder="Enter email"&gt;&lt;/div&gt; &lt;/div&gt;&lt;div class="form-group"&gt;&lt;div class="input-group"&gt;&lt;div class="input-group-addon"&gt;Seat Price&lt;/div&gt;&lt;select id="pay_fee" name="pay_fee[]"  onchange="total_processing()"  required class="form-control"&gt;&lt;option &gt;&lt;/option&gt;&lt;option value="5000"&gt;Bay 1 - $ 5000&lt;/option&gt;&lt;option value="3000"&gt;Bay 2 - $ 3000&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;';
  
  var NumberOfSeats = document.getElementById('seatNumbers').value;
     // alert(NumberOfSeats);
  
   
  
      if ( NumberOfSeats == 1 ) { 
       
      document.getElementById('participant_list').innerHTML = fieldSet + '&lt;hr/&gt;'; 
  
      }   
  
      if ( NumberOfSeats == 2 ) { 
  
      document.getElementById('participant_list').innerHTML = fieldSet + fieldSet +'&lt;hr/&gt;'; 
      } 
  
    if ( NumberOfSeats == 3 ) { 
  
      document.getElementById('participant_list').innerHTML = fieldSet + fieldSet + fieldSet +'&lt;hr/&gt;'; 
      
      } 
  
    if ( NumberOfSeats == 4 ) { 
  
       document.getElementById('participant_list').innerHTML = fieldSet + fieldSet + fieldSet + fieldSet +'&lt;hr/&gt;'; 
  
      } 
  
    if ( NumberOfSeats == 5 ) { 
  
        document.getElementById('participant_list').innerHTML = fieldSet + fieldSet + fieldSet + fieldSet + fieldSet +'&lt;hr/&gt;'; 
  
  
      } 
   
        
    }
   
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;head&gt;
  
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;title&gt;infinitheism Registrations &lt;/title&gt;
  
          &lt;!-- CSS --&gt;
          &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"&gt;
          &lt;link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/form-elements.css"&gt;
          &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
  
  
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div class="col-md-12"&gt;
  
  &lt;form class="form-inline" id="form1" name="Online" method='post' action="" class="form-horizontal" role="form"  &gt;
  
  &lt;div class="bg-primary form-group-sm col-md-12 text-left contianer"&gt;
  
  &lt;h5 class=""&gt;Register Here &lt;/h5&gt;
  &lt;div class="form-group form-group-sm"&gt;
  &lt;label for="no_of_participants"&gt;No. of Seat&lt;/label&gt;
  &lt;select id="seatNumbers" name="seatNumbers" onchange="process_participant()" class="form-control"&gt;
  &lt;option&gt;&lt;/option&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;!-- Particpant list --&gt;
  
  &lt;div id="participant_list" class="text-center contianer"&gt;
  
  
  
  &lt;/div&gt;
    
    &lt;div class="text-center col-md-12 form-group"&gt;
  &lt;div class="input-group col-md-2 "&gt;
  
  &lt;div class="input-group-addon"&gt;Total.&lt;/div&gt;
  &lt;input type="text" class="form-control" name="pay_total" id="pay_total" placeholder=" "&gt;
  &lt;div class="input-group-addon"&gt;.00&lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt;&lt;hr/&gt;&lt;/p&gt;
  &lt;input id="js_count" name="count" value="1" style="display:none"/&gt;   
  &lt;button type="submit" style="color:black;"  name="Online" class="btn btn"&gt;Complete Registration&lt;/button&gt;
  
  &lt;/div&gt;
    
    
    &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>