javascript function not working after form validation stops

Viewed 255

when the page is loaded, the javascript function is working properly but if the validation fails then we get the same page but this time javascript function is not working at all. the role of my javascript function is to show a form field if 'under' or 'above' is selected from a dropdown. my form validates if you fill the title field and do not select 'under' or 'above' but if you have selected one of them then the form does not validate until you fill that javascript generated field. the question is why my javascript function is not working when validation fails?

here is my javascript function.

<script>
          let price_select_val = document.getElementById('price_select');
          price_select_val.onchange = function(){
           execute();
           }
          function execute() {

          choice = price_select_val.value;
          if (choice != 'F' ){
             document.getElementById('s-price').style.display = "block";
             document.getElementById('r-price').style.display = "block";

           } else if(choice == 'F'){
           document.getElementById('s-price').style.display = "none";
           document.getElementById('r-price').style.display = "none";
           }
           }
      </script>

and here is my find.html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #p-price{
                }
        #s-price{
                 display:none
                 }
        #r-price{
                 display:block
                }
    </style>
    <meta charset="UTF-8" http-equiv="refresh" >
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>welcome to Search product</title>
</head>
<body>
      <h1>
          SEARCH PRODUCT
      </h1>
      <form action = "" method = "post" novalidate name="my">
          {{form.hidden_tag()}}
          <p>
               {{form.brand.label}}<br>
              {{form.brand()}}
          </p>
          <p>
              {{form.item.label}}<br>
              {{form.item()}}

              {% for error in form.item.errors %}
              <span style="color:red">{{error}}</span>
              {% endfor %}
          </p>
          {{form.price_select()}}
          {% if form.price_select.data == 'F' %}
               <div id="s-price">
                   {{form.price()}}
                   {% for error in form.price_select.errors %}
                   <span style="color:red">{{error}}</span>
                   {% endfor %}
          </div>
          {% else %}
              <div id="r-price">
                   {{form.price()}}
               {% for error in form.price_select.errors %}
                   <span style="color:red">{{error}}</span>
                   {% endfor %}
           {% endif %}
          <p>
              {{form.search()}}
          </p>
      </form>

i am building this on flask python. here is my form class and my custom validator.

def myvalidation(form,field):
    a = form.price_select.data != 'F'
    b = field.data is None
    print(a,b)
    if a and b:
        field.errors += (ValidationError("Email already registered"),)
        raise StopValidation()

class search_item(FlaskForm):
    brand = StringField('product brand',validators = [optional()])
    item = StringField('product title', validators=[DataRequired()])
    price_select = SelectField('under or above', choices=[('F','under or above'),('D','under'),('E','above')], default = 'F')
    price = IntegerField(validators=[myvalidation, optional()])
    search = SubmitField('search')

here is my flask route

@app.route('/',methods = ['GET', 'POST'])

@app.route('/given', methods = ['GET','POST'])

def given():
    form = search_item()
    if form.validate_on_submit():
        session.clear()
        print(form.price_select.data)
        print(form.price.data,'yo')
        session['comp'] = re.sub("[^a-z0-9 ]+", '', form.brand.data.strip().lower())
        session['product'] = re.sub("[^a-z0-9 ]+", '', form.item.data.strip().lower())
        return redirect(url_for('result'))
    return render_template('find.html' , form = form)

0 Answers
Related