Two HTML buttons but first button is always sent

Question

For some reason I've been struggling with this, I've made all sorts of attempts and searched a bunch of answers but nothing seems to be working correctly.

Question: There are two buttons on a page that hit two separate endpoints (flask-admin), however the first button (Save button) is always submitted regardless of which button I select. How do I prevent the first button (Save) from executing when I hit the second button (Edit)? What am I doing wrong here?

Note: I would prefer to do this with HTML alone. If there is an answer already out there that I haven't seen I will happily delete this question -- I landed on my current implementation from this answer: Two submit buttons in one form. I just need a little help because I've spent a whole day on this already. Thank you!

Edit: Please please please NO PHP. Thanks :)

 <h3> Backtest ID: {{ backtestID }} </h3>
 <div class="row">

     <div class="col-md-1" >
         <form method="post">
             <button type="submit" class="btn btn-success" 
                     formaction="{{ url_for('results.save_backtest', id=backtestID) }}">Save</button>
         </form>
     </div>

     <div class="col-md-1" >
         <form method="post">
             <button type="submit" class="btn btn-info" 
                     formaction="{{ url_for('results.rerun_backtest', id=backtestID) }}">Run</button>
         </form>
     </div>

 </div>

@lost_in_magento I suppose Javascript is OK. Like, in-line javascript? I'd prefer to use HTML alone. Is that not possible? When it give them `type="button"` then nothing happens on the button clicks. — mrp, Oct 21 '21 at 13:52
After changing it to button you need write a click handler and what ever you're doing in foraction you have to handle it there — lost_in_magento, Oct 21 '21 at 13:56
Ah, so that's where the in-line javascript would come into play? I wouldn't be opposed to that I suppose. that would go in `onClick=`? — mrp, Oct 21 '21 at 13:58

score 1 · Answer 1 · answered Oct 21 '21 at 13:57

1

Delete the type="submit" attribute. This attribute let's the form send.

 <h3> Backtest ID: {{ backtestID }} </h3>
 <div class="row">

     <div class="col-md-1" >
         <form method="post">
             <button class="btn btn-success" 
                     formaction="{{ url_for('results.save_backtest', id=backtestID) }}">Save</button>
         </form>
     </div>

     <div class="col-md-1" >
         <form method="post">
             <button class="btn btn-info" 
                     formaction="{{ url_for('results.rerun_backtest', id=backtestID) }}">Run</button>
         </form>
     </div>

 </div>

answered Oct 21 '21 at 13:57

Aaron Junker

127
1
14

Unbelievable. Yes this works. Would you have any insight as to _why_ this works? – mrp Oct 21 '21 at 14:02
Actually, this doesn't work. Now the second button is only firing. This makes no sense. – mrp Oct 21 '21 at 23:25
I ended up using input tags instead of button tags and used one endpoint instead of multiple. Where the one endpoint uses conditional IF statements to find which input was submitted. – mrp Oct 26 '21 at 12:59

Two HTML buttons but first button is always sent

1 Answers1