我目前正在开发一个网站，虽然我对CSS和HTML非常流利，但我仍然是Javascript和PhP的新手。我正在尝试创建一个表单，用户可以输入信息，当某些值更改时，总$将更改。例如，如果他们选择3而不是1，则总数将乘以3。然后，当他们按下提交时，它会将它们链接到PayPal，并且还有总数，以便他们可以付款。我喜欢弄清楚这一点的挑战，但只想知道最好的方法。我应该在我的html中创建一个内联框架，然后ONLOAD调用一个将表单放在页面上的javascript函数，然后通过一些更多的javascript函数使它在不同的值放入时总数会发生变化吗？我对所有想法持开放态度。现在我有了这个，我觉得有一种更简单的方法：
HTML
<BODY onLoad="javascript:showform()">
<IFRAME class="iframe" src="about:blank" id="formarea" name="formarea">
</IFRAME>
的javascript
function showform() {
var data = ""
data +="<div style ='position: relative; margin-right: 50%; padding-left:120px; padding-right:60px;'>"
data +="<form method='post' name='contact_form' action='contact-form-handler.php'>"
data +="<fieldset>"
data +="<legend>Your Details</legend>"
data +="<ol>"
data +="<li>"
data +="<label for=name>Name</label>"
data +="<input id=name name=name type=text placeholder='First and last name' required>"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=email>Email</label>"
data +="<input id=email name=email type=email placeholder='example@domain.com' required>"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=phone>Phone Number</label>"
data +="<input id=phone name=phone type=tel placeholder='555-555-5555' required>"
data +="</li>"
data +="<br>"
data +="</ol>"
data +="</fieldset>"
data +="<fieldset>"
data +="<legend>Logo Details</legend>"
data +="<ol>"
data +="<li>"
data +="<label for=logo>Logo #</label>"
data +="<select name=frontdesign>"
data +="<option value='1'>1</option>"
data +="<option value='2'>2</option>"
data +="<option value='3'>3</option>"
data +="<option value='4'>4</option>"
data +="<option value='5'>5</option>"
data +="<option value='6'>6</option>"
data +="</select>"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=nameofT>Name of Tournament</label>"
data +="<input id=nameofT name=nameofT type=text placeholder='Los Angeles Tournament 2013' required>"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=colors>Color(s)</label>"
data +="<input id=colors name=colors type=text placeholder='Kelly Green, Navy Blue' required>"
data +="</li>"
data +="<br>"
data +="</ol>"
data +="</fieldset>"
data +="<fieldset>"
data +="<legend>Shirt Details</legend>"
data +="<ol>"
data +="<li>"
data +="<label for=small>Small</label>"
data +="<textarea id=small name=small rows=1 type=text placeholder='#' required></textarea>"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=medium>Medium</label>"
data +="<textarea id=medium name=medium rows=1 type=text placeholder='#' required></textarea>"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=large>Large</label>"
data +="<textarea id=large name=large rows=1 type=text placeholder='#' required></textarea>"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=xlarge>X-Large</label>"
data +="<textarea id=xlarge name=xlarge rows=1 type=text placeholder='#' required></textarea>"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=xxlarge>XX-Large(If more then 3, add $1.50 per shirt)</label>"
data +="<textarea id=xxlarge name=xxlarge rows=1 type=text placeholder='#' required></textarea>"
data +="</li>"
data +="<br>"
data +="</ol>"
data +="</fieldset>"
data +="<fieldset>"
data +="<legend>Add Ons</legend>"
data +="<ol>"
data +="<li>"
data +="<label for=colorofshirt>Color of Shirt (If not White)</label>"
data +="<input id=colorofshirt name=colorofshirt type=text placeholder='Kelly Green, Navy Blue' required >"
data +="</li>"
data +="<br>"
data +="<li>"
data +="<label for=printonback>Print on Back</label>"
data +="<input id=printonback name=printonback type=text placeholder='2013 Champions' required>"
data +="</li>"
data +="<br>"
data +="</ol>"
data +="</fieldset>"
data +="<fieldset>"
data +="<input type='submit' value='Submit'>"
data +="</fieldset>"
data +="</form>"
data +="</div>"
formarea.document.writeln(data)
}// JavaScript Document
我甚至没有开始计算$ total部分。从专业人士的角度来看，实现这一目标的最佳方式是什么？
答案 0 :(得分：1)
不推荐您当前的方法，因为应尽可能避免使用iframe，并且不应使用Javascript以这种方式存储和插入HTML。
以HTML格式呈现表单，并使用.show()和.hide()来显示/隐藏表单。
其次，编写一些监视.change事件的javascript并为您进行计算。
例如（这是jQuery，而不是纯粹的javascript）：
$(#number_field).on('change', function(){
# calculate...
})
答案 1 :(得分：1)
以下是使用JQuery如何执行此操作的快速而肮脏的示例，也可以在JSFiddle上进行测试
<script>
$('#quantity').change(function(){
calcTotal();
});
$('#price').change(function(){
calcTotal();
});
function calcTotal(){
var q = $('#quantity').val();
var p = $('#price').val();
$('#total').val(q * p);
}
</script>
<div>
<label for="price">Price</label>
<input type="text" id="price" />
</div>
<div>
<label for="quantity">Quantity</label>
<input type="text" id="quantity" />
</div>
<div>
<label for="total">Total</label>
<input type="text" id="total" />
</div>
答案 2 :(得分：0)
首先，你必须使用
var data = ["long string",
"another long string",
"another long string"].join("");
比data += "long striiiiiiing"
第二个......您可以使用onchange获取列表项的值。一旦有序列表的值发生变化，它将触发一个事件。
第三，使用属性时，正确的语法是attribute =＆＃34; value＆＃34;不是attribute = value 就像在这段代码中一样
input id=email name=email type=email
一定是
input id='email' name='email' type='email '
答案 3 :(得分：0)
永远不要添加像这样的HTML标签（如整个部分）。使用它可以动态添加标签，但只需要很小的部分。
使用onchange或oninput或onfocus或onsubmit来处理表单元素是最佳方法。
例如，
<input type="text" name="txt" value="Hello" onchange="checkField(this.value)">
<scrript>
function checkField(val)
{
alert("The input value changed to: " + val);
}
</script>