Introducing Array[] field using JS innerHTML and

Question

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.

function process_participant(){    

function clear() {
          document.getElementById("participant_list").innerHTML = "";
 }

var fieldSet = '<h5 class="text-left" > </h5><div class="form-group "><input id="fname" name="name[]" type="" class="form-control" required placeholder="Name"></div>  <div class="form-group "><input id="email" name="email[]"  required type="email" class="sm form-control"   placeholder="Enter email"></div> </div><div class="form-group"><div class="input-group"><div class="input-group-addon">Seat Price</div><select id="pay_fee" name="pay_fee[]"  onchange="total_processing()"  required class="form-control"><option ></option><option value="5000">Bay 1 - $ 5000</option><option value="3000">Bay 2 - $ 3000</option></select></div></div>';

var NumberOfSeats = document.getElementById('seatNumbers').value;
   // alert(NumberOfSeats);

 

    if ( NumberOfSeats == 1 ) { 
     
    document.getElementById('participant_list').innerHTML = fieldSet + '<hr/>'; 

    }   

    if ( NumberOfSeats == 2 ) { 

    document.getElementById('participant_list').innerHTML = fieldSet + fieldSet +'<hr/>'; 
    } 

  if ( NumberOfSeats == 3 ) { 

    document.getElementById('participant_list').innerHTML = fieldSet + fieldSet + fieldSet +'<hr/>'; 
    
    } 

  if ( NumberOfSeats == 4 ) { 

     document.getElementById('participant_list').innerHTML = fieldSet + fieldSet + fieldSet + fieldSet +'<hr/>'; 

    } 

  if ( NumberOfSeats == 5 ) { 

      document.getElementById('participant_list').innerHTML = fieldSet + fieldSet + fieldSet + fieldSet + fieldSet +'<hr/>'; 


    } 
 
      
  }

<html>
 <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>infinitheism Registrations </title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/css/form-elements.css">
        <link rel="stylesheet" href="assets/css/style.css">


  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.js"></script>
  </head>
  <body>

<div class="col-md-12">

<form class="form-inline" id="form1" name="Online" method='post' action="" class="form-horizontal" role="form"  >

<div class="bg-primary form-group-sm col-md-12 text-left contianer">

<h5 class="">Register Here </h5>
<div class="form-group form-group-sm">
<label for="no_of_participants">No. of Seat</label>
<select id="seatNumbers" name="seatNumbers" onchange="process_participant()" class="form-control">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>

<!-- Particpant list -->

<div id="participant_list" class="text-center contianer">



</div>
  
  <div class="text-center col-md-12 form-group">
<div class="input-group col-md-2 ">

<div class="input-group-addon">Total.</div>
<input type="text" class="form-control" name="pay_total" id="pay_total" placeholder=" ">
<div class="input-group-addon">.00</div>
</div>
<p><hr/></p>
<input id="js_count" name="count" value="1" style="display:none"/>   
<button type="submit" style="color:black;"  name="Online" class="btn btn">Complete Registration</button>

</div>
  
  
  </form>

At first: fieldset.repeat(NumberofSeats); instead of your if/else hell — Jonas Wilms
– Jonas Wilms, Commented Jun 5, 2017 at 12:43
Thank you, but not working - tried the following. document.getElementById('participant_list').innerHTML = fieldSet.repeat(NumberofSeats); — Bala Krishnan D
– Bala Krishnan D, Commented Jun 5, 2017 at 12:51
Following code works to avoid if/else - code document.getElementById('participant_list').innerHTML = (fieldSet.repeat(NumberOfSeats)) + '<hr/>'; code — Bala Krishnan D
– Bala Krishnan D, Commented Jun 5, 2017 at 13:07

prasanth · Accepted Answer · 2017-06-05 13:24:04Z

Do with while loop instead multiple if condition parseInt the selected seat value and apply the while loop.And create the total_processing function like this

function total_processing(that) {
    document.getElementById("pay_total").value = parseFloat(document.getElementById("pay_total").value|0)+parseFloat(that.value)
    }

Then add the total value using existing pay_total value with newly selected value on dropdown change .parseFloat is important They are convert the string to number

Updated
total amount refresh on change event

function process_participant() {
 document.getElementById("participant_list").innerHTML = "";
 document.getElementById("pay_total").value =""
  var fieldSet = '<h5 class="text-left" > </h5><div class="form-group "><input id="fname" name="name[]" type="" class="form-control" required placeholder="Name"></div>  <div class="form-group "><input id="email" name="email[]"  required type="email" class="sm form-control"   placeholder="Enter email"></div> </div><div class="form-group"><div class="input-group"><div class="input-group-addon">Seat Price</div><select id="pay_fee" name="pay_fee[]"  onchange="total_processing()"  required class="form-control amount"><option ></option><option value="5000">Bay 1 - $ 5000</option><option value="3000">Bay 2 - $ 3000</option></select></div></div>';

  var NumberOfSeats = document.getElementById('seatNumbers').value;
  // alert(NumberOfSeats);
  var i = 0;
  while (i < parseInt(NumberOfSeats)) {
    document.getElementById('participant_list').innerHTML += fieldSet
    '<hr/>';
    i++;
  }
}

function clear() {
  document.getElementById("participant_list").innerHTML = "";
}
function total_processing() {
var total=0;
document.querySelectorAll('.amount').forEach(function(a,b){
     total += parseFloat(a.value|0) 
})
document.getElementById("pay_total").value =total
}

<html>

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>infinitheism Registrations </title>

  <!-- CSS -->
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/form-elements.css">
  <link rel="stylesheet" href="assets/css/style.css">


  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.js"></script>
</head>

<body>

  <div class="col-md-12">

    <form class="form-inline" id="form1" name="Online" method='post' action="" class="form-horizontal" role="form" >

      <div class="bg-primary form-group-sm col-md-12 text-left contianer">

        <h5 class="">Register Here </h5>
        <div class="form-group form-group-sm">
          <label for="no_of_participants">No. of Seat</label>
          <select id="seatNumbers" name="seatNumbers" onchange="process_participant()" class="form-control">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
        </div>

        <!-- Particpant list -->

        <div id="participant_list" class="text-center contianer">



        </div>

        <div class="text-center col-md-12 form-group">
          <div class="input-group col-md-2 ">

            <div class="input-group-addon">Total.</div>
            <input type="text" class="form-control" name="pay_total" id="pay_total" placeholder=" ">
            <div class="input-group-addon">.00</div>
          </div>
          <p>
            <hr/>
          </p>
          <input id="js_count" name="count" value="1" style="display:none" />
          <button type="submit" style="color:black;" name="Online" class="btn btn">Complete Registration</button>

        </div>


    </form>

Thanks, Prasad, but it seems there is an issue -when changing the value of price seat the total is not getting refreshed/recalculated instead in accumulating all the values in the total field.

Collectives™ on Stack Overflow

Introducing Array[] field using JS innerHTML and

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related