CODEWITHSUNDEEP
pythonhtmlflask
Beamjim1234
Beamjim1234

Reputation: 23

How to receive a row information from a HTML table to Python Flask

I am developing a simple web front-end with Flask, which displays a table from database, and when an user selects a specific row, the Flask gets the information of a specific column of the selected row.

with the following codes, I display a table with 5 columns of data and one last column of 'submit' button. When the 'submit' button of the specific row, the second column ('Title') information is supposed to be posted back to Flask app.

It works 90%, because when the button is clicked, always the first row information is posted, even if a different row is selected. Could anyone figure what went wrong here?

Thanks!

here is a flask code

@app.route("/", methods=["GET", "POST"])
def home():
    df = pd.read_excel('database.xlsx')
    this_list = df.values.tolist()
    if request.method =="POST":
        if request.form.get('select_song') == 'select':
            print('selected')
            print(request.form.get("title"))
    return render_template('basic_table.html', title='Basic Table',
                           table=this_list)

this is a basic_table.html

<form method="POST">
  <table id="data" class="table table-striped">
    <thead>
      <tr>
        <th>Type</th>
        <th>Title</th>
        <th>Location</th>
        <th>Translation</th>
        <th>Content</th>
        <th>selection</th>
      </tr>
    </thead>
    <tbody>
      {% for row in table %}
        <tr>
          <td>{{ row[0] }}</td>  
          <td><input type="hidden" name="title" value="{{ row[1] }}"> {{ row[1] }}</td>
          <td>{{ row[2] }}</td>
          <td>{{ row[3] }}</td>
          <td>{{ row[4] }}</td>
          <td>
            <input class="form__submit form__input" type="submit" value="select" name="select_song"/>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}
</form>

Upvotes: 2

Views: 6182

Answers (2)

Sneh Singh
Sneh Singh

Reputation: 11

Just replace some lines of code, you can solve it in this is very simple way:

<tr>
  <form action="/" method="post">
    <td>{{row[0]}}</td>
    <td>
      <input type="hidden" name="title" value="{{ row[1] }}"> {{ row[1] }}
    </td>
    <td>
      <input class="form__submit form__input" type="submit" value="Action" name="select_value"/>
    </td>
  </form>
</tr>

Upvotes: 1

NoCommandLine
NoCommandLine

Reputation: 6288

When you click a button whose type is 'submit', it will submit the form attached to that submit button. Submitting the form means it will pass html elements by name/value pair.

In your code, you have ONLY 1 form and each row has the same input element with the name title. Therefore when you submit the form, it will submit the first instance of title

There are 2 possible solutions here

  1. You change your code so that you have a form in each row. This way, when you submit, you are submitting the form for just that row.

  2. You keep your code as is, but add Javascript code to 'intercept' your submit action. Your JS code will then determine which row you clicked, pick the value of the title in that row and manually submit the form with that value.

Upvotes: 1

Related Questions