Das Formular wird gesendet, wenn ich auf den Button im Formular klicke. Wie vermeide ich das?

Nutze ich twitter boostrap und ich möchte die diese radio-buttons in meine form.
Das problem ist, wenn ich klicken Sie auf einen dieser buttons, wird das Formular sofort abgeschickt.
Wie um dies zu vermeiden? Ich will einfach nur die Standard-Tasten wie radio-buttons.

aus:

<%= 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();

InformationsquelleAutor der Frage evfwcqcg | 2012-03-10

  1. 133

    Aus der feinen HTML5-Spezifikation:

    Einen Taste - element ohne Typ - Attribut angegeben ist steht das gleiche wie ein button-element mit type-Attribut auf "submit".

    Und ein <button type="submit"> das Formular absendet, anstatt sich wie eine einfache <button type="button">-push-button.

    Den HTML4-Spezifikation sagt das gleiche:

    type = submit|button|reset [CI]

    Dieses Attribut deklariert den Typ der Schaltfläche. Mögliche Werte:

    • submit: Erzeugt eine Absenden-Schaltfläche. Dies ist der Standardwert.
    • reset: Erzeugt eine zurücksetzen-Schaltfläche.
    • button: Erzeugt einen push-button.

    Damit Ihre <button> Elemente:

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

    sind die gleichen wie diese (in konformen Browsern):

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

    und jede Zeit, die Sie auf eine dieser Schaltflächen werden Sie das Formular Absenden.

    Die Lösung ist die Verwendung von einfachen Schaltflächen:

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

    Einige Versionen des IE standardmäßig type="button" trotz allem, was der standard sagt. Sie sollten immer geben Sie die type Attribut bei Verwendung eines <button> nur um sicher zu sein, dass Sie das Verhalten, das Sie erwarten.

    InformationsquelleAutor der Antwort mu is too short

  2. 0

    Können Sie preventDefault() für diese

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

    oder Sie können Sie aktualisieren Sie Ihre html mit folgendem code (nur hinzufügen type="button") im 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 %>

    InformationsquelleAutor der Antwort Super User

Schreibe einen Kommentar