2

Tenho um botão que estou usando um link conforme código abaixo:

<button id="avancar" type="submit" disabled="disabled" class="btn-primary">
    <a href="teste.php">Avançar</a>
</button>

Esse botão é desabilitado, caso não seja selecionado nenhuma opção. Não sei se essa é a forma correta, mas ao clicar no botão desabilitado, está avançando para a próxima página.

Como eu devo proceder?
Se eu colocar required no select, não funciona mesmo que eu deixe o option em branco e o value em branco.

jsFiddle: http://jsfiddle.net/9w2zW/

Link do tópico sobre habilitar e desabilitar botão:
Como habilitar e desabilitar botão a partir do onclick ou onchange do select

Obrigado.

11
  • Quer re-carregar a página ou abrir o novo conteudo na mesma página? No segundo caso pode colocar o HTML respectivo?
    – Sergio
    Commented 25/06/2014 às 18:54
  • @Sergio O código completo não coube aqui, então eu fiz esse link. jsfiddle.net/9w2zW Obrigado. Commented 25/06/2014 às 19:04
  • Já que o botão será habilitado por JS, troque o <a> por um <span> e faça a requisição pelo próprio JS, seja AJAX populando algum elemento ou um window.location. Commented 25/06/2014 às 19:04
  • @fabricio_wm, vou volocar o jsFiddle na pergunta (na proxima vez pode clicar em "editar" para melhorar a pergunta com mais informaJão). Entretanto pode responder à minha pergunta no primeiro comentário?
    – Sergio
    Commented 25/06/2014 às 19:06
  • Poxa @Sergio, me desculpe mas eu achei que vc já tinha entendido que é para navegação já que você participou do post anterior. Obrigado. Commented 25/06/2014 às 19:09

1 Resposta 1

2

Aqui fica um exemplo típico de AJAX do jQuery, e o que você precisa:

$("form").submit(function(e){

    e.preventDefault();

    var form_data = $(this).serialize();
    var form_url = $(this).attr("action"); // ou somente teste.php no seu caso
    var form_method = $(this).attr("method").toUpperCase();

    $("#loadingimg").show();

    $.ajax({
        url: form_url, 
        type: form_method,      
        data: form_data,     
        cache: false,
        success: function(returnhtml){  
            $("#loadingimg").hide();                         
            $("#result").html(returnhtml); 
        }           
    });    

});

A primeira parte deste código não tem ainda a ver com o ajax. É um "event handler" que intercepta o momento/evento em que a form é submetida.

O código e.preventDefault(); pára essa ação. O e é o objeto-evento que vai ser parado, ou seja a página não vai recarregar.

As linhas que se seguem são para preparar respectivamente os dados a enviar, o url do lado do servidor, o tipo de método (tipicamente POST ou GET).

A linha $("#loadingimg").show(); é opcional e é para o caso de ter uma imagem, ou texto que queira mostrar enquanto a ligação é feita so para o utilizador saber que está a haver processamento no servidor.

Com a chamada deste método $.ajax({ começa a parte do AJAX.

O ajax é exatamnente para carregar conteudo do servidor sem ter de fazer refresh à página. Aqui os parametros defenidos em variáveis em cima vão ser usados.

A parte talvez mais importante, é success: function(returnhtml){. Aqui é a chamada callback. A função que corre quando o pedido AJAX recebe dados de volta do servidor. O html é passado na variável returnhtml.

Neste exemplo, a primeira linha esconde a imagem que estava a mostrar durante o pedido. A segunda linha é o que você procura, ou seja $("#result").html(returnhtml); que vai inserir o novo conteudo no elemento DOM com a ID result

1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 1/03/2017 às 20:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .