Formular Rückgabe von Ajax nicht senden richtige ID

Question

Ich gebe ein Formular für jede Zeile in einer Tabelle über Ajax. Ich habe es getan, so dass ich Datensätze spezifisch für eine Studenten-ID auf jeder Zeile einfügen kann. Dies ist, wie die Form aussieht, wenn es Rückkehr von Ajax ist:

Problem ist, wenn das Formular zurückgegeben wird, und ich versuchte, eine Punktzahl für die erste Schüler Ralph T. Hensley ich die richtige id bekommen einfügen von diesem Studenten. Aber als ich versuchte, eine Punktzahl für die übrigen Schüler einfügen bekomme ich die id für Ralph T. Hensley die 7 ist

ich richtig die eindeutigen IDs der einzelnen Schüler bin angezeigt wird, aber es scheint, wie, wann immer ich auf die Schaltfläche Speichern gibt nur die ID des ersten Schülers in der Ergebnismenge zurück. Die Struktur meines Codes ist unten.

So gebe ich mein Formular über Ajax zurück.

$output .= '<tbody>'; 
      if (mysqli_num_rows($result) > 0) { 
        while ($row = mysqli_fetch_array($result)) { 
         # code... 
          // unseen fields values that will be send 
         $output .= '<form action="#" method="post" class="st_score_form">'; 
          $output .= '<tr>'; 
           $output .= '<td> 
            <input type="number" class="student_set" name="student_id" value="'.$row['student_id'].'"> 
            </td>'; 
           $output .= '<td style="display:none;"> 
            <input type="text" class="subject_set" name="subject" value="'.$subject_id.'"> 
            </td>'; 
           $output .= '<td style="display:none;"> 
            <input type="number" class="class_set" name="class_id" value="'.$class_id.'"></td>'; 
           $output .= '<td style="display:none;"><input type="text" name="term" value="'.$term.'"></td>'; 
           $output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>'; 
           $output .= '<td><input type="number" class="score_set" min="59" max="100" name="score" class="form-control" required="required"></td>'; 
           $output .= '<td><input type="submit" name="savebtn" value="Save" class="btn btn-info form-control savebtn"></td>'; 
          $output .= '</tr>'; 
          // -- end of unseen fields 
         $output .= '</form>'; 
        } 
     $output .= '</tbody>'; 

Das ist mein Skript:

$(document).on('click', '.savebtn', function(event) { 
    event.preventDefault(); 

    var student = $('.student_set').val(); 
    var student_class = $('.class_set').val(); 
    var subject = $('.subject_set').val(); 
    var score = $('.score_set').val(); 

    console.log("Student " +student); 
    console.log("Class " +student_class); 
    console.log("subject " +subject); 
    console.log("Score " +score); 

    if (student != null && student_class != null && subject != null && score != null) { 
     $.ajax({ 
     url:"includes/ajax/create_score.php", 
     method:"post", 
     data:{"student":student, "class":student_class, "subject":subject, "score":score}, 
     dataType:"text", 
     success:function(data){ 
      $("#success").fadeIn('slow', function(){  
      $("#success").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-check"></i>Alert! </b>'+data+'</div>'); 
      }); 
     } 
     }); 
    } else { 
     $("#result").html(''); 
    } 


}); 
$('body').append('<button class="savebtn"></button>'); 

Ich bin offen Rücken und Vorschläge über Möglichkeiten zu füttern ich diese Arbeit machen kann. Vielen Dank!!!

Answer 1

Das erste, was es ist schlechte Praxis die gleichen IDs für alle Eingaben zu setzen, (id muss in der ganzen Seite eindeutig sein)

In Ihrem Code, Sie werden immer die falschen Werte hier var student = $('.student_set').val();:

Sie sollten die ID als erhalten:

$(this).parents('tr').find('.student_set').val(); 

auch für das andere Feld.

unten Arbeits Schnipsel:

$(function() { 
 
    $(".savebtn").on("click", function(e) { 
 
    alert($(this).parents('tr').find(".student_set").val()); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 

 
    <tr> 
 
    <form> 
 
     <td> 
 
     <input type="number" class="student_set" name="student_id1" value="1"> 
 
     </td> 
 
     <td><input type="number" class="score_set" min="59" max="100" name="score" class="form-control" required="required"></td> 
 
     <td><input type="submit" name="savebtn" value="Save" class="btn btn-info form-control savebtn"></td> 
 
    </form> 
 
    </tr> 
 
    <tr> 
 
    <form> 
 
     <td> 
 
     <input type="number" class="student_set" name="student_id2" value="2"> 
 
     </td> 
 
     <td><input type="number" class="score_set" min="59" max="100" name="score" class="form-control" required="required"></td> 
 
     <td><input type="submit" name="savebtn" value="Save" class="btn btn-info form-control savebtn"></td> 
 
    </form> 
 
    </tr> 
 
</table>

Answer 2

Der Bereich in Ihrer JS-Funktion ist der Button. Bedeutet das Schlüsselwort this ist das DOM-Element der geklickten Schaltfläche.

Jetzt können Sie mit der Suche nach dem DOM (Startpunkt ist Ihre Schaltfläche) für das Eingabefeld mit dem student_id suchen.

$(this) 
    .parents('tr').first()   // go up the HTML structure to the next TR. 
    .find('[name="student_id"]').first() // find the input with the name `student_id`