Introducing Array[] field using JS innerHTML and

尝试使用JS构建动态的Web表单，请参阅此请求中包含的示例代码。注册人可以为每个注册选择座位数和不同的座位价格。我正在考虑将总价值带入" pay_total"最终总和字段 - 但是，使用阵列格式(pay_fee [](将所有注册座位价格'pay_fee'的条目插入表格中 - 所以我不确定如何计算所有(pay_fee [](的总和 - 任何帮助都将是感谢的。

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>

while loop tive loter多个条件如果条件parseInt选定的座椅值并应用Wile loop.sher创建total_processing函数，则像这样

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

然后使用现有的pay_total值添加总值，并在dropdown更改上新选择的值。parseFloat很重要，他们将字符串转换为号码

更新
变更事件的总金额刷新

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>

相关内容

最新更新

热门标签：