我将如何做到这一点？答案

【问题标题】：How would I accomplish this?我将如何做到这一点？
【发布时间】：2013-11-04 05:14:52
【问题描述】：

我目前在一个网站上工作，虽然我对 CSS 和 HTML 非常流利，但对 Javascript 和 PhP 还是很陌生。我正在尝试创建一个表单，用户可以在其中输入信息，并且当某些值发生更改时，总 $ 将发生变化。例如，如果他们选择 3 而不是 1，则总数将乘以 3。然后当他们按下提交时，它会将他们链接到一个贝宝，并且那里也有总额，以便他们可以支付。我喜欢解决这个问题的挑战，但只是想知道最好的方法。我是否应该在我的 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 部分。从专业人士的角度来看，实现这一目标的最佳方法是什么？

【问题讨论】：

整个表格是静态的。没有理由让它成为一堆 JS。把它写成普通的 HTML，就在你想要的地方，但使用 CSS 隐藏它。 display:none 将隐藏它直到你需要它。当您希望它可见时，使用 JS 将 CSS 更改为 display:block。你甚至需要 iFrame 吗？

标签： javascript html forms

【解决方案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>

【讨论】：

您好，感谢您的回复。我喜欢你的方法很简单。但是，我在 javascript 方面是一个完整的新手，在 jquery 方面更是如此。我看到它在 JSFIDDLE 中是如何工作的，但是当我将它放入我的页面时它不起作用。有什么想法吗？
您必须在页面的标题中包含 JQuery 库。

【解决方案2】：

不推荐您当前的方法，因为应尽可能避免使用 iframe，并且您不应使用 Javascript 以这种方式存储和插入 HTML。

以 HTML 格式呈现您的表单并使用 .show() 和 .hide() 显示/隐藏表单。

其次，编写一些 javascript 来监视 .change 事件并为您进行计算。

例如（这是 jQuery，不是纯 javascript）：

$(#number_field).on('change', function(){
  # calculate...
})

【讨论】：

这是 jquery 不是纯 javascript，你应该提到它

【解决方案3】：

首先，你必须使用

var data = ["long string",
 "another long string",
 "another long string"].join("");

比data += "long striiiiiiing"快

第二...您可以使用onchange 获取列表项的值。一旦有序列表的值发生变化，就会触发一个事件。

第三，使用属性时，正确的语法是attribute="value" 而不是attribute=value 就像在这段代码中

input id=email name=email type=email

应该是

input id='email' name='email' type='email '

【讨论】：

【解决方案4】：

永远不要添加这样的 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>

【讨论】：