Django: Dynamic jquery form not working when {% csrf_token %} is added
Question
I am using a dynamic form in my django template using jquery but when I add submit button or csrf token to the form the dynamic form stops working and I can not add new fields anymore.
Here is my html file
<html> <body> <form method="post"> <p> <label>Name:</label> <input type="text"> <label>Number:</label> <input type="number"> <span class="remove">Remove</span> </p> <p> <span class="add">Add fields</span> </p> </form> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(".add").click(function() { $("form > p:first-child").clone(true).insertBefore("form > p:last-child"); return false; }); $(".remove").click(function() { $(this).parent().remove(); }); </script> </body> </html>
but when I insert {% csrf_token %} or <input type="submit" value="Submit"> the dynamic form is not working
<form method="post">
{% csrf_token %}
<p>
<label>Name:</label> <input type="text">
<label>Number:</label> <input type="number">
<span class="remove">Remove</span>
</p>
<p>
<span class="add">Add fields</span>
</p>
</form>
,
<form method="post"> <p> <label>Name:</label> <input type="text"> <label>Number:</label> <input type="number"> <span class="remove">Remove</span> </p> <p> <span class="add">Add fields</span> </p> <input type="submit" value="Submit"> </form> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(".add").click(function() { $("form > p:first-child").clone(true).insertBefore("form > p:last-child"); return false; }); $(".remove").click(function() { $(this).parent().remove(); }); </script>
The form can no more insert/add new fields after this addition. Need help.
1 answers
solution1
0 2021-04-19 07:34:54
Your selectors are as follows:
-
"form > p:first-child": This will give you aptag which is the first child of its parent, when you put the{% csrf_token %}before theptag it is no longer the first child of theformtag. -
"form > p:last-child": This will give you aptag which is the last child of its parent when you add the submit button, there is no p tag which is the last child of theformtag.
You can fix this by using :first-of-type and :last-of-type selectors, although this is not a very great solution and can easily break if you add other p tags. Also your solution can easily break if there are multiple form tags, etc.:
<form method="post"> {% csrf_token %} <p> <label>Name:</label> <input type="text"> <label>Number:</label> <input type="number"> <span class="remove">Remove</span> </p> <p> <span class="add">Add fields</span> </p> <input type="submit" value="Submit"> </form> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(".add").click(function() { $("form > p:first-of-type").clone(true).insertBefore("form > p:last-of-type"); return false; }); $(".remove").click(function() { $(this).parent().remove(); }); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.