个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 21:05:23 27 4
gpt4 key购买 nike

尝试使用 JS 构建动态 Web 表单，请参阅此请求随附的示例代码。注册人可以为每次注册选择座位数量和不同的座位价格。我正在考虑将总值(value)带入“pay_total”的最终总和字段 - 但是，注册席位价格“pay_fee”的所有条目都使用数组格式(pay_fee [])的 JS 插入到表单中 - 所以我不确定如何计算所有 (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 循环代替多个 if 条件 parseInt 选定的座位值并应用 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 change 上新选择的值相加。 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>

关于javascript - 使用 JS innerHTML 引入 Array[] 字段和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44369199/

27 4 0
文章推荐： javascript - :eq() selector returns undefined
文章推荐： php - 如何使用 PHP 验证表中的所有行
文章推荐： java - 制作多图安卓游戏，如何避免多图报java.lang.OutOfMemory错误
文章推荐： javascript - 我怎样才能在我的页面中获得所有出行模式(如驾驶、公交、骑自行车、步行)的距离和持续时间，并将其存储在数据库中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com