如何从动态输入字段添加数字
How to add numbers from dynamic input fields?
我现在基本上正在处理一个表单。但是我的表单有"添加"answers"删除"按钮来容纳额外的字段。现在，其中一个字段是"总预算"字段。
我将把所有输入字段发送到另一个页面。但是，我希望能够将所有"总预算"字段的全部总额相加。（请记住，有一个总预算字段，但用户可以"添加"/"删除"，也可以有更多）。
当我将其传递到下一页时，我希望单独传递它们，并保持它们以便显示。在下一页会有一个额外的"最终总额"，我会显示出来。
此外，我正在使用foundation 5（不确定这是否重要）。
现在，我不知道该怎么做。有人能给我指正确的路吗？以下是我的标记：
JAVASCRIPT:
<script>
$(document).ready(function() {
$(".add").on('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").on('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
</script>
HTML:
<div align="center">
<a href="#" class="button add">Add Line</a>
<a href="#" class="button del">Delete Line</a>
<div style="width: 40%; margin:0 auto">
<label>Campaign Name</label>
<input type="text" placeholder="Campaign Name:" />
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-6 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
<label>Model:</label>
<select>
<option value="CPC">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
</select>
<label>Unit Rate:</label>
<input type="text" placeholder="Just type amount">
</div>
<div class="large-6 columns">
<label>URL Link:</label>
<input type="text" placeholder="URL Link" />
<label>Targeting Info:</label>
<input type="text" placeholder="Target Info">
<label>Total Budget:</label>
<input type="text" placeholder="Total Budget">
<label>Daily Budget:</label>
<input type="text" placeholder="Daily Budget">
</div>
</div>
<div style="width: 40%; margin:0 auto">
<label>Total Units:</label>
<input type="text" placeholder="Total Units">
</div>
<div class="row">
<div class="small-2 columns">
<label>Start Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
<div class="small-2 columns">
<label>End Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
</div>
</div>
</div>
<hr>
假设总预算中的值不是string，并且您不需要从货币前缀等中解析它…：
var totalBudget = 0;
$("input[placeholder='Total Budget']").each(function() {
totalBudget += $(this).val();
});
您可以在HTML 中隐藏一个"总计"输入字段
<input type="hidden" id="grand-total" name="grand-total"/>
当您转到下一页时，您可以将其值与其他输入值一起传递
在"总预算"input字段中添加一个class="total-budget"，以及一个计算总的javascript函数
function computeGrandTotal() {
var grandTotal = 0;
$(".total-budget").each(function () {
var total = $(this).val();
if ($.isNumeric(total)) {
grandTotal += parseFloat(total);
}
});
$('#grand-total').html(grandTotal);
}
进入下一页时触发computeGrandTotal()功能
<a onclick="computeGrandTotal()" href="#">Go to next page</a>
jsfiddle
相关文章：
- 使用单个文本框向多个字段添加严格搜索
- WooCommerce-根据自定义字段添加费用
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- j查询检查复选框是否被选中，然后向输入字段添加值
- 使用 javascript 将各种输入字段添加到一起
- 使用 jQuery 将字段添加到表中的 HTML 表单中
- 如何从动态输入字段添加数字
- Extjs 3.3动态地将字段添加到表单中，并设置它们的标签宽度
- JQuery:如何检查复选框是否被选中并向字段添加属性
- "未捕获的类型错误:未定义的不是函数“;当向输入字段添加值时
- Bootstrap typeahead为隐藏字段添加值
- 使用chrome扩展(HTML、CSS、JavaScript）向输入字段添加可点击的图标/按钮
- 正在向输入字段添加自定义验证
- 使用javascript向输入字段添加值
- 如何将自定义字段添加到Json结果-ASP.NET MVC
- 向选定的弹出字段添加逗号
- Accounts.onCreateUser 未将字段添加到 Meteor 的用户集合中
- 如何将自定义字段添加到 dhtmlxScheduler
- 根据 JavaScript 中的选中复选框将字段添加到页面
- 如何从开始日期中的单独字段添加天数/周，以在日期选择器中获取结束日期
