使用JS innerHTML和。引入Array []字段

时间：2017-06-05 12:42:31

标签： javascript arrays

尝试使用JS构建动态Web表单，请参阅随此请求附带的示例代码。注册人可以为每次注册选择座位数和不同座位价。我期待将总价值纳入＆＃39; pay_total＆＃39;最终总和字段 - 但是，注册席位价格的所有条目＆＃39; pay_fee＆＃39;使用数组格式的JS（pay_fee []）插入到表单中 - 所以我不确定如何计算所有（pay_fee []）的总和 - 任何帮助都会感激不尽。

＆＃13;
＆＃13; 
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/>'; 


    } 
 
      
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

如果条件parseInt选择了座位值，则使用while循环代替多个并应用while循环。并创建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>

相关问题
最新问题