ti-enxame.com

Como impedir que os botões enviem

Na página seguinte, com o Firefox, o botão Remover envia o formulário, mas o botão Adicionar não. Como evito que o botão remover envie o formulário?

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function addItem() {
  var v = $('form :hidden:last').attr('name');
  var n = /(.*)input/.exec(v);
  var newPrefix;
  if ( n[1].length == 0 ) {
    newPrefix = '1';
  } else {
    newPrefix = parseInt(n[1])+1;
  }
  var oldElem = $('form tr:last');
  var newElem = oldElem.clone(true);
  var lastHidden = $('form :hidden:last');
  lastHidden.val(newPrefix);
  var pat = '=\"'+n[1]+'input';
  newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"'+newPrefix+'input'));
  newElem.appendTo('table');
  $('form :hidden:last').val('');
}
function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    rows[rows.length-1].html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}
</script>
</head>
<body>
<form autocomplete="off" method="post" action="">
<p>Title:<input type="text" /></p>
<button onclick="addItem(); return false;">Add Item</button>
<button onclick="removeItem(); return false;">Remove Last Item</button>
<table>
<th>Name</th>

<tr>
  <td><input type="text" id="input1" name="input1" /></td>
  <td><input type="hidden" id="input2" name="input2" /></td>
</tr>
</table>
<input id="submit" type="submit" name="submit" value="Submit">
</form>
</body>
</html>
784
Khanpo

Você está usando um elemento de botão HTML5. Lembre-se a razão é que este botão tem um comportamento padrão de envio, conforme indicado na especificação W3, como visto aqui: W3C HTML5 Button

Então você precisa especificar seu tipo explicitamente:

<button type="button">Button</button>

para substituir o tipo de envio padrão. Eu só quero apontar a razão pela qual isso acontece =)

=)

1528
Metafaniel

Defina o tipo nos seus botões:

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

... isso os impedirá de acionar uma ação de envio quando ocorrer uma exceção no manipulador de eventos. Em seguida, corrija sua função removeItem() para que não acione uma exceção:

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

Observe a alteração: seu código original extraiu um elemento HTML do conjunto jQuery e tentou chamar um método jQuery nele - isso gerou uma exceção, resultando no comportamento padrão do botão.

FWIW, existe uma outra maneira de fazer isso ... Conecte seus manipuladores de eventos usando jQuery e use o método preventDefault () no evento event do jQuery para cancelar o comportamento padrão antecipadamente:

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

Essa técnica mantém toda a sua lógica em um só lugar, facilitando a depuração ... ela também permite que você implemente um fall-back, alterando a type nos botões de volta para submit e lidando com o servidor de eventos - isso é conhecido como JavaScript não - intrusivo .

573
Shog9

Algum tempo atrás eu precisava de algo muito semelhante ... e eu consegui.

Então, o que eu coloco aqui é como eu faço os truques para ter um formulário capaz de ser submetido por JavaScript sem validar e executar a validação somente quando o usuário pressiona um botão (normalmente um botão de envio).

Para o exemplo, usarei um formulário mínimo, apenas com dois campos e um botão de envio.

Lembre-se do que é desejado: De JavaScript, ele deve ser capaz de ser enviado sem qualquer verificação. No entanto, se o usuário pressionar esse botão, a validação deve ser feita e o formulário enviado somente se passar a validação.

Normalmente, tudo começaria de algo perto disso (eu removi todas as coisas extras não importantes):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

Veja como a tag de formulário não tem onsubmit="..." (lembre-se que era uma condição para não ter).

O problema é que o formulário é sempre enviado, não importa se onclick retorna true ou false.

Se eu alterar type="submit" para type="button", parece funcionar, mas não funciona. Nunca envia o formulário, mas isso pode ser feito facilmente.

Então, finalmente eu usei isso:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

E em function Validator, onde return True; é, também adiciono uma sentença de envio JavaScript, algo semelhante a isto:

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

O id="" é apenas para JavaScript getElementById, o name="" é apenas para que apareça em POST data.

Desta forma, funciona como eu preciso.

Eu coloquei isso apenas para pessoas que não precisam de nenhuma função onsubmit no formulário, mas faça alguma validação quando um botão for pressionado pelo usuário.

Por que não preciso de um onsubmit na tag de formulário? Fácil, em outras partes do JavaScript eu preciso realizar um envio, mas eu não quero que haja qualquer validação.

O motivo: Se o usuário é aquele que realiza o envio, eu quero e preciso que a validação seja feita, mas se for JavaScript, às vezes, preciso executar o envio, enquanto essas validações o evitariam.

Pode soar estranho, mas não ao pensar, por exemplo: em um Login ... com algumas restrições ... como não permitir que sejam usadas PHP sessões e nem cookies são permitidos!

Portanto, qualquer link deve ser convertido em tal envio de formulário, para que os dados de login não sejam perdidos. Quando nenhum login ainda é feito, também deve funcionar. Portanto, nenhuma validação deve ser executada nos links. Mas eu quero apresentar uma mensagem para o usuário se o usuário não entrou nos dois campos, usuário e passe. Então, se um está faltando, o formulário não deve ser enviado! existe o problema.

