htmlflaskautocompleteflask-wtforms

Auto complete Flask wtforms


I want to auto-update my total amount field using quantity and item price? is there any way to do it using a flask without javascript? I want the total amount to be updated while typing quantity and item price.

class ItemForm(FlaskForm):
    item = StringField('Item')
    quantity = IntegerField('Quantity')
    item_price = IntegerField('Item Price')
    class Meta:
        csrf = False

class CustomerForm(FlaskForm):
    costumer_name=StringField('Customer Name: ')
    item_detail = FieldList(FormField(ItemForm), min_entries=1)
    add_item = SubmitField(label='Add Item')
    remove_item = SubmitField(label='Remove Item')
    total_amount=IntegerField('Total Amount')
    paid_amount=IntegerField('Paid Amount')
    submit=SubmitField('Submit')
    proceed=SubmitField('Proceed')

@app.route('/customer',methods=['GET','POST'])
@login_required
def costumer():
    form=CustomerForm()
    if form.add_item.data:
        form.item_detail.append_entry()
        return render_template('customer.html', form=form)
    if form.remove_item.data:
        form.item_detail.pop_entry()
        return render_template('customer.html', form=form)
    if form.validate_on_submit():
        item=breakdown(form.item_detail.data)[0]
        quantity=breakdown(form.item_detail.data)[1]
        item_price=breakdown(form.item_detail.data)[2]
        amount=breakdown(form.item_detail.data)[3]
        total_amount=breakdown(form.item_detail.data)[4]
        remaning_amount=total_amount-form.paid_amount.data
        sales=Customer(admin_id=current_user.id,item_id=item,
                       customer_name=form.customer_name.data,quantity=quantity,
                            item_price=item_price,amount=amount,total_amount=total_amount,
                            paid_amount=form.paid_amount.data,remaining_amount=remaining_amount)
        db.session.add(sales)
        db.session.commit()
        return redirect(url_for('salesvoucher'))
    return render_template('customer.html',form=form)

customer.html:

<div class="container col-9 "> 
    <br>
    <br> 
    <br>
    <div class="jumbotron">
        <h1 class="text-center", style="text-decoration-color: lightseagreen;">Sales</h1>

        <form method="POST" class="form-group">
            {{form.hidden_tag()}}
            <div class="form-group ">
                {{form.customer_name.label}}{{form.customer_name(class='form-control input-group-ig',placeholder='Customer Name')}}
            </div>
            <fieldset>
                <table class="table table-bordered table-sm table-striped">
                    <thead class="thead-dark">
                        <tr >
                            <div class="row" >
                                <div class=" form-control text-center col-4 " style="background-color: rgb(99, 95, 95); color: blanchedalmond;" scope="col">Item</div>
                                <div class=" form-control text-center col-4" style="background-color: rgb(99, 95, 95); color: blanchedalmond;" scope="col">Quantity</div>
                                <div class=" form-control text-center col-4"  style="background-color: rgb(99, 95, 95); color: blanchedalmond;" scope="col">Item Price</div>
                            </div>
                        </tr>
                    </thead>
                    <tbody>
                        {% for field in form.item_detail %}
                        <tr class="row ">
                            {% for f in field%}
                            <td class="text-center form-group col-4"> {{ f(class='form-control') }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                
                <div class="form-group">{{ form.add_item(class='btn btn-primary') }} {{ form.remove_item(class='btn btn-danger') }}</div>
                    
                {{form.proceed(class='btn btn-primary')}}
            </form>
        </div>
    </div>

Solution

  • no way. even when you're updating in only on the frontend, you must use javascript.