How do I put a delete link within an update form?

I have a remote form for updating a 'Point' model. It's a pretty ordinary form with a submit button.

However, I'd like to also include a 'remove' button beside the 'update' button.

Unfortunately, there is a problem with this. When I click on the 'update' button it ends up deleting the entry - the delete link seems to hijack the update form.

EDIT: I think I know why the update button is deleting. When I add the delete link to the form it adds this input:

<input name="_met开发者_JAVA技巧hod" type="hidden" value="delete">

Regardless of whichever button I press this "_method" param is being picked up!

Now, I know that I can just position the remove button outwith the form element but in this case I'm not allowed to.

I guess the remove button could just be another update submit button, but with an extra :remove_this parameter.

However, something about that doesn't feel right. Any ideas?

Another curious workaround that does not require javascript, is to put the delete-form outside the update-form but leave a <label for="theSubmitButtonInTheDeleteForm"> inside the update form. The update-form will continue to work as expected, but clicking the label will submit the delete-form. Then just style the label as a button.

I would recommend using a link rather than a button and style it like a button:

link_to("Remove", resource_url, method: :delete, class: "delete_button")

In Rails 3 the recommended way to submit forms using Ajax is to use form_for in combination with UJS rather than remote_form_for. Please see this railscasts episode for more info.

Then when the document is ready/loaded, you add a click listener to each of the buttons, and act accordingly:

$('#id_of_delete_button').click(function() {
  // serialize the form and submit it to the delete action
});

$('#id_of_update_button').click(function() {
  // serialize the form and submit it to the update action
});

The given code snippet is in jQuery, but you can use Prototype in a similar way as well.

Basically, the only difference between the 'update form' and a 'delete form' is the presence of <input name="_method" type="hidden" value="delete">

So here's the workaround I came up with:

<%= form.submit 'Update', :id => "point_#{point.id}_submit", :style => "" %>        
<%= form.submit 'Remove', :confirm => 'Are you sure?',  :id => "point_#{point.id}_remove" %>

remove_button.observe('click', function(event)
{       
      form_element.insert('<input name="_method" type="hidden" value="delete">');
}

= f.button :submit, class: "btn-primary"
= link_to "Delete", f.object, class: 'btn btn-default', data: {method: 'DELETE'}

Delete link is styled with Bootstrap to look like a button. jquery-ujs hijacks clicks on links with data-method attribute and sends them with custom HTTP method.

You could do this:

<%= button_to 'Delete', point_path(point), :method => 'delete', :confirm => 'Are you sure?' %>

you would make a link_to 'del', Variable, :confirm => 'Are you sure?', :method => :delete

The :method => :delete will call the destroy part of your controller.