小弟剛接觸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