Multiple checkboxes one submit button in multiple forms

Question

Currently my submit button is only on one object which is because its outside the for loop, therefor it will only do the computation on the bottom file.

However if I put the button back inside the loop it will put a submit button for every row, but it wont be able to do the computation for multiple files, So I'm wondering how do I get one submit button for all the files, so it will do the computation for each file(which ever is currently checked)

(Searched this question before and none of the previously answered questions helped)

HTML File (Partially)

 {% for f in files %}
 <tr>
     <td>{{ f.key }}</td>
     <td>{{ f.last_modified | datetimeformat }}</td>
     <td>{{ f.key | file_type }}</td>
     <td>
         <form class="download-form" action="{{ url_for('myview.action') }}" method="POST">
             <input type="checkbox" name="key" value="{{ f.key }}">
{% endfor %}
             <button type="submit" name="submit" value="submit">Submit</button>
         </form>
     </td>
 </tr>

Python File(Partially)

@expose('/', methods=['POST', 'GET'])
@appbuilder.app.route('/', methods=['POST', 'GET'])
def action(self):

    my_bucket = get_bucket()
    s = my_bucket.objects.all()
    t = getmyobject()

    return render_template(
        'page.html',
        my_bucket=my_bucket,
        base_template=appbuilder.base_template,
        appbuilder=appbuilder,
        page=s, t=t
    )

score 0 · Answer 1 · answered Aug 09 '18 at 08:52

0

If you don't put the button in a form, but after your tabel like this:

{% for f in files %}
 <tr>
     <td>{{ f.key }}</td>
     <td>{{ f.last_modified | datetimeformat }}</td>
     <td>{{ f.key | file_type }}</td>
     <td>
          <input type="checkbox" name="key" value="{{ f.key }}">
     </td>
 </tr>
{% endfor %}
<button type="submit" name="submit" value="submit">Submit</button>

Then you could collect the value of each checked input field with JS and submit them.

To submit you would use an onclick event on the button.

answered Aug 09 '18 at 08:52

schmetz Yannick

31
4

I need this line though so i can connect my code to the button, form class="download-form" action="{{ url_for('myview.action') }}" method="POST"> – Aug 09 '18 at 08:55
If you bind a js function to the onclick Event of the button, you can make the HTTP request inside the function. For exampel with jquery $.get() ore $.post(). – schmetz Yannick Aug 09 '18 at 09:04
is there no other way, i have no idea how to use jquery – Aug 09 '18 at 09:06
You can also make HTTP request without jquery, look at this post: https://stackoverflow.com/questions/247483/http-get-request-in-javascript – schmetz Yannick Aug 09 '18 at 09:11

score 0 · Accepted Answer · answered Aug 09 '18 at 09:18

you have jumbled up the form and for loops, try putting the for loop inside the form tag like this, and add button inside form and after closing of for loop.

 <form class="download-form" action="{{ url_for('myview.action') }}" method="POST">
     {% for f in files %}
         <tr>
             <td>{{ f.key }}</td>
             <td>{{ f.last_modified | datetimeformat }}</td>
             <td>{{ f.key | file_type }}</td>
             <td><input type="checkbox" name="key" value="{{ f.key }}"></td>
         </tr>
    {% endfor %}
    <button type="submit" name="submit" value="submit">Submit</button>
</form>

hope it helps.

Multiple checkboxes one submit button in multiple forms

2 Answers2