multiple forms that call same function

Question

The situation: I have page that lists a number of submissions. Next to each submission I want to add a button to accept said submission. I'm doing this via a form.

The 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 %}

the 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");
        },
    });
};

Now the problem is that I want each form to pass on the submission_id of the particular submission the button is associated with. However when I use classes all buttons pass on the submission_id of the first listed submission. If I use id="accept_submission" only the first button works. How would I get this to work correctly?

Thx, that fixed it. It did create the following message in my browser console (firefox) 'TypeError: this._recipeManager is null[Meer info]' but everything seems to be working as it should. — DisneylandSC
– DisneylandSC, Commented May 14, 2017 at 8:34

rhys_gbs · Accepted Answer · 2017-05-13 09:28:16Z

1

Your getting all the .data-submission-id elements in the dom restrict it to using jquery's this

$('.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");
        },
    });
};

P.s you could also just use the forms action rather than the .url-data input

Edit: You could also look at using formData meaning you wouldn't need to even get the cookie

edited May 13, 2017 at 9:28

answered May 13, 2017 at 9:17

rhys_gbs

4092 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DisneylandSC Over a year ago

Thx, also for the 'action' attribute tip. Makes everything a lot cleaner.

Collectives™ on Stack Overflow

multiple forms that call same function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related