how to get html attribute using flask?

Question

I am trying to add a feature to my web which is using an icon, so I have put some icons from font awesome inside a button

<button id="iconDiv1" class="iconBtn" type="button" value="fa-solid fa-heart fa-xl" >
<i class="fa-solid fa-heart fa-2xl" class="icons"></i>
</button>
        <button id="iconDiv2" class="iconBtn" type="button" value="fa-solid fa-gamepad fa-xl">
<i class="fa-solid fa-gamepad fa-2xl" class="icons">
</i></button>
        <button id="iconDiv3" class="iconBtn" type="button" value="fa-solid fa-chess-knight fa-xl">
<i class="fa-solid fa-chess-knight fa-2xl" class="icons"></i>
</button>
        <button id="iconDiv4" class="iconBtn" type="button" value="fa-solid fa-hand-fist fa-xl">
<i class="fa-solid fa-hand-fist fa-2xl" class="icons"></i>
</button>
        <button id="iconDiv5" class="iconBtn" type="button" value="fa-solid fa-mug-hot fa-xl">
<i class="fa-solid fa-mug-hot fa-2xl" class="icons"></i>
</button>

and I've add a name attribute to the selected button/icon using javascripte, now I need to add the button value value="fa-solid fa-heart fa-xl (which is the same icon class inside of it) to a database using flask but I don't know how to get the button value attribute in just flask without using javascripte

I've searched a lot for the answer, but I didn't find anything, and I've also tried to write icon = request.form.get("selected").getattr("value) and it didn't word so I tried to write icon = request.form["selected].__getattribure__("value") in flask but it also didn't word.

Answer 1

Values of input fields and buttons within a form can be obtained using the name attribute. Other attributes cannot be accessed by the server.

So you can use an attribute name for the buttons.

<form method="POST">
    <button name="icon" type="submit" value="heart" >
        <i class="fa-solid fa-heart fa-2xl" class="icons"></i>
    </button>
    <button name="icon" type="submit" value="gamepad">
        <i class="fa-solid fa-gamepad fa-2xl" class="icons"></i>
    </button>
    <button name="icon" type="submit" value="chess-knight">
        <i class="fa-solid fa-chess-knight fa-2xl" class="icons"></i>
    </button>
    <button name="icon" type="submit" value="hand">
        <i class="fa-solid fa-hand-fist fa-2xl" class="icons"></i>
    </button>
    <button name="icon" type="submit" value="mug-hot">
        <i class="fa-solid fa-mug-hot fa-2xl" class="icons"></i>
    </button>
</form>

If the form is sent, the value of the attribute value must be requested based on the name attribute.

@app.route('/example', methods=['GET', 'POST'])
def example():
    if request.method == 'POST':
        value = request.form.get('icon')
        print(value)
    return render_template('example.html')

Answer 2

In case your buttons are not in a form, you could also wrap them in anchor <a> elements and pass the value to your server-route.

index.html

  <a href="{{ url_for('button', value='first') }}">
    <button>First Button</button>
  </a>
  <a href="{{ url_for('button', value='second') }}">
    <button>Second Button</button>
  </a>
  <a href="{{ url_for('button', value='third') }}">
    <button>Third Button</button>
  </a>

app.py

@app.route("/")
def index():
    return render_template("index.html")


@app.route("/button/<value>")
def button(value):
    return f"The button you clicked has the following {value=}!"