javascript - 我将如何做到这一点？-6ren

javascript - 我将如何做到这一点？

转载作者：行者123 更新时间：2023-11-30 17:47:48

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

最佳答案

这里有一个简单粗暴的示例，说明如何使用 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>