小弟剛接觸ajax不久 只懂出淺概念想請教各位
我如果有三個input欄位id分別是 tn1 tn2 tn3 ,在鍵入的時候要計算這三個欄位的值相乘得出總數顯示在id=result中 以下是我的程式碼,但如果我今天要要計算的欄位數量如果不固定(因PHP跑出的數量不一定)如何把鍵入的值都丟到同一個PHP頁面運算後再回傳到正確的result欄位呢?
EX:
第一列:tn1tn2tn3=result1
第二列atn1atn2atn3=result2
第三列btn1btn2btn3=result3
第N列.....
......
但不可能每次多跑一列欄位就多寫一個PHP頁面去接收運算回傳值吧?
以下是原本的程式碼
html input:
<input name="itprice" type="text" id="tn1" value="">
<input name="itnum" type="text" class="normalinput" id="tn2" value="">
<input name="percent" type="text" id="tn3" value="">
<p id="result"></p>
jquery ajax:
$(document).ready(function() {
var result =false ; //預設值
$('input').keyup(function() { //input被鍵入時
$.ajax({
type: "POST", //傳送方式
url: "service.php", //傳送目的地
dataType: "json", //資料格式
data: { //傳送資料
tn1: $("#tn1").val(), //表單欄位 ID tn1
tn2: $("#tn2").val(), //表單欄位 ID tn2
tn3: $("#tn3").val() //表單欄位 ID tn3
},
success: function(data) {
if (data.total) { //如果後端回傳 json 資料有 tn1
//$("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)=清空欄位
$("#result").html(data.total);
} else { //否則讀取後端回傳 json 資料 errorMsg 顯示錯誤訊息
<!--$("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)-->
<!--$("#result").html('<font color="#ff0000">' + data.errorMsg + '</font>');-->
}
},
error: function(jqXHR) {
$("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)
$("#result").html('<font color="#ff0000">發生錯誤:' + jqXHR.status + '</font>');
}
})
})
});
php:
header('Content-Type: application/json; charset=UTF-8'); //設定資料類型為 json,編碼 utf-8
if ($_SERVER['REQUEST_METHOD'] == "POST") { //如果是 POST 請求
@$tn1 = $_POST["tn1"]; //取得 tn1 POST 值
@$tn2 = $_POST["tn2"]; //取得 tn2 值
@$tn3 = $_POST["tn3"]; //取得 tn3 值
if ($tn1 != null && $tn2 != null&& $tn3 != null ) { //如果 tn1 和 tn2和 tn3 都有填寫
//回傳 tn1 和 tn2 和 tn3 json 資料
echo json_encode(array(
'total' => round($tn1*$tn2*$tn3/100)
));
} else {
//回傳 errorMsg json 資料
echo json_encode(array(
'errorMsg' => '資料未輸入完全!'
));
}
} else {
//回傳 errorMsg json 資料
echo json_encode(array(
'errorMsg' => '請求無效,只允許 POST 方式訪問!'
));
}
這是可以正常讀取跟顯示的 但是如果遇到很多列的話不知道怎麼寫
希望有人可以解答 謝謝
我只給你思維。
幸好你只是要將所有的值相乘。
那倒還好處理。
你的問題是卡在固定數的情況。
也就是你是用 tn1 tn2 ...... tn(n)。
所以需要幾個值全都要再定義處理。也就會發生你說的,只要增加一個值就得要再改程式。
那~~~如果這些值都是要相乘的。
其實你可以不需要用指定式的方式。
而將其全換成陣列送進去就好。
在其對應的input,給與自定義屬性
如 data-mult = "Multiply"
則在jquery的用法下
var multiply = [];
$("input[data-mult='Multiply']").each(function(){
multiply[] = $(this).val();
});
這樣可獲得陣列。
再將其當成變數給ajax發送。
$.ajax({
type: "POST", //傳送方式
url: "service.php", //傳送目的地
dataType: "json", //資料格式
data: {multiply:multiply},
.
.
.
其php則用迴圈相乘處理
$setV = 1;//要先給1的初始值
foreach($_POST AS $m){
setV = setV*$m;
}
約是這樣的東西。我不給全部的程式碼。
你試著去思考如何用上面的應用處理就好了。
有問題再問。直接你答案你會不了解何謂邏輯。
就先點到為止就好。
我的意思應該是
第一列:tn1tn2tn3=result1
第二列:atn1atn2atn3=result2
第三列:btn1btn2btn3=result3
第N列.....
每一列都要有一個RESULT
在不知道有幾列的情況下 如何寫入呢 謝謝
先去了解我第一個echo的用意。
並捨棄你指定式的用法。
簡單來說,你要捨棄id用法。
要不然你的問題永遠都無法解決的。
要學會群集式的處理方式。
如以下的規劃
<input name="itprice" type="text" data-mult="Multiply1" value="">
<input name="itnum" type="text" data-mult="Multiply1" class="normalinput" value="">
<input name="percent" data-mult="Multiply1" type="text" value="">
<p data-sub="Multiply1"></p>
<input name="itprice1" type="text" data-mult="Multiply2" value="">
<input name="itprice2" type="text" data-mult="Multiply2" value="">
<input name="itprice3" type="text" data-mult="Multiply2" value="">
<input name="itnum" type="text" data-mult="Multiply2" class="normalinput" value="">
<input name="percent" data-mult="Multiply2" type="text" value="">
<p data-sub="Multiply2"></p>
$("input[data-mult='Multiply1']").each(function(i,v){
if(i==0){
multiply1=$(this).val();
}else{
multiply1 = multiply1*$(this).val();
}
});
$("input[data-sub='Multiply1']").html(multiply1)
$("input[data-mult='Multiply2']").each(function(i,v){
if(i==0){
multiply2=$(this).val();
}else{
multiply2 = multiply2*$(this).val();
}
});
$("input[data-sub='Multiply2']").html(multiply1)
可以依此類推。
但這樣子寫又太過落落長。每增加一組就得寫一次
這時就可以寫成function的方式來處理
$("input[data-sub]").each(function(i,v){
var sumKey = $(this).attr('data-sub');
var mu = multiply(sumKey);
$(this).html(mu);
}
function multiply(key){
var multiply=0;
$("input[data-mult='"+key+"']").each(function(i,v){
if(i==0){
multiply=parseFloat($(this).val());
}else{
multiply = multiply * parseFloat($(this).val());
}
});
return multiply;
}
這樣如上的寫法,你就可以隨你高興怎麼去加html了。
都一定能幫你計算。
對了,上面的寫法,還有一些要注意的,像是數值化處理的。
空值判斷處理的。這些就交給你自已來。
我並沒寫的很全。只是大約告訴你怎麼去萬用處理。
剛剛試出來了 我因為只要顯示所以發現不用AJAX到PHP 直接前端JQUERY 取值相乘得到結果就好 感謝提供想法!
你可以把checkbox的名字設成一樣,用value來區分
HTML
<label><input type="checkbox" name="sports[]" value="cycling" /> cycling</label>
<label><input type="checkbox" name="sports[]" value="running" /> running</label>
<label><input type="checkbox" name="sports[]" value="visit gym" /> visit gym</label>
<label><input type="checkbox" name="sports[]" value="swimming" /> swimming</label>
<label><input type="checkbox" name="sports[]" value="team sports" /> team sport(s)</label>
<label><input type="checkbox" name="sports[]" value="other" /> other</label>
js(jQ)
$.ajax({
// 其他省略3000字
data: {
sports:document.forms['demoForm'].elements[ 'sports[]' ]
//有勾的有傳,沒勾的不傳
}
}) //以下再省略1001字
PHP
$sport = $_POST["sports"];
foreach($sport as $s)
{
echo $s;
}
只是直接用JS計算應該會比較方便吧
HTML
<form id="Form1">
<input name="tn[]" type="text" id="tn1" value="">
<input name="tn[]" type="text" class="normalinput" id="tn2" value="">
<input name="tn[]" type="text" id="tn3" value="">
<input name="atn[]" type="text" id="atn1" value="">
<input name="atn[]" type="text" class="normalinput" id="atn2" value="">
<input name="atn[]" type="text" id="atn3" value="">
<button id="submit" type="button">送出</button>
</form>
JS
$('#submit').on('click', function(){
var form = $('form')[0];
var formData = new FormData(form);
$.ajax({
...
data : formData,
...
})
});
php
$tempArr = array();
foreach ($_POST as $key => $value) {
foreach ($value as $k => $v) {
if(empty($tempArr[$key])) $tempArr[$key] = 1;
$tempArr[$key] *= $v;
}
$tempArr[$key] /= 100;
}
echo json_encode($tempArr);
可是我不確定有幾列要去做運算
如果有一百列怎麼做呢
tn1tn2tn3=result1
tn4tn5tn6=result2
.....
tn301tn302tn303=result100
例如這樣 麻煩了感恩
希望在鍵入完成的時候後面就可以顯示運算結果了
如果是打算輸入完成後就可以顯示的話
JS計算的 如果是AJAX 這個想法去改就可以
$('input').on('change',function() {
var thisName = $(this).attr('name');
var sum = 0;
$('[name="'+thisName+'"]').each(function(){ sum += parseInt($(this).val()); });
console.log(sum);
});
如果只是為了 在輸入後馬上計算結果出來 input
預設給他0 否則空值會被轉成NaN