mehrere Formulare, die die gleiche Funktion aufrufen

Question

Die Situation: Ich habe Seite, die eine Reihe von Einreichungen auflistet. Neben jeder Einreichung möchte ich eine Schaltfläche hinzufügen, um die Einreichung zu akzeptieren. Ich mache das über ein Formular.

Die html:

{% for submission in submissions %} 
    <div class="submission-container"> 

     <div class = "col-sm-6"> 
      {{ submission.submission_title }} </a> 
     </div> 

     <div class = "col-sm-6"> 
      <form action="" method="post" class="accept_submission" style="float:left;"> 
       {% csrf_token %} 
       <input type="hidden" class="data-submission-id" value="{{ submission.SUBMISSION_ID }}" /> 
       <input type="hidden" class="url-data" value="{% url 'submission_accept' %}" /> 
       <input type="submit" value="Accept" class="btn btn-info" /> 
      </form> 

     </div> 
    </div> 
{% endfor %} 

die jquery:

$('.accept_submission').on('submit', function(event){ 
    event.preventDefault(); 
    var data_post = { submission_id : $('.data-submission-id').val() } 
    execute_ajax_post(data_post); 
}); 

function execute_ajax_post(data_post) { 
    var csrftoken = getCookie('csrftoken'); 
    $.ajaxSetup({ 
     beforeSend: function(xhr, settings) { 
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
       xhr.setRequestHeader("X-CSRFToken", csrftoken); 
      } 
     } 
    }); 
    $.ajax({ 
     url : $('.url-data').val(), 
     type : "POST", 
     data : data_post, 
     success : function() { 
      console.log("success"); 
     }, 
    }); 
}; 

Das Problem ist jetzt, dass ich jede Form auf der übergeben wollen submission_id der jeweiligen Vorlage der Taste zugeordnet ist. Wenn ich jedoch Klassen verwende, geben alle Buttons die submission_id der ersten gelisteten Einreichung weiter. Wenn ich id = "accept_submission" nur die erste Schaltfläche verwenden. Wie würde ich das richtig funktionieren lassen?

Answer 1

Ihr immer alle .data-Vorlage-ID-Elemente in der dom beschränken sie jQuerys dieses

$('.accept_submission').on('submit', function(event){ 
    event.preventDefault(); 
    var data_post = { submission_id : $(this).find('.data-submission-id').val() } 
    execute_ajax_post(data_post); 
}); 

function execute_ajax_post(data_post) { 
    var csrftoken = getCookie('csrftoken'); 
    $.ajaxSetup({ 
     beforeSend: function(xhr, settings) { 
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
       xhr.setRequestHeader("X-CSRFToken", csrftoken); 
      } 
     } 
    }); 
    $.ajax({ 
     url : $('.url-data').val(), 
     type : "POST", 
     data : data_post, 
     success : function() { 
      console.log("success"); 
     }, 
    }); 
}; 

Ps Sie auch die Formulare Aktion konnte diese verwenden, anstatt die .url-Dateneingabe mit

Edit: ('Daten-Vorlage-id'). Sie auch mit formData aussehen könnte bedeutet, dass Sie nicht einmal den Cookie