ส่งค่า Ajax แบบ array อย่างไรครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ส่งค่า Ajax แบบ array อย่างไรครับ

ส่งค่า Ajax แบบ array อย่างไรครับ

มีฟอร์มกรอกคะแนน โดยมีคะแนนเต็ม เช่น 10 คะแนน แล้วเอามาแยกให้คะแนนแต่ละคนในกลุ่ม ในกลุ่มอาจจะมี 3 คน 4 คนหรือ 5 คน
ผลรวมคะแนนกลุ่มต้องเท่ากับ คะแนนเต็ม ถึงจะบันทึกข้อมูลได้ ผมไม่ทราบว่าจะส่งค่า textfield แบบ array stScore[] ไปตรวจสอบอย่างไร

		formsave.php

		<form class="cmxform" id="saveForm" method="POST" action="">

		    <div class="form-group row">

		        <table class="table table-border">

		            <thead>

		                <tr>

		                    <th>#</th>

		                    <th>นักเรียน</th>

		                    <th>คะแนน <input typ="text" class="form-control" name="totalscore"></th>

		                </tr>

		            </thead>

		            <tbody>

		                <?php

		                $sql = "SELECT * FROM db_student WHERE STgroup ='1' order by id ";

		                $que = $db->GetAll($sql);

		                $i=1;

		                foreach($que AS $rs){

		                        echo "<tr>n";

		                        echo "<td>".$n."</td>n";

		                        echo "<td>นายxxxxxxx yyyyyyy</td>n";

		                        echo "<td>n";

		                        echo "<input type="text" name="stScore[]" id="stScore[]" class="form-control" required>n";

		                        echo "</td>n";

		                        echo "</tr>n";

		                    $i++;

		                        }

		                    ?>

		                <tr>

		                    <td colspan="2" class="text-right"></td>

		                    <td>

		                    <!---ตรง onkeyup="return checkScore(stScore[].value)" ในวงเล็บส่งค่า array ยังไงครับ--->

		                        <input class="btn btn-info  text-center" onkeyup="return checkScore(stScore[].value)"

		                            value=" Submit">

		                        <div id="checSTscore"></div>

		                    </td>

		                </tr>

		            </tbody>

		        </table>

		    </div>

		</form>

		<script type="text/javascript">

		    //ตรวจสอบคะแนนแต่ละคน รวมกันต้องเท่ากับคะแนนเต็ม 

		    function checkScore() {

		        $.ajax({

		            type: "GET",

		            url: "checkScore.php",

		            data: {

		                //ค่าส่งไปตรวจสอบเป็น array จาก text name="stScore[]" ต้องใส่ค่ายังไง

		                hscore[$i] : hscore[$i]

		            },

		            success: function (data) {

		                $("#checSTscore").html(data);

		            }

		        });

		        return false;

		    }
</script>

		checkScore.php

				<?php

				    foreach($_GET['stScore'] as $value )

				    {

				            echo "".$value."<br>";

				    }

				?>

Takabe 58.11.28.xxx 24-11-2020 20:38:57

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ถ้าต้องการเป็นตัวเลข อย่างเดียว กำหนด input type เป็น number

เพื่อที่จะให้กรอกได้เพียงตัวเลข แล้วใช้ javascript คำนวณ ตรวจสอบก่อนส่ง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Document</title>
</head>
<body>

  <form class="cmxform" id="saveForm" method="POST" action="">
    1.<input type="number" name="score[]" ><br>
    2.<input type="number" name="score[]" ><br>
    3.<input type="number" name="score[]" ><br>
    4.<input type="number" name="score[]" ><br>
    5.<input type="number" name="score[]" ><br>
    <button type="submit" name="btn_send">Send</button>
  </form>
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 <script>
  $(function(){
    $(".cmxform").on("submit",function(){
      var totalScore = 10;
      var scoreV = 0;
      $("[name='score[]']").each(function(i, k){
        let i_score = $(k).val();
        i_score = (isNaN(i_score) || i_score==="")? 0 : parseInt($(k).val());
        scoreV += i_score;
        console.log(typeof scoreV);
      });
      if(scoreV != totalScore){
        console.log(scoreV); // คะแนนไม่เท่ากับ 10 
      }else{
          // เหมือนส่งฟอร์มปกติ ไฟล์ data.php รับค่าปกติ แบบ POST
          // แต่เป็นการส่งแบบ ajax
          $.post("data.php",$(this).serialize(),function(data){
            console.log(data);
          });
      }
      return false;
    });
  });
  </script> 
</body>
</html>

หรือจะตรวจสอบเมื่อส่งไปแล้วด้วยก็ได้

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
ทบทวนพื้นฐาน ajax ใน jquery การส่งค่าและแสดงข้อมูลเบื้องต้น	อ่าน 29,357

ninenik 49.237.17.xxx 24-11-2020

ความคิดเห็นที่ 2

ถ้า ค่า var

totalScore = 10; เป็นค่าที่กรอกมาจาก <input type="text" name="totalpoint"> ละครับ อาจจะเป็น 10 15 หรือ 20



จะประกาศตัวแปรอ var totalScore ยังไงครับ ผมลอง

	var totalScore = document.saveForm['totalpoint'].value;

มันไม่ได้ครับ

takabe 58.11.28.xxx 25-11-2020 00:14

ความคิดเห็นที่ 3

ต้องมีพื้นฐาน jQuery เพิ่มเติม หรือใช้ document.querySelector("[name='totalpoint']").value;

var totalScore = $("[name='totalpoint']").val();

Ninenik 58.8.175.xxx 25-11-2020

ความคิดเห็นที่ 4

ได้แล้วครับ ขอบคุณมากครับ จะศึกษาเพิ่มเติมครับ

takabe 1.179.155.xxx 25-11-2020 16:37

ความคิดเห็นที่ 5

ถ้าเป็นข้อมูลในตาราง ส่งค่าให้ ajax ต้องทำอย่างไครับ

Prapan Thaweeravong 118.172.60.xxx 23-02-2021 13:57

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน