如何通过Ajax发送动态html表的多个复选框的值?

时间:2019-03-31 14:16:16

标签: php ajax

我有可动态更新的HTML表格。该表包含复选框。我需要将这些数据发送到将更新数据库的php脚本。我的html表是

<form id="myform" method="post" action="teacher_fed.php">
<table id="sem3_table" style="width:100%;" class="w3-table w3-bordered w3-card  w3-hoverable">
<thead>
<tr>
  <th rowspan="2">PRN NO.</th>
  <th rowspan="2">NAME</th>   
  <th colspan="3">DISCRETE MATHEMATICS</th>
  <th colspan="3">ECCF</th>
  <th colspan="3">DATA STRUCTURES</th>
  <th colspan="3">DLDA</th>
  <th colspan="3">OOPM</th>
  <th rowspan="2">MENTOR FORM</th>  
 <th rowspan="2">OVERALL</th>     
</tr>
<tr>
  <th>COURSE EXIT</th>
  <th>ASSIGNMENTS</th>
  <th>PRACTICALS</th>

  <th>COURSE EXIT</th>
  <th>ASSIGNMENTS</th>
  <th>PRACTICALS</th>

  <th>COURSE EXIT</th>
  <th>ASSIGNMENTS</th>
  <th>PRACTICALS</th>

  <th>COURSE EXIT</th>
  <th>ASSIGNMENTS</th>
  <th>PRACTICALS</th>

  <th>COURSE EXIT</th>
  <th>ASSIGNMENTS</th>
  <th>PRACTICALS</th>    
</tr>
</thead>
<tbody>
<tr>

   <td  id="prn" >161041003</td>
  <td> id="name" name="name">MANDEEP</td>

  <td><input id="c1" class="w3-check jill" type="checkbox" checked></td>
  <td><input id="c2" class="w3-check jill" type="checkbox"></td>
  <td><input id="c3" class="w3-check jill" type="checkbox"></td>

  <td><input id="c4" class="w3-check jill" type="checkbox"></td>
  <td><input id="c5" class="w3-check jill" type="checkbox"></td>
  <td><input id="c6" class="w3-check jill" type="checkbox"></td>

  <td><input id="c7" class="w3-check jill" type="checkbox"></td>
  <td><input id="c8" class="w3-check jill" type="checkbox"></td>
  <td><input id="c9" class="w3-check jill" type="checkbox"></td>

    <td><input id="c10" class="w3-check jill" type="checkbox"></td>
  <td><input id="c11" class="w3-check jill" type="checkbox"></td>
  <td><input id="c12" class="w3-check jill" type="checkbox"></td>

  <td><input id="c13" class="w3-check jill" type="checkbox"></td>
<td><input id="c14" class="w3-check jill" type="checkbox"></td> 
<td><input id="c15" class="w3-check jill" type="checkbox"></td>


<td><input id="c16" class="w3-check jill" type="checkbox"></td>
  <td><input id="c17" id="select-all-3" class="w3-check" type="checkbox"></td>
</tr>

  </tbody>
</table>
<input type="submit" id="submit" name="submit" value="Submit">
</form>

目前我只添加了一行,但是可以有多行。如何将这些数据发送到php脚本?我是新手,在一些帮助下,我编写了以下Ajax post方法:

$(document).ready(function() {
       $('#submit').on("click", function(){         
   var prn = $('#prn').text();
   var name = $('#name').text();
    var cbox1 = $('#c1').prop('checked');
        var cbox2 = $('#c2').prop('checked');
        var cbox3 = $('#c3').prop('checked');
        var cbox4 = $('#c4').prop('checked');
        var cbox5 = $('#c5').prop('checked');
        var cbox6 = $('#c6').prop('checked');
        var cbox7 = $('#c7').prop('checked');
        var cbox8 = $('#c8').prop('checked');
        var cbox9 = $('#c9').prop('checked');
        var cbox10 = $('#c10').prop('checked');
        var cbox11 = $('#c11').prop('checked');
        var cbox12 = $('#c12').prop('checked');
        var cbox13 = $('#c13').prop('checked');
        var cbox14 = $('#c14').prop('checked');
        var cbox15 = $('#c15').prop('checked');
        var cbox16 = $('#c16').prop('checked');
        var cbox17 = $('#c17').prop('checked');


        var form_data = 
          'prn='+prn+
          '&name='+name+
          '&cbox1='+cbox1+
          '&cbox2='+cbox2+
          '&cbox3='+cbox3+
            '&cbox4='+cbox4+
            '&cbox5='+cbox5+
            '&cbox6='+cbox6+
            '&cbox7='+cbox7+
            '&cbox8='+cbox8+
            '&cbox9='+cbox9+
            '&cbox10='+cbox10+
            '&cbox11='+cbox11+
            '&cbox12='+cbox12+
            '&cbox13='+cbox13+
            '&cbox14='+cbox14+
            '&cbox15='+cbox15+
            '&cbox16='+cbox16+
          '&cbox17='+cbox17

         $.ajax({
        type: 'post',
        url: 'teacher_fed.php',
        data: form_data,
        success: function () {
          alert('form was submitted');
        }     
   });

 }); 

}); 

我的php脚本:

<?php
// Create connection
$conn=mysqli_connect("localhost","root","","registration");
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

if(isset($_POST['submit']))
{

    $prn=$_POST['prn'];
    $name=$_POST['name'];
    $dm_course=$_POST['cbox1'];
    $dm_assign=$_POST['cbox2'];
    $dm_prac=$_POST['cbox3'];
    $eccf_course=$_POST['cbox4'];
    $eccf_assign=$_POST['cbox5'];
    $eccf_prac=$_POST['cbox6'];
    $ds_course=$_POST['cbox7'];
    $ds_assign=$_POST['cbox8'];
    $ds_prac=$_POST['cbox9'];
    $dlda_course=$_POST['cbox10'];
    $dlda_assign=$_POST['cbox11'];
    $dlda_prac=$_POST['cbox12'];
    $oopm_course=$_POST['cbox13'];
    $oopm_assign=$_POST['cbox14'];
    $oopm_prac=$_POST['cbox15'];
    $mentor=$_POST['cbox16'];
    $overall=$_POST['cbox17'];

 $q="INSERT INTO student_submission(prn,name,dm_course,dm_assign,dm_prac,eccf_course,eccf_assign,eccf_prac,ds_course,ds_assign,ds_prac,dlda_course,dlda_assign,dlda_prac,oopm_course,oopm_assign,oopm_prac,mentor,overall) VALUES('$prn','$name','$dm_course','$dm_assign','$dm_prac','$eccf_course','$eccf_assign','$eccf_prac','$ds_course','$ds_assign','$ds_prac','$dlda_course','$dlda_assign','$dlda_prac','$oopm_course','$oopm_assign','$oopm_prac','$mentor','$overall')";

mysqli_query($conn,$q) or die(mysqli_error($conn));
 }

   mysqli_close($conn);
?>

我遇到错误每个变量prn,名称,cbox1 ..等等的未定义索引

我希望用户每次单击提交按钮数据库表时应该
1.如果特定行在数据库中退出,则使用复选框的更新值更新
2. 已插入(如果未插入)。

由于我的html表可能没有任何行( PRN 是html和db表中的主键),所以这不是正确的解决方案。

0 个答案:

没有答案