1

I have generated html delete button dynamically to add at the end of each row in a table depending on the data that comes in. Buttons are generated and added at the end of each to delete that particular row. Apart from the table, there is also a form on the page with a submit button at the end. Buttons that appear on page load for some reason trigger a post event to validate the form on the page. When I add a new row in the table dynamically, delete button works normally to delete a row but when I refresh this behaves as a normal submit button. I am not able to figure out the reason why its behaving strangely that way. Any help would be greatly appreciated. Here is my html.

.html 

<tbody>
    {% for item in items %}
    <tr>
        <form action="{% url 'newitem' %}" role="form" method="post">
            {% csrf_token %}
            <th> {{ item.id }} <input type="hidden" name="item_id" value="{{ item.id }}" > </th>
            <td> {{ item.Name }} </td>
            <td> 
                {% buttons %}                                   
                    <input type="submit" name="action" value="Delete" class="btn btn-danger btn-xs" style="width: 50px" />                          
                {% endbuttons %}
            </td>
        </form>
    </tr>
    {% endfor %}
</tbody>
hermy67
  • 138
  • 2
  • 15
  • Have you tried providing a name and id unique to each form? Also, ensure you do not have [forms within forms](http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form) – Esten May 10 '16 at 15:42
  • I tried to avoid using forms inside forms but for some reason, even though these buttons are inside a parent form they don't work without a form tag. Also, both forms post to the same view method. I don't know any work around for that. I have no idea why these buttons aren't working without a form tag around them. – hermy67 May 10 '16 at 15:44
  • I just removed multiple form tags, but this didn't help at all. The buttons on page load validate the form and not delete the rows as expected. After adding a row from the form, the new button behaves normally. I don't know why buttons on page load validate the form on the page. – hermy67 May 10 '16 at 15:50
  • I think you could provide a separate form for each row, but just make sure there isn't a "parent" form around them. You're passing a unique ID into each row, so use that to specify a unique ID for each form. `
    `
     – Esten May 10 '16 at 15:54
  • I actually removed multiple forms because this form is enclosed in a parent form and as you suggested, using multiple forms isn't advisable. But as I have updated my question, those buttons that appear on page load don't perform delete action but perform a normal submit action. This is very weird because the buttons added dynamically work perfectly well! I hope you can help me with this because I am completely blocked here. – hermy67 May 10 '16 at 16:09
  • Unfortunately, I do not have any experience with Django. Do you think this is something more Django related? Does Django handle form submissions by reading the value of your button and applying the operation on the back-end? What methods are you using for validation? You could try adding `novalidate` to your form to see if that at least changes the behavior of the onpageload buttons. I would also try and provide a unique button name and ID if possible in Django. – Esten May 10 '16 at 16:25

1 Answers1

0

Django causes form validation on every submit button click. Disabling Delete button to perform form validation solved my issue. I added "formnovalidate" attribute to Delete button tag and it worked magic! 

{% buttons %}                                   
<input type="submit" name="action" value="Delete" class="btn btn-danger btn-xs" formnovalidate />                          
{% endbuttons %}
hermy67
  • 138
  • 2
  • 15