hi all,
I have an html page where I have a form created in view.py file and forms.py and additionally an ajax code create some input fields.
I would like that when I submit, the input value created from ajax are automatically sent to view.py with post request
How can I do that?
</div><!--column2-->
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="container register-form">
<div class="form">
<div class="note">
<p>INSERIMENTO NUOVA VISITA</p>
</div>
<div class="form-content">
<div class="row">
<div class="col-md-6">
<p>Data</p>
<div class="form-group">
{% render_field visitaForm.data class="form-control" placeholder="data" %}
</div>
<p>Titolo</p>
<div class="form-group">
{% render_field visitaForm.title class="form-control" placeholder="titolo" %}
</div>
</div><!--column1-->
<div class="col-md-6">
<div class="form-group">
<body>
<select class="js-example-basic-single" name="scoreList" id="scoreList" style="width: 200px;">
<optgroup label="Existing scores">
{% for u in scoreList %}
<option value="{{ u.id }}">{{ u.title }}</option>
{% endfor %}
</optgroup>
</select>
</body>
</div>
<div id="score">
<p id="question"></p>
<input id="answer"></input>
</div>
</div>
</div>
<button type="submit" class="btnSubmit">Admit</button>
</div><!--form-content-->
</div><!--row-->
</div><!--form-->
</div><!--container register-form-->
</form>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#scoreList").change(function () {
var pageURL = $(location).attr("href");
const scoreListId = $(this).val(); // get the selected subject ID from the HTML dropdown list
let scoreInput = document.getElementById('score')
scoreInput.innerHTML='';
$.ajax({ // initialize an AJAX request
type: "GET",
url: pageURL,
data: {
'scoreList_id': scoreListId,
'csrfmiddlewaretoken': '{{ csrf_token }}',
},
datatype:'json',
success: function(data){
newRowAdd = '';
let i = 0
data.scoreQuestion.forEach(element => {
i = i + 1
newRowAdd = newRowAdd +
'<p>' + element.domanda + '</p>' +
'<input id="' + 'answer' + String(i) + '" type="text" class="form-control">'
});
$("#score").append(newRowAdd);
}
});
});
});
</script>
many thanks in advance