Question

I have 2 forms within the same template. One adds Country tags to a current users profile, the other adds Interest tags. Both forms are bring posted to the same url. Both tag fields are filtered through an autocomplete so both fields have their corresponding content. Country input will return a list of Countries, etc.

When I search through the Country Tag field, I’m able to add a country tag. Awesome! However, when trying to add an Interest, the spinner.gif is activated, but within my console the post returns a 404 and therefore doesn’t add the actual interest tag.

Template: The other form is the same, just replace the ids: Country with Interest.

<form id="addCountryTagForm" class="add_tags_form" method="POST" action="/tag/add/"> 
     {% csrf_token %}
     <input id="country-tag-input" class="input-text inline required tag-select" name="tagname" type="hidden" />
     <button class="btn addtag" type="submit" id="addCountryTag">
           <span>Add</span>
      </button> 
</form>

ajax:

$('.add_tags_form').submit(function(e) {
     var $this = $(this);
     var $loader = $('<div class="tag-loader"><img src="/static/images/misc/spinner.gif" /></div>');
     $this.append($loader);

     e.preventDefault();
     var action = $this.attr("action");

     result = $.ajax({
          url: action,
          data: {
               'csrfmiddlewaretoken':$('input[name^="csrfmiddlewaretoken"]').val(),
               'tagname':$('input[name^="tagname"]').val()
           },
           type: "POST",
           success: function(data) {
                $('.tag-section').load('/account/tag-section/');
                $('input[name^="tagname"]').val('');
                $loader.remove();
           },
           error: function(jqXHR, textStatus, errorThrown) {
                $loader.remove();
           }
       });
       return false;
 });

I really don’t know why this isn’t working. Is what I’m trying to accomplish unattainable? Can 2 forms posting to the same url not work within the same template? If anyone could offer inisight, it would be greatly appreciated.

Answer 1

You need to give your button a name attribute. You can post two forms on a single page by checking the name of the button pressed. This can be done like so:

Technique 1

...
if form.is_valid():
    if "button1" in request.POST:
        # do things for form 1
    elif "button2" in request.POST:
        # do things for form 2
...

Technique 2

Change the name attribute of the hidden field depending on whether you are looking at country or interest.

You’re also not using jQuery with Django the way that it could best be done. As in, you’re not using the views.py or the forms.py files when submitting the information. Take a look at this answer for using jQuery and Django: How to use JQuery and Django (ajax + HttpResponse)?