Veja o problema: o formulário não deve ser enviado quando um campo estiver vazio apenas se o usuário tiver pressionado um botão, se ele for um código JavaScript, ele deve poder ser enviado.

Se eu fizer o trabalho em onsubmit na tag form, precisarei saber se é o usuário ou outro JavaScript. Como nenhum parâmetro pode ser passado, isso não é possível diretamente, então algumas pessoas adicionam uma variável para dizer se a validação deve ser feita ou não. A primeira coisa na função de validação é verificar o valor da variável, etc ... Muito complicado e o código não diz o que é realmente desejado.

Portanto, a solução não é ter submissão na tag de formulário. Insead colocá-lo onde é realmente necessário, no botão.

Para o outro lado, por que colocar o código de submissão, uma vez que conceitualmente não quero validação de submissão. Eu realmente quero validação de botão.

Não só o código é mais claro, é onde deve estar. Basta lembrar isso: - Eu não quero JavaScript para validar o formulário (que deve ser sempre feito por PHP no lado do servidor) - Eu quero mostrar ao usuário uma mensagem dizendo que todos os campos não devem estar vazios , que precisa de JavaScript (lado do cliente)

Então, por que algumas pessoas (pensam ou me dizem) devem ser feitas em uma validação do onsumbit? Não, conceitualmente não estou fazendo uma validação de onsumbit no lado do cliente. Eu estou apenas fazendo algo em um botão, então por que não deixar isso para ser implementado?

Bem, esse código e estilo fazem o truque perfeitamente. Em qualquer JavaScript que eu precise enviar o formulário que acabei de colocar:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

E isso pula a validação quando eu não preciso disso. Apenas envia o formulário e carrega uma página diferente, etc.

Mas se o usuário clicar no botão enviar (também conhecido como type="button" não type="submit") a validação é feita antes de permitir que o formulário seja enviado e, se não for válido, não seja enviado.

Bem, espero que isso ajude os outros a não tentar códigos longos e complicados. Apenas não use onsubmit se não for necessário, e use onclick. Mas lembre-se de alterar type="submit" para type="button" e, por favor, não esqueça de fazer submit() por JavaScript.

28
z666zz666z

Eu concordo com o Shog9, embora eu possa usar:

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

De acordo com w3schools , a tag <button> tem comportamento diferente em diferentes navegadores.

24
poundifdef

Suponha que seu formulário HTML tenha id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

Adicione este snippet jQuery ao seu código para ver o resultado.

$("#form_id").submit(function(){
  return false;
});
17
Prateek Joshi

$("form").submit(function () { return false; }); que impedirá o envio do botão ou você pode apenas alterar o tipo de botão para "button" <input type="button"/> em vez de <input type="submit"/> O que só funcionará se este botão não for o único botão neste formulário.

14
Shiala

Você pode simplesmente obter a referência de seus botões usando jQuery e impedir sua propagação como abaixo:

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
11
Ata Iravani

Este é um erro html5 como foi dito, você ainda pode ter o botão como um envio (se você quiser cobrir os usuários javascript e não javascript) usando-o como:

     <button type="submit" onclick="return false"> Register </button>

Desta forma, você irá cancelar o envio, mas ainda fará o que estiver fazendo na função jquery ou javascript e fará o envio para os usuários que não possuem javascript.

9
sagits

Eu tenho certeza que no FF o

removeItem 

função encontrar um erro de JavaScript, isso não aconteceu no IE

Quando o erro javascript aparecer, o código "return false" não será executado, fazendo com que a página seja postada

7
Alin Vasile

Aqui está uma abordagem simples:

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});
3
axiom82

O retorno false impede o comportamento padrão. mas o retorno falso interrompe o borbulhar de eventos de cliques adicionais. Isso significa que, se houver outras ligações de cliques após essa função ser chamada, as outras não serão consideradas.

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

Ou simplesmente você pode colocar assim

 <button type="submit" onclick="return false"> PostData</button>
2
Sunil Dhappadhule

Defina o seu botão de maneira normal e use event.preventDefault como ..

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }
2
Vishal
return false;

Você pode retornar falso no final da função ou após a chamada de função.

Contanto que seja a última coisa que acontece, o formulário não será enviado.

2
Knickerless-Noggins

O código de exemplo a seguir mostra como evitar que o clique do botão submeta o formulário.

Você pode tentar meu código de exemplo:

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
1
The KNVB

A função removeItem na verdade contém um erro, o que faz com que o botão form faça seu comportamento padrão (enviando o formulário). O console de erro do javascript geralmente dará um ponteiro nesse caso.

Confira a função removeItem na parte de javascript:

A linha:

rows[rows.length-1].html('');

não funciona. Tente isso em vez disso:

rows.eq(rows.length-1).html('');
0
ylebre

Eu não sou capaz de testar isso agora, mas eu acho que você poderia usar o método preventDefault do jQuery.

0
Tyler Rash