我想: 使用Javascript来获取表单字段的值(表单中的文本输入),并将它们全部添加到一起,将它们拼出到另一个标签或div中,所有这一切都在我按下按钮时。
应该很容易吗?
编辑: 我尝试了几件事,但是,我没想过发布它们。以为有人会用一些逻辑提示回复,而不是浪费一些不太深刻的空间。
<SCRIPT>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>
<table>
<tr>
<td>
<div id="FSContact4" style="width:375px;">
<form action="/payment/#FSContact4" id="fscf_form4" method="post">
<input type="hidden" name="fscf_submitted" value="0">
<input type="hidden" name="fs_postonce_4" value="99193296484a8d52d2b9579199ca2f0c,1384214867">
<input type="hidden" name="si_contact_action" value="send">
<input type="hidden" name="form_id" value="4">
<div id="fscf_required4">
<span style="text-align:left;">*</span> <span style="text-align:left;">indicates required field</span>
</div>
<input type="hidden" name="mailto_id" value="1">
<div id="fscf_div_clear4_4" style="clear:both;">
<div id="fscf_div_field4_4" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_4" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_4">Company Name<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_4" name="company-name" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_5" style="clear:both;">
<div id="fscf_div_field4_5" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_5" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_5">Person Doing the Transaction<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_5" name="person-doing-the-transaction" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_6" style="clear:both;">
<div id="fscf_div_field4_6" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_6" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_6">email<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_6" name="email01" value="">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
<td><input type="text" id="fscf_field4_8 name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9 name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10 name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11 name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12 name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13 name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14 name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15 name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16 name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" value="Click to Calculate" onclick="add()"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>
<div id="fscf_submit_div4" style="text-align:left; padding-top:2px;">
<input type="submit" id="fscf_submit4" style="cursor:pointer; margin:0;" value="Submit">
</div>
</form>
</div>
</tr>
</td>
</table>
答案 0 :(得分:2)
是。这很容易。很好的观察!
编辑:既然你至少试图形成一个严肃的问题,这里有一个基本的例子,说明你可以做些什么来帮助你入门。一个完整的解决方案需要更多的工作,但这是为了让你玩得开心!
<form id="myForm">
<input type="text">
<input type="text">
<input type="text">
</form>
<button id="process">Process</button>
<div id="output"></div>
var button = document.getElementById('process');
var form = document.getElementById('myForm');
var outputDiv = document.getElementById('output');
button.addEventListener('click', function() {
var frag = document.createDocumentFragment();
var children = form.childNodes;
for (var key in children) {
var node = children[key];
if (node.nodeName === 'INPUT') {
var p = document.createElement('p');
p.textContent = node.value;
frag.appendChild(p);
}
}
outputDiv.textContent = '';
outputDiv.appendChild(frag);
});
答案 1 :(得分:0)
单击提交元素时,您没有调用add()
方法。你需要调用这个函数。
尝试
<input type="button" onclick="add();" value="Add">
答案 2 :(得分:0)
首先,您忘记关闭所有输入ID的引号。试试吧。 即。
<input type="text" id="fscf_field4_8 name="Amount 1">
需要:
<input type="text" id="fscf_field4_8" name="Amount 1">
您还需要在解析字符串的int值时添加parseInt()。下面我把新的代码片段 确认:只是尝试使用正确的引号和intParse(),它可以正常工作
整数解析的最终代码:
<SCRIPT>
function add()
{
var a = parseInt(document.getElementById("fscf_field4_8").value);
var b = parseInt(document.getElementById("fscf_field4_10").value);
var c = parseInt(document.getElementById("fscf_field4_12").value);
var d = parseInt(document.getElementById("fscf_field4_14").value);
var e = parseInt(document.getElementById("fscf_field4_16").value);
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>