[FIXED] Using JavaScript to Update the Value of a DecimalRangeField in FlaskWTForm

Issue

I have a FlaskWTForm that uses DecimalRangeFields. This is the code in Python:

class DummyForm(FlaskForm):
    field1 = DecimalRangeField('field1', [validators.DataRequired(), validators.NumberRange(min=0, max=5)], default=0) 

I'm trying to implement a button on the front end which changes the value of the DecimalRangeField. This is the basic html:

  <p>{{ dummyform.field1.label }}: <span><output for="field1" id="field1">{{ dummyform.field1.data }}</span></output></p>
  {{ dummyform.field1(step=0.1, oninput="outputUpdate(value, 'field1')") }}

  <button onclick="autoFill(3.0)">3</button>

I'm trying to add the functionality in JS. here's the javascript:

function autoFill(option) {
        document.getElementById("myForm").reset();
        document.getElementById('field1').value = option;

    }

Although this changes the value (in terms of the number displayed) that appears on the front end, it does not change the value on the slider itself. Also, when submitting the form, it does not use this updated value. All help is appreciated!

Solution

Here is what you have to do,

Assign an id to the flask form field from within jinja like this,

{{ dummyform.field1(step=0.1, oninput="outputUpdate(value, 'field1')", id="field1") }}

Afterwards, you can use javascript or jquery to get the flask form field from id and update its value.

$('#field1').val("The value you want to enter in the field")

Or

document.getElementById('field1').value = "The value you want to enter in the field";

Answered By - Harris Minhas