Home » Php » javascript – Is there a way I can send data from a html form made by a php while in an array using jQuery from processing back to a php page?

javascript – Is there a way I can send data from a html form made by a php while in an array using jQuery from processing back to a php page?

Posted by: admin February 25, 2020 Leave a comment

Questions:

I have searched for answers but in vain. I am trying to build a system where a teacher can marks for a specific subjects. This means there is a table for students and where their marks can be stored. So in these I have a form where details are looped from the student table:

while ($queryResult=mysqli_fetch_assoc($result)){
    $id=$queryResult['id'];
    $adm=$queryResult['studentAdmn'];
    $name=$queryResult['studentName'];
    echo"
      <tbody>
        <tr>
          <td>"; echo $i=$i+1; echo" </td> 
          <td><input  type='number' name='admNo' id='admNo' value='$adm' style='width:100px;' readonly> </td>
          <td><input type='text' name='name' id='name' value='$name' readonly> </td>
          <td><input type='number' name='mark' id='mark' value=''style='width:70px;' > </td>
          <td style='width:1px;'><input type='text' name='outOf' id='outOf' value='100' style='width:50px;'></td>
          <td align='center' style='width:1px;'><input type='checkbox' name='grade' id='grade' value='Grade' checked style='width:35px;'></td>    
         <td align='center' style='width:20px;'><input type='hidden' name='post_id' id='post_id'style='width:35px;'><span id='autoSave'></span></td>                                                            
       </tr>                                
     </tbody>
   ";
}

Jquery codes: Here I am trying to collect the marks entered by teacher and send it for storage via ajax and jQuery. I am also trying to autosave the data so in case of any thing, they are not lost. But the values are not being submitted, instead console log is showing errors that eg //Found 3 elements with non-unique id #name: and then listing the 3 elements as the table only contains 3 students. How can I solve this. thanks.

$(document).ready(function() {
    function autoSave() {
        var admNo = [];
        var name = [];
        var mark = [];
        var outOf = [];
        var grade = [];
        var postId = $('#post_id').value();
        $('#admNo').each(function() {
            admNo.push($(this).value());
        });
        $('#name').each(function() {
            name.push($(this).text());
        });
        $('#mark').each(function() {
            mark.push($(this).text());
        });
        $('#outOf').each(function() {
            outOf.push($(this).text());
        });
        $.each($('#grade:checked'), function() {
            grade.push($(this).value());
        })
        if (admNo != '') {
            alert('empty');
            $.ajax({
                url: 'non/includes/mark-entry-script.php',
                method: 'POST',
                data: {
                    admNo: admNo,
                    name: name,
                    mark: mark,
                    outOf: outOf,
                    grade: grade,
                    postId: postId
                },
                dataType: 'text',
                success: function(data) {
                    if (data != '') {
                        $('#post_id').value(data);
                    }
                    $('#autoSave').text("?");
                }
            });
        }
    }
    setInterval(function() {
        autoSave();
    }, 2000);
});
How to&Answers: