Ruby-on-rails – Multiple submit buttons/forms in Rails

formsrubyruby-on-railssubmit

I am trying to write a rails application which lets you go to a certain page, say /person/:id. On this page it shows a set of available resources. I want each resource to have a button next to it, which reserves that resource to that person (by creating a new instance of an Allocation model.) As an extension, I'd like several buttons by each resource, that cancel reservations and do other things. I'd also like to input data alongside some of the buttons, e.g. to allocate some % of a resource.

My problem is I can't work out how to sensibly do this without repeating myself, or having a very hacky controller. How can I do this without matching on the value part of the submit buttons (the text on the buttons), or using any javascript?

Additionally, if you have two forms on a page, how do you set it up so changes on both forms are saved when any submit button is clicked?

Best Answer

im using jQuery, and this is what i did :

<script type="text/javascript">
    $(document).ready(function() {

        $('#bulk_print').click(function(){
            var target = '<%= bulk_print_prepaid_vouchers_path(:format => :pdf) %>';
            $('#prepaidvoucher_bulk_print').attr('action', target);
            $('#prepaidvoucher_bulk_print').submit();
        });

        $('#bulk_destroy').click(function(){
            var target = '<%= bulk_destroy_prepaid_vouchers_path %>';
            $('#prepaidvoucher_bulk_print').attr('action', target);
            $('#prepaidvoucher_bulk_print').submit();
        });

    });
</script>

<% form_tag '#', :method => :post, :id => 'prepaidvoucher_bulk_print' do %>

your form details

<button class="button" type="submit" id="bulk_print">
   <%= image_tag("web-app-theme/printer.png", :alt => "Print Selected Vouchers") %> Print Selected Vouchers
</button>

<button class="button" type="submit" id="bulk_destroy">
    <%= image_tag("web-app-theme/cross.png", :alt => "Delete Selected Vouchers") %> Delete Selected Vouchers
</button>

<% end %>

The idea is to change the form action on the fly, based on which button is clicked

Dynamically create `<input>`s in a form and submit it

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Example:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

Html – Two submit buttons in one form

Solution 1:
Give each input a different value and keep the same name:

<input type="submit" name="action" value="Update" />
<input type="submit" name="action" value="Delete" />

Then in the code check to see which was triggered:

if ($_POST['action'] == 'Update') {
    //action for update here
} else if ($_POST['action'] == 'Delete') {
    //action for delete
} else {
    //invalid action!
}

The problem with that is you tie your logic to the user-visible text within the input.

Solution 2:
Give each one a unique name and check the $_POST for the existence of that input:

<input type="submit" name="update_button" value="Update" />
<input type="submit" name="delete_button" value="Delete" />

And in the code:

if (isset($_POST['update_button'])) {
    //update action
} else if (isset($_POST['delete_button'])) {
    //delete action
} else {
    //no button pressed
}

Best Answer

Related Solutions

JavaScript post request like a form submit

Dynamically create <input>s in a form and submit it

Html – Two submit buttons in one form

Related Topic

Dynamically create `<input>`s in a form and submit it