Multiple Buttons on a Form

Two submit buttons in one form

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

Multiple submit buttons on HTML form – designate one button as default

My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

with:

#buttons { overflow: hidden; }
#buttons input { float: right; }

will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.

This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.

Multiple submit buttons in an HTML form

I'm just doing the trick of floating the buttons to the right.

This way the Prev button is left of the Next button, but the Next comes first in the HTML structure:

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

How can I build multiple submit buttons django form?

You can use self.data in the clean_email method to access the POST data before validation. It should contain a key called newsletter_sub or newsletter_unsub depending on which button was pressed.

# in the context of a django.forms form

def clean(self):
    if 'newsletter_sub' in self.data:
        # do subscribe
    elif 'newsletter_unsub' in self.data:
        # do unsubscribe

use many submit buttons in the same form

It won't work the way you've written it. Only the submit button you send will be included in request.form, you'll get an error if you try to use the name of one of the other buttons.

Also, request.form.get is a function, not a dictionary. You can use request.form.get("Histogram") -- this will return the value of the Histogram button if it was used, otherwise it will return None.

Instead of giving the buttons different names, use the same name but different values.

<form id="package_form" action="" method="post">
      <div class="panel-body">
          <input type ="submit" name="action" value="Download">
      </div>
      <div class="panel-body">
          <input type ="submit" name="action" value="Histogram">
      </div>
      <div class="panel-body">
          <input type ="submit" name="action" value="Search">
      </div>

 </form>

Then your Python code can be:

if request.form['action'] == 'Download':
    ...
elif request.form['action'] == 'Histogram':
    ...
elif request.form['action'] == 'Search':
    ...
else:
    ... // Report bad parameter

Multiple buttons in one form

You can try setting the two buttons position to relative and then move the elements:

Request button:

{
  position: relative;
  top: -132px;
}

Availability and reservation button:

{
  position: relative;
  top: 103px;
}

OR using flex!

#booking-dates { // form element
  display: flex;
  flex-direction: column;
}

.enabled-book-button { // request button
  order: -1;
}

Call different methods for form with multiple buttons using Vue

Just remove the handler from form submit event and keep it like <form action="#" @submit.prevent=""> because the handler submit is called by the button click event and the form submit event

then pass the action name as parameter as you did :

  <form action="#" @submit.prevent="">
  <div class="col-md-8 offset-md-4">
          <button type="submit" @click="submit('delete')" class="btn btn-danger marginme" >Delete</button>
          <button type="submit" @click="submit('update')" class="btn btn-primary">Update</button>
  </div>

How do I create multiple submit buttons for the same form in Rails?

You can create multiple submit buttons and provide a different value to each:

<% form_for(something) do |f| %>
    ..
    <%= f.submit 'A' %>
    <%= f.submit 'B' %>
    ..
<% end %>

This will output:

<input type="submit" value="A" id=".." name="commit" />
<input type="submit" value="B" id=".." name="commit" />

Inside your controller, the submitted button's value will be identified by the parameter commit. Check the value to do the required processing:

def <controller action>
    if params[:commit] == 'A'
        # A was pressed 
    elsif params[:commit] == 'B'
        # B was pressed
    end
end

However, remember that this tightly couples your view to the controller which may not be very desirable.

---

Related Topics