How to get html attributes like class of a html element in python flask

I found an alternative on my own today: I assigned the value to an invisible textarea, so that we can access it when using flask.

Codes are like following: HTML:

<form method="post" action="{{ url_for('main') }}" id="form">
  <div class="form-group">
    <textarea name="hidden" class="form-control" style="display: none;" value="" id="hidden"></textarea> 
  </div>
  <input type="submit" value="Confirm" onclick="Assign()" align="center">
</form>
<script>
function Assign()
{
  document.getElementById("hidden").value = "some values";
}

Python:

@app.route('/', methods=['GET', 'POST'])
def main():
    if request.method == 'POST':
            value_you_want = request.form['hidden']

Solution No (2): Get the class of each card image

In this solution, the class of visa,mastercard and amex will be passed by POST method upon submitting the form via input fields visa_class,mster_card_class and amex_class respectively. These fields will be created upon submitting.

This is done by adding the following javascript/Jquery to the end of the HTML file before {% endblock content %}. An event on submitting the form will be added, after finishing rendering the whole page. I assume that there is only one form in the HTML, otherwise, form-id should be used.

<script>
    $(document).ready(function() {

        $("form").submit( function(eventObj) {

          $("<input />").attr("type", "hidden")
              .attr("name", "visa_class")
              .attr("value", $("#visa").attr('class'))
              .appendTo("form");

          $("<input />").attr("type", "hidden")
              .attr("name", "mster_card_class")
              .attr("value", $("#mastercard").attr('class'))
              .appendTo("form");

          $("<input />").attr("type", "hidden")
              .attr("name", "amex_class")
              .attr("value", $("#amex").attr('class'))
              .appendTo("form");

          return true;
        });
    })
</script>

THen classes values is obtained in checkout() as follows:

@app.route("/checkout", methods=['POST'])
def checkout():
    if request.method == 'POST':
        visa_class = request.form['visa_class']
        mster_card_class = request.form['mster_card_class']
        visa_amex_classclass = request.form['amex_class']
    else:
        visa_class = None # not yet
        mster_card_class = None
        visa_amex_classclass = None

Solution No (1): Identify Card Type in python

Here, I suggest another way to achieve your target, which is obvious from your words:

I want to verify that in my routes

This target is identification the card type

also, we find in the question:

if I enter VISA card details, the class name of the images "mastercard" and "amex" will change to transparent.

This mentions that in the HTML file there is a javascript event that takes care of identification the card type. This event is responsible for making only the correct card-type image appeared.

So, If we follow the same approach of that javascript event in python, we can check the card type from the card details, from a search on the Internet we find these piece of information[1]:

The first digit is different for each card network:

Visa cards – Begin with a 4 and have 13 or 16 digits

Mastercard cards – Begin with a 5 and has 16 digits***

American Express cards – Begin with a 3, followed by a 4 or a 7 has 15 digits

so in your python code, we can identify the card type from card number with a code like the following:

@app.route("/checkout", methods=['POST'])
def checkout():
    if request.method == 'POST':
        cardNumber= request.form['cardNumber']
        if cardNumber[0]=='4'and len(cardNumber) in (13,16):
            card_type='visa'
        elif cardNumber[0]=='5' and len(cardNumber)=16:
            card_type='mastercard'
        elif cardNumber[:1] in ('34','37') and len(cardNumber)=15:
            card_type='amex'
        else:
            card_type= None

        if card_type is None:
            '''
            taks some action
            ''''

It is so easy to verify the method if you check the javascript event related to the card type identification. Hence, you can make both Python and Javascript are identical, with no need to check the class.

Good Luck.

If u want to pass the “class” HTML attribute, u have to use class_='' since “class” is a reserved keyword in Python.

{{ form.searchCity(size=20, class_='searchCity') }}  

Documentation is available at :

http://wtforms.readthedocs.io/en/latest/crash_course.html#rendering-fields

However, the real power comes from rendering the field with its call() method. By calling the field, you can provide keyword arguments, which will be injected as html attributes in the output:

form.content(style="width: 200px;", class_="bar")

<input class="bar" id="content" name="content" style="width: 200px;" type="text" value="foobar" />'