Posso fazer com que um <button> não envie um formulário?

516

Eu tenho um formulário, com 2 botões

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

Também uso o botão da interface do usuário do jQuery, simplesmente assim

$('button').button();

No entanto, o primeiro botão também envia o formulário. Eu teria pensado que, se não tivesse type="submit", não teria.

Obviamente, eu poderia fazer isso

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

Mas existe uma maneira de impedir que esse botão voltar envie o formulário sem a intervenção do JavaScript?

Para ser sincero, usei apenas um botão para poder estilizá-lo com a interface do usuário do jQuery. Tentei ligar button()no link e ele não funcionou como esperado (parecia bastante feio!).

alex
fonte
Possível duplicado do botão HTML para não enviar o formulário
just.another.programmer
2
use <button type="button">para aquele que não envia o formulário e <input type="submit">para o outro. Em seguida, pegá-lo com jquery$('#formID').submit(function(e){});
Airwavezx

Respostas:

1131

O valor padrão para o typeatributo de buttonelementos é "enviar". Configure-o para type="button"produzir um botão que não envie o formulário.

<button type="button">Submit</button>

Nas palavras do padrão HTML : "Não faz nada".

Josh Lee
fonte
14
De acordo com a w3schools, isso não é verdade para o IE .
R0MANARMY
53
Essa é apenas uma escolha de design chocantemente ruim.
Oct
Uau, você e alex estavam realmente brigando nas revisões. Não vejo por que vocês se importam com aspas ou não em um atributo.
ADJenks
228

O buttonelemento tem um tipo padrão de submit.

Você pode fazer com que ele não faça nada definindo um tipo de button:

<button type="button">Cancel changes</button>
s4y
fonte
1
@ B.ClayShannon Na verdade não. Você pode usar o código do servidor para retornar a mesma página quando o botão for clicado, mas ele ainda será recarregado. Por fim, o botão faz parte do documento e, portanto, as únicas maneiras de informar ao navegador como você deseja que ele atue são HTML e JavaScript.
S4y
17

Basta usar o bom e velho HTML:

<input type="button" value="Submit" />

Embrulhe-o como o assunto de um link, se desejar:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

Ou, se você decidir que o javascript fornece outras funcionalidades:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
Jeffrey Blake
fonte
7
O uso de um controle de botão padrão com o atributo de tipo adequado é "bom e velho html" e cria uma marcação muito mais simples.
R0MANARMY
Claramente, não é mais simples se em alguns navegadores ele tem um tipo padrão de envio e, em outros, um tipo padrão de botão. Heck, mesmo apenas tendo o tipo padrão de envio complica as coisas mais do que o IMO necessário. Deve haver uma marcação que forneça facilmente um botão que não faça nada. E existe:<input type="button" />
Jeffrey Blake
+1 Eu usei essa técnica exata várias vezes e sempre funcionou bem para mim. Uma variante é se você precisar cancelar o evento de postagem para um botão do lado do servidor com base em algum cálculo do lado do cliente, incluindo window.event.returnValue = false; em seu código que executa no lado do cliente onclick evento para o botão ... isto é, se estiver usando um controle validador personalizado não cortar a mostarda para você :)
Adam McKee
1
@ JGB146: Só porque nem todos os navegadores assumem o mesmo valor não significa que eles não respeitarão o tipo correto se ele for definido manualmente (como sugerido por jleedev. Sem mencionar as perguntas, especificamente, é possível encontrar uma maneira de fazê-lo sem JavaScript , enquanto sua resposta não levar isso em conta.
R0MANARMY
11
@ JGB146: Buttoné um contêiner em HTML. Isso permite que você coloque coisas como imagens ou tabelas (não sei por que você faria isso, mas você poderia) etc, enquanto inputnão suporta isso. Há uma diferença entre os dois, e cada um tem seu caso de uso apropriado.
R0MANARMY
6
<form onsubmit="return false;">
   ...
</form>
zzjove
fonte
5

Honestamente, eu gosto das outras respostas. Fácil e sem necessidade de entrar no JS. Mas notei que você estava perguntando sobre o jQuery. Portanto, por uma questão de integridade, no jQuery, se você retornar false com o manipulador .click (), isso negará a ação padrão do widget.

Veja aqui um exemplo (e mais brindes também). Aqui está a documentação também .

em poucas palavras, com seu código de exemplo, faça o seguinte:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

Como um benefício adicional, com isso, você pode se livrar da marca de âncora e apenas usar o botão

TCCV
fonte
Curiosamente, a adição e.preventDefault()não faz nada para interromper o envio (onde começa function(e)).
Sablefoste
1

Sem definir o typeatributo, você também pode retornar falsedo seu OnClickmanipulador e declarar o onclickatributo como onclick="return onBtnClick(event)".

DennisVM-D2i
fonte
0

Sim, você pode fazer um botão não enviar um formulário adicionando um atributo do tipo de botão de valor: <button type="button"><button>

githaiga geoffrey
fonte
-2
  <form class="form-horizontal" method="post">
        <div class="control-group">

            <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
        </div>
        <div class="control-group">
            <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
        </div>
        <div class="control-group">
            <input type="text" class="span1" name="unit" id="inputPassword" required>
        </div>
            <div class="control-group">
            <label class="control-label" for="inputPassword">Semester</label>
            <div class="controls">
                <select name="semester">
                    <option></option>
                    <option>1st</option>
                    <option>2nd</option>
                </select>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="inputPassword">Deskripsi</label>
            <div class="controls">
                    <textarea name="description" id="ckeditor_full"></textarea>
 <script>CKEDITOR.replace('ckeditor_full');</script>
            </div>
        </div>



        <div class="control-group">
        <div class="controls">

        <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
        </div>
        </div>
        </form>

        <?php
        if (isset($_POST['save'])){
        $subject_code = $_POST['subject_code'];
        $title = $_POST['title'];
        $unit = $_POST['unit'];
        $description = $_POST['description'];
        $semester = $_POST['semester'];


        $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
        $count = mysql_num_rows($query);

        if ($count > 0){ ?>
        <script>
        alert('Data Sudah Ada');
        </script>
        <?php
        }else{
        mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());


        mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());


        ?>
        <script>
        window.location = "subjects.php";
        </script>
        <?php
        }
        }

        ?>
Andrew
fonte