ti-enxame.com

Evitar que o botão enviar com o evento onclick envie

Quero impedir que um botão de envio com o evento onclick envie:

$j('form#userForm .button').click(function(e) {
    if ($j("#Zip_field").val() > 1000){
        $j('form#userForm .button').attr('onclick','').unbind('click');
        alert('Sorry we leveren alleen inomstreken hijen!');
        e.preventDefault();
        return false;
    }
});

Este é o botão de envio:

<button class="button vm-button-correct" type="submit"
 onclick="javascript:return myValidator(userForm, 'savecartuser');">Opslaan</button>

Ele mostrará a função "alerta" e também removerá o evento onclick, mas o formulário será enviado assim mesmo. Remover manualmente o evento onclick antes de enviar resolverá o problema. No entanto, esta é a funcionalidade principal e eu não quero removê-lo.

EDITAR:

É definitivamente causado pelo seletor onclick. Como posso forçar meu script jQuery a recarregar instantaneamente o evento onclick? adicionando antes código jquery: $j('form#userForm .button').attr('onclick',''); resolverá problema .. no entanto a minha validação não funcionará mais ...

10
Coen Ponsen

Você precisará adicionar o evento como um parâmetro:

$j('form#userForm .button').click(function(event) { // <- goes here !
    if ( parseInt($j("#Zip_field").val(), 10) > 1000){
        event.preventDefault();
        $j('form#userForm .button').attr('onclick','').unbind('click');
        alert('Sorry we leveren alleen inomstreken hijen!');
    }   
});

Além disso, val() sempre retorna uma string, então uma boa prática seria convertê-lo em um número antes de compará-lo a um número, e não tenho certeza se você está realmente direcionando todos os elementos .button dentro de #userForm dentro da função ou se você deveria usar this em vez disso?

Se você estiver usando o jQuery 1.7+, você deve considerar usar on() e off() para isso.

22
adeneo

Basicamente, se você alterar o tipo de botão de type="submit" para type="button", esse botão não enviará o formulário e nenhuma solução alternativa será necessária.

Espero que isto ajude. 

13
lxgreen

Não esqueça que existem argumentos de função/evento, mas você deve especificar os parâmetros:

$("#thing").click(function(e) {
  e.preventDefault();
});

Dessa forma, a submissão é interrompida e você pode condicioná-la.

1
Grant Thomas

A melhor maneira é fazer tudo dentro do seu manipulador de eventos de envio do formulário. Remova o onclick inline e execute-o dentro da função submit

$j('#userForm').submit(function(e) {
    if (+$j("#Zip_field").val() > 1000){
        alert('Sorry we leveren alleen inomstreken hijen!');
        return false;
    }
    return myValidator(userForm, 'savecartuser');
});
0
ᾠῗᵲᄐᶌ