私は数行の Javascript を作成 (およびコピー) しましたが、それは私の目的を十分に果たしています。しかし、これを行うためのより良い方法 (クロスブラウザーとパフォーマンスの向上) を見つけようとしています。関数を友人からコピーしましたisIntegerが、次の条件で文字列値をチェックする理由がわかりません。
if (((c < "0") || (c > "9"))) return false;
上記の条件は正常に機能しますが、数値に対してチェックするように変更すると、機能が壊れます。入力フィールドは、アルファベット文字の受け入れを開始します。変更するとこんな感じ。
if ((( c < 0 ) || ( c > 9 ) return false;
何が起こっているのかを理解できるように、セクションをコメントアウトしようとしました。また、このコードにセキュリティ ホールはありますか? 1innerHTML1 メソッドはいくつかのセキュリティ ホールを開く可能性があるため、それを使用して「クリーン」操作を実行する必要があると読みました。したがって、jQuery の.htmlメソッドを使用することにしました (JavaScript は初めてです)。
問題のページ: http://thehotdeal.net/clients/wehtmlit/index.php?order/
$(document).ready(function() {
var total = 0;
function calcTotal() {
/* fetching some values from PHP variables and then performing calculations.
essentially this is multiplying number of pages by price per page
*/
/* <![CDATA[ */
var total_price_main_pages = ($("#pages").attr("value")) * (<?php echo $main_price; ?>),
total_price_sub_pages = ($("#subpages").attr("value")) * (<?php echo $sub_price; ?>);
/* ]] > */
$("input.calculate:checked").each(function() {
// This happens for each checked input field
// These are few additional otions available to the user. If selected then
// the price stored in their "data" attribute is added to the total
var value = $(this).attr("data");
total += parseInt(value);
});
total += (parseInt(total_price_main_pages)) + (parseInt(total_price_sub_pages));
$("#total").html("Total: <strong>" + total + "</strong>");
}
// This happens when the page loads
calcTotal();
$("input.calculate").click(function() {
total = 0;
calcTotal();
});
// function to check if an input is positive number(s). returns true if [ 0 <= s <= 9 ]
function isInteger(s) {
var i;
for (i = 0; i < s.length; i++) {
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
return true;
}
// Checking the mainpage input (default value 1)
// (valid value is greater than or equal to 1 and less than 10)
$("#pages").keyup(function() {
var page = $(this).val();
// if user deletes the value in this input (blank)
// then just display a warning message and do nothing
if(page == ""){
this.value = "";
$("#pageError").html("Please enter a value equal or greater than 1.");
return false;
}
// if value is less than or equal to zero then
// then set 1 as the new value, remove the error message and call the calcTotal function
else if(page <= 0){
this.value =1;
$("#pageError").empty();
total = 0;
calcTotal();
}
// check if value is not a positive integer by calling the isInteger function
// if not a positive integer then set 1 as the new value,
//remove the error message and call the calcTotal function
else if(!isInteger(page)){
this.value =1;
$("#pageError").empty();
total = 0;
calcTotal();
}
// if value does not fall in any of the if statements i.e. value is acceptable
// remove the error message and call the calcTotal function
$("#pageError").empty();
total = 0;
calcTotal();
});
// check if value is not empty when user exits the input
// if empty then set value as 1, remove error message and call calcTotal function
$("#pages").blur(function() {
var page = $(this).val();
if(page == ""){
this.value = 1;
$("#pageError").empty();
total = 0;
calcTotal();
}
});
// Checking the subpage input (default value 0)
// (valid value is greater than or equal to 0 but less than 10)
$("#subpages").keyup(function() {
var page = $(this).val();
if(page == ""){
this.value = "";
return false;
} else if(!isInteger(page)){
this.value = 0;
total = 0;
calcTotal();
}
total = 0;
calcTotal();
});
$("#subpages").blur(function() {
var page = $(this).val();
if(page == ""){
this.value = 0;
total = 0;
calcTotal();
}
});
});