Below is the form structure I am working with:
class ExcipientForm(ModelForm):
class Meta:
model = Excipient
fields = (
"Excipient_type",
"Excipient_concentration",
)
widgets = {
'Excipient_type': Select(attrs={
'style' : 'width:100%;',
'class' : 'dropdowns',
}),
'Excipient_concentration': TextInput(attrs={
'class': 'slider',
'type': 'number',
'value':"20",
'max':"100",
'step': "0.1",
'id':"excipient_concentration"
}
)
}
ExcipientFormSet = inlineformset_factory(
Parameters,
Excipient,
ExcipientForm,
can_delete=False,
min_num=1,
extra=0
)
Here is how the template should look like to post to the form:
<form action="" id="form-container" method="POST"> {% csrf_token %} <div class='row'>
<div class='col'>
<label for="id_API_batch_number" class="form-label">API batch number : </label>
</div>
<div class='col'>
{{ parameter_form.API_batch_number }}
</div>
</div>
<hr class="my-4">
<div class='excipient-form'>
{{ excipient_form }}
{{excipient_form.id.auto_id}}
<input type="range" class="slider" name="slidervalue" value='20' max="100" step="0.1" onchange="updateTextInputRange(this.value);">
</div>
<button id="add-form" type="button">Add Excipient</button>
<hr class="my-4">
<label for="num6" class="form-label">Total Concentration: </label>
{{ parameter_form.Total_concentration }}
<br></br>
<input type="submit" id="submit" class="btn btn-primary" value="Submit">
</form>
I am attempting to synchronize the sliders and their corresponding number fields.
https://i.sstatic.net/sW2pu.png
As of now, this is the JavaScript function I have:
//Update Textbox value from slider value
function updateTextInputRange(val) {
document.getElementByID('excipient_concentration').value = val; // text input
//checkValueSum();
}
Here are some approaches I have tried:
- Identifying the ID for each instance of the slider and number input, but all instances share the same ID.
- Using multiple widgets in the same form, which resulted in the html element taking on the properties of the final widget.
- Adding another field in the model and using it as a slider in the forms widget, but this does not allow me to synchronize the slider and number values without making a server call.
Any suggestions on how to achieve this synchronization?