CODEWITHSUNDEEP
javascriptjquerypythonajaxdjango
loremIpsum1771
loremIpsum1771

Reputation: 2527

Form data not being sent to the server

I have a form that pops up in a modal when the user clicks a button in the search results of a query. This form has three input fields and a few other fields that are being appended to it once the submit button is being clicked using ajax. As this is apart of a Django app, I am catching the values in the view on the server-side. I'm successfully able to get the data from the input fields of the form, but I'm not able to get the data from the appended fields.

I'm fairly new to using ajax so its likely that I'm doing something wrong but it seems like the data should be getting sent to the server. What could be the problem?

Here is the code for the ajax call and the modal form:

<script type="text/javascript">
$("#mform").submit(function(){
    var c = getCookie('csrftoken');
    //var data1 = $().attr("");
    var extraData = [];
    extraData['venue'] = $("#invite").data("venue");
    extraData['artist'] = $("#invite").data("artist");
    extraData['f_date'] = $("#invite").data("formatted_date");
    extraData['uf_date'] = $("#invite").data("date");
    extraData['ticket_url'] =  $("#invite").data("ticket_url");
    extraData['city'] = $("#invite").data("city");
    extraData['region'] = $("#invite").data("region");
    extraData['artist'] = $("#invite").data("artist");
    var PostData = {csrfmiddlewaretoken: c, additionalValues:extraData}
    $ajax({
        //context:this,
        type : 'POST',
        dataType: 'json',
        url: '/artistsearch/',
        data: JSON.stringify(PostData),
        success: function(response){}
    });
});

EDIT:

HTML containing data to be sent

    <ul class= 'list-group'>
    {% for ticket in data %}
        <li  class = 'list-group-item' >
            Title: {{ticket.title}}
            Location: {{ticket.formatted_location}}
            Venue: {{ticket.venue.name}}
            Date: {{ticket.formatted_datetime}}
            tickets status: {{ticket.ticket_status}}<br>
            <a href = {{ticket.ticket_url}}> ticket url</a>
            {% if user.is_authenticated %}
                <button id = 'invite' type='button' class= 'btn btn-info btn-lg' data-toggle = 'modal' data-target='#myModal' data-artist = {{ticket.artists.name}} data-venue={{ticket.venue.name}} data-date = {{ticket.datetime}} data-formatted_date = {{ticket.formatted_datetime}} data-city= {{ticket.venue.city}} data-region = {{ticket.venue.region}} data-ticket_url={{ticket.ticket_url}} > Invite a friend </button>    
                <button id = 'save' type = 'button' class = 'btn btn-primary-outline'> Save Concert </button>
            {% endif %}
        </li>
    {% endfor %}
</ul>

Upvotes: 0

Views: 186

Answers (1)

Anil Panwar
Anil Panwar

Reputation: 2622

You have missed the # selector for id invite of button it should be like $("#invite"). Use attribute like data-artist instead of just artist and get it like $("#invite").data("artist) or $("#invite").attr("data-artist).

And then post it like ....

var postData = { csrfmiddlewaretoken: c, additionalValues: extraData } Then post data like 

    $.ajax({
        type: 'post',
        url: 'URL here',
        data:JSON.stringify(PostData),
       // .......
      //   Other code here

        )};

Upvotes: 1

Related Questions