1

我目前在一个网站上工作，虽然我对 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 部分。从专业人士的角度来看，实现这一目标的最佳方法是什么？

4

4 回答 4

1

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

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

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

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

$(#number_field).on('change', function(){
  # calculate...
})
于 2013-11-04T05:21:40.050 回答
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>
于 2013-11-04T05:30:52.000 回答
0

首先，你必须使用

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 '
于 2013-11-04T05:23:05.793 回答
0

永远不要添加这样的 HTML 标签（就像在整个部分中一样）。使用它来动态添加标签，但只是一小部分。

使用onchangeoroninput或onfocusoronsubmit来处理表单元素是最好的方法。

例如，

 <input type="text" name="txt" value="Hello" onchange="checkField(this.value)">
 <scrript>
 function checkField(val)
 {
   alert("The input value changed to: " + val);
  }
 </script>
于 2013-11-04T05:31:13.530 回答