Reputation: 5402
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.
Upvotes: 0
Views: 106
Reputation: 1430
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)?
Upvotes: 1
Reputation: 57453
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.
Upvotes: 0