我該如何做到這一點？

我目前正在一個網站上工作，雖然我非常流利地使用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='[email protected]' 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

我還沒有開始摸清$總部分。從專業人士的角度來看，完成這一任務的最佳方式是什麼？

來源

2013-11-04 DolbyOver

即整體形式是靜態的。沒有理由讓它成爲一堆JS。把它寫成普通的HTML，正好在你想要的地方，但是用CSS隱藏它。 'display：none'會隱藏它直到你需要它。當你希望它可見時，使用JS將CSS更改爲'display：block'。你甚至需要iFrame嗎？ – 2013-11-04 05:20:17

這裏是一個快速和如何使用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-04 05:30:52

你好，謝謝你的回覆。我喜歡你的方法很簡單。然而，我是一個完整的新手在JavaScript，甚至在jQuery更是如此。我看到這是如何在JSFIDDLE中工作的，但是當我將它放入我的頁面時，它不起作用。任何想法？ – DolbyOver

您必須將JQuery庫包含在頁面的標題中。 –

您不推薦使用當前的方法，因爲應該儘可能避免使用iframe，並且不應該使用Javascript以這種方式存儲和插入HTML。

以HTML格式呈現您的表單，並使用.show()和.hide()來顯示/隱藏表單。

其次，寫一些JavaScript，觀看.change事件，併爲你做計算。

例如（這是jQuery的，不是純JavaScript）：

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

來源

2013-11-04 05:21:40 sscirrus

這是jquery不是純javascript，你應該已經提到過了@Zaffy更新了 – Zaffy

，謝謝。 – sscirrus

首先，你必須使用

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

其速度比data += "long striiiiiiing"

其次...你可以得到對於列表項，使用onchange的值。一旦有序列表的值發生變化，它將觸發一個事件。

第三，使用屬性時，正確的語法是屬性=「值」不會在這個代碼

input id=email name=email type=email

屬性=值像它必須是

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

來源

2013-11-04 05:23:05 Hellgorithm

切勿添加像這樣的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>

來源

2013-11-04 05:31:13 Bala

我該如何做到這一點？

回答

相關問題