El formulario se envía cuando hago clic en el botón del formulario. ¿Cómo evitar esto?

I use twitter-boostrap and I'd like to use these radio-buttons in my form. The problem is when I click on any of these buttons, the form is immediately submitted. How to avoid this? I just want to use default buttons like radio-buttons.

desde:

<%= form_for @product do |f| %>
    <div class="control-group">
      <%= f.label :type, :class => 'control-label' %>

      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn">Button_1</button>
          <button class="btn">Button_2</button>
        </div>
      </div>

    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
<% end %>

JavaScript:

// application.js
$('.tabs').button();

preguntado el 10 de marzo de 12 a las 03:03

A little late, but what helped me was Event Object's preventDefault() Method. algo como $('.btn').onClick(function(evt){evt.preventDefault();}); -

3 Respuestas

De la multa Especificación HTML5:

A . elemento sin tipo attribute specified represents the same thing as a button element with its type attribute set to "entregar".

Y un <button type="submit"> submits the form rather than behaving like a simple <button type="button"> presionar el botón.

El Especificación HTML4 dice lo mismo:

type = submit|button|reset [CI]
This attribute declares the type of the button. Possible values:

  • submit: Creates a submit button. This is the default value.
  • reset: Creates a reset button.
  • button: Creates a push button.

Entonces tus <button> elementos:

<button class="btn">Button_1</button>
<button class="btn">Button_2</button>

are the same as these (in compliant browsers):

<button type="submit" class="btn">Button_1</button>
<button type="submit" class="btn">Button_2</button>

and any time you hit one of those buttons you'll submit your form.

The solution is to use plain buttons:

<button type="button" class="btn">Button_1</button>
<button type="button" class="btn">Button_2</button>

Some versions of IE default to type="button" despite what the standard says. You should always specify the type attribute when using a <button> just to be sure that you will get the behavior you're expecting.

Respondido 13 Feb 19, 18:02

Wow. Awesome catch. This one got me. - SENCILLO

Nice, I was having so much trouble stopping every button in my ROR forms from submitting to the create action. Thanks so much for clearing this up. - Aaron

Wow, so much time wasted :( - netero

@Abdul The time wasn't wasted if it taught you to always include the type atributo en tu <button>s. - mu es demasiado corto

@muistooshort you're correct about that, as well as gaining knowledge on the many other things I saw while looking stuff up - netero

Puede usar el preventDefault() para esto

$('.btn').onClick(function(e){
  e.preventDefault();
});

or you can update your html with following code (just add type="button") in button tag

<%= form_for @product do |f| %>
    <div class="control-group">
      <%= f.label :type, :class => 'control-label' %>

      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn" type="button">Button_1</button>
          <button class="btn" type="button">Button_2</button>
        </div>
      </div>

    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
<% end %>

contestado el 08 de mayo de 17 a las 13:05

You can do this directly using rails form helper also by specifying type as an option to "button":

<%= form_for @product do |f| %>
    <div class="control-group">
      <%= f.label :type, :class => 'control-label' %>

      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <%= f.button "Button_1", type: "button", class: "btn" %>
          <%= f.button "Button_2", type: "button", class: "btn" %>
        </div>
      </div>

    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
<% end %>

Respondido el 04 de Septiembre de 19 a las 10:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.