尋找沒有提交按鈕而無需重新加載的計算腳本

我在網上商店看到過幾種表單，您只需更改所需物品數量即可立即更改價格。沒有重新加載，也沒有提交（或計算）按鈕。尋找沒有提交按鈕而無需重新加載的計算腳本

我正在尋找類似的東西，但很簡單。

Amount of pages: [textfield] 
price: [answer]

就是這樣。該代碼必須從[文本字段]的輸入，並與一定數量（我可以在代碼中更改）相乘。該計算的結果應在[答案]中提出。

我一直在谷歌瀏覽，但我只能找到非常困難和大的形式，使用提交按鈕。而我的php/ajax/javascript不足以自己寫te代碼。我知道在Stackoverflow上有幾個提交表單，但我不明白我如何編輯它們來完成我想要的操作。

你不必看起來很花哨，我已經制作了一個很好的表單來放入代碼。很明顯，它必須適用於所有主流瀏覽器。

編輯：我試過由Khòi提供的代碼。

我試着玩這樣的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script src="jquery-1.8.2.min.js" type="text/javascript" defer="defer"> 
$('#pages').change(function(ev){ 
var total = $('#pages').val() * 0.2; 
$('#total').html((total).toFixed(2)); 
});? 
</script> 
</head> 
<body> 

Pages: <input type="text" name="pages" id="pages" /> 
<br/><br/> 
Total: <span id="total">0.00</span> 

</body> 
</html>

但是，這並不工作嗎？我沒有下載Jquery文件，並將其放入與此頁面相同的文件夾中。

來源

2012-10-09 Vinnie Van Rooij

那麼，你還沒有嘗試過任何東西？ –

是的，我做了，但無法弄清楚。已經嘗試了幾種不做我想要的形式，所以我試圖讓他們做我想做的事情......但沒有奏效。我發現了其他一些工作，但不是在每個瀏覽器上。目前我已經有了一個PHP腳本，它可以工作......但它具有提交按鈕並重新加載以顯示結果。我不熟悉PHP/ajax/javascript等等。所以我很難找到我可以編輯的東西，所以它很有用。 –

我建議你學習一些基本的JQuery。像這樣的事情可以用JQuery非常有效地完成，並且學習曲線不是太陡峭。

我給你做一個小提琴，讓你開始：

http://jsfiddle.net/jRs3n/

這裏是一個工作的HTML頁面的完整代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 

<title>test</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#pages').keyup(function(ev){ 
     var total = $('#pages').val() * 0.2; 
     $('#total').html((total).toFixed(2)); 
    }); 
}); 
</script> 
</head> 
<body> 

Pages: <input type="text" name="pages" id="pages" /> 
<br/><br/> 
Total: <span id="total">0.00</span> 

</body> 
</html>

來源

2012-10-09 12:47:39

哇！謝謝！這已經看起來很棒了。我會接受你的建議。似乎值得。我真的不想聽起來忘恩負義。但有沒有簡單的方法來重新計算，而不必點擊除文本框外的其他地方？因此，當你輸入時，它已經可以計算，而不是當你完成時（我希望你明白我的意思，我不擅長解釋自己）。 –

我不得不編輯我的beginpost，我無法將我的代碼發佈到這個評論框中...... –

我已經爲單個html頁面添加了完整的工作代碼。 –

如果您正在尋找不留計算您需要將活動從change更改爲keyup，您可以在特定字段的每次按鍵後更新活動。

來源

2012-10-09 21:18:53 kwelch

Dude ....這是一個很棒的把戲：D。現在只需弄清楚如何放入頁面。我不知道如何給你任何答案。但我會「提高」它。（我在這裏有點新...） –

同樣在'keyup'上做些事情，並且改變你可能想要確保你正在驗證數據，否則你可能會在答案字段中得到一個NaN。 – kwelch

爲了舉例增加了keyup - http://jsfiddle.net/jRs3n/6/ –

尋找沒有提交按鈕而無需重新加載的計算腳本

回答

相關問題