ส่งค่า 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 24-11-2020 20:38:57

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

 ความคิดเห็นที่ 1
ถ้าต้องการเป็นตัวเลข อย่างเดียว กำหนด input type เป็น number 
เพื่อที่จะให้กรอกได้เพียงตัวเลข แล้วใช้ javascript คำนวณ ตรวจสอบก่อนส่ง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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 การส่งค่าและแสดงข้อมูลเบื้องต้นอ่าน 31,177
ninenik 24-11-2020
 ความคิดเห็นที่ 2
ถ้า ค่า var totalScore = 10; เป็นค่าที่กรอกมาจาก <input type="text" name="totalpoint"> ละครับ อาจจะเป็น 10 15 หรือ 20

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

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

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



takabe 25-11-2020 00:14
 ความคิดเห็นที่ 3
ต้องมีพื้นฐาน jQuery เพิ่มเติม หรือใช้ document.querySelector("[name='totalpoint']").value;

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


Ninenik 25-11-2020
 ความคิดเห็นที่ 4
ได้แล้วครับ ขอบคุณมากครับ จะศึกษาเพิ่มเติมครับ


takabe 25-11-2020 16:37
 ความคิดเห็นที่ 5
ถ้าเป็นข้อมูลในตาราง ส่งค่าให้ ajax ต้องทำอย่างไครับ


Prapan Thaweeravong 23-02-2021 13:57
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