2 forms posting to the same place. One works the other does not

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.

What exactly isn't working? Specify what is the expected behavior and what is the actual one? — Ihor Kaharlichenko, Aug 20 '12 at 18:28

score 1 · Accepted Answer · edited May 23 '17 at 12:27

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)?

edited May 23 '17 at 12:27

Community

1
1

answered Aug 20 '12 at 19:11

Glenn Dayton

1,410
2
20
38

It seems my problem lies with `name="tagname"` with both forms. – Modelesq Aug 20 '12 at 21:16
Yes, in addition to changing the id from `country` to `interest` you should also make unique names so that you know which one is being looked at. Also you could keep the name the same, and make the submit button's name unique so that you know which one you are looking at. – Glenn Dayton Aug 20 '12 at 21:18

score 0 · Answer 2 · answered Aug 20 '12 at 18:57

Try setting DEBUG to True in the settings and look at the result 404 page through the console (or Firebug); the 404 error might not be caused by a missing URL but by the view rejecting the input, and the debug information could help in pinpointing the reason.

A possible cause might be whatever code is populating the value of <input id="country-tag-input">. If the id becomes interest-tag-input, that might cause the tag's value not to be set, thereby sending an empty tagname to Django.

2 forms posting to the same place. One works the other does not

2 Answers2