I am cloning my an empty form in django following guidance I’ve found elsewhere in stack overflow. The JS will append a new form as intendended however the dropdowns from a choice widget are no longer working and I can’t figure out why.
I have already validated that all of my options are there using my browser’s inspect feature. It appears to be that the javascript isn’t working with the object.
This is from the template:
<form method="post"> {% csrf_token %}
<div id="form_set">
{{ FightForms.management_form|materializecss }}
{% for form in FightForms %}
<div class="card white darken-1 col m12">
<table class='no_error'>
{{ form.non_field_errors }}
<row>
<div class="col m3">
<div class="fieldWrapper">
{{ form.guild_member_id|materializecss }}
</div>
</div>
</row>
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
</table>
</div>
{% endfor %}
</div>
<div class="col m12">
<div>
<input class="btn light-blue lighten-1" type="button" value="Add More" id="add_more">
</div>
<br>
<button class="btn light-blue lighten-1" type="submit">Submit Guild Members</button>
</div>
<div id="empty_form" style="display:none">
<div class="card white darken-1 col m12">
<table class='no_error'>
{{ FightForms.empty_form.non_field_errors }}
<row>
<div class="col m3">
<div class="fieldWrapper">
{{ FightForms.empty_form.guild_member_id|materializecss }}
</div>
</div>
</row>
{% for hidden in form.hidden_fields %}
{{ hidden|materializecss }}
{% endfor %}
</table>
</div>
</div>
</form>
<script>
$('#add_more').click(function() {
var form_idx = $('#id_form-TOTAL_FORMS').val();
$('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
$('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});
</script>
Here are my header imports if it’s an issue with versioning or something…
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>League Chronicler</title>
<link rel="shortcut icon" type="image/png" href="{% static 'img/CScroll.png' %}"/>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/chronicler.css' %}" type="text/css" media="screen,projection"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% block css %}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock css %}
<!-- javascript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>