code_junkie

Dynamically adding a form to a Django formset with Ajax

Nov 14th, 2011
161
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.67 KB | None | 0 0
  1. <h3>My Services</h3>
  2. {{ serviceFormset.management_form }}
  3. {% for form in serviceFormset.forms %}
  4. <div class='table'>
  5. <table class='no_error'>
  6. {{ form.as_table }}
  7. </table>
  8. </div>
  9. {% endfor %}
  10. <input type="button" value="Add More" id="add_more">
  11. <script>
  12. $('#add_more').click(function() {
  13. cloneMore('div.table:last', 'service');
  14. });
  15. </script>
  16.  
  17. function cloneMore(selector, type) {
  18. var newElement = $(selector).clone(true);
  19. var total = $('#id_' + type + '-TOTAL_FORMS').val();
  20. newElement.find(':input').each(function() {
  21. var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
  22. var id = 'id_' + name;
  23. $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
  24. });
  25. newElement.find('label').each(function() {
  26. var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
  27. $(this).attr('for', newFor);
  28. });
  29. total++;
  30. $('#id_' + type + '-TOTAL_FORMS').val(total);
  31. $(selector).after(newElement);
  32. }
  33.  
  34. js = ('/media/js/jquery.js', '/media/js/admin/AddInline.js', )
  35.  
  36. function cloneMore(selector, type) {
  37. var newElement = $(selector).clone(true);
  38. var total = $('#id_' + type + '-TOTAL_FORMS').val();
  39. newElement.find(':input').each(function() {
  40. var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
  41. var id = 'id_' + name;
  42.  
  43. if ($(this).attr('type') != 'hidden') {
  44. $(this).val('');
  45. }
  46. $(this).attr({'name': name, 'id': id}).removeAttr('checked');
  47. });
  48. newElement.find('label').each(function() {
  49. var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
  50. $(this).attr('for', newFor);
  51. });
  52. total++;
  53. $('#id_' + type + '-TOTAL_FORMS').val(total);
  54. $(selector).after(newElement);
  55. }
  56.  
  57. $('table tr.add-row a').click(function() {
  58. toSanitize = new Array('id', 'product', 'price', 'type', 'valid_from', 'valid_until');
  59. cloneMore('div.formtable table tr.form-row:last', 'form', toSanitize);
  60. });
  61.  
  62. function cloneMore(selector, type, sanitize) {
  63. var newElement = $(selector).clone(true);
  64. var total = $('#id_' + type + '-TOTAL_FORMS').val();
  65. newElement.find(':input').each(function() {
  66. var namePure = $(this).attr('name').replace(type + '-' + (total-1) + '-', '');
  67. var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
  68. var id = 'id_' + name;
  69. $(this).attr({'name': name, 'id': id}).removeAttr('checked');
  70.  
  71. if ($.inArray(namePure, sanitize) != -1) {
  72. $(this).val('');
  73. }
  74.  
  75. });
  76. newElement.find('label').each(function() {
  77. var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
  78. $(this).attr('for', newFor);
  79. });
  80. total++;
  81. $('#id_' + type + '-TOTAL_FORMS').val(total);
  82. $(selector).after(newElement);
  83. }
  84.  
  85. var newElement = $(selector).clone();
  86.  
  87. var newElement = $(selector).clone(true);
  88.  
  89. <h3>My Services</h3>
  90. {{ serviceFormset.management_form }}
  91. <div id="form_set">
  92. {% for form in serviceFormset.forms %}
  93. <table class='no_error'>
  94. {{ form.as_table }}
  95. </table>
  96. {% endfor %}
  97. </div>
  98. <input type="button" value="Add More" id="add_more">
  99. <div id="empty_form" style="display:none">
  100. <table class='no_error'>
  101. {{ serviceFormset.empty_form.as_table }}
  102. </table>
  103. </div>
  104. <script>
  105. $('#add_more').click(function() {
  106. var form_idx = $('#id_form-TOTAL_FORMS').val();
  107. $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
  108. $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
  109. });
  110. </script>
Add Comment
Please, Sign In to add comment