3

Preciso saber qual a maneira correta para quando eu enviar um formulário um único script resolva, o código abaixo só funciona seu eu criar um script para cada formulário. Como resolvo isso?

Exemplo: $("#meuform") ... $("#meuform2") ... $("#meuform3"), etc.

    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title> teste </title>
    <meta name="" content="" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".resultado").hide();
            $("#meuform").ajaxForm({
                target: '.resultado',
                success: function(retorno){
                     $(".resultado").html(retorno);
                     $(".resultado").show();
                     $("#meuform").resetForm();
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".resultado").hide();
            $("#meuform2").ajaxForm({
                target: '.resultado',
                success: function(retorno){
                     $(".resultado").html(retorno);
                     $(".resultado").show();
                     $("#meuform2").resetForm();
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".resultado").hide();
            $("#meuform3").ajaxForm({
                target: '.resultado',
                success: function(retorno){
                     $(".resultado").html(retorno);
                     $(".resultado").show();
                     $("#meuform3").resetForm();
                }
            });
        });
    </script>
    </head>
    <body>
    <div class="resultado"> aqui é o reultado</div>
    <div class="formulario">
        <form method="POST" action="processafrm.php?var=10" id="meuform">
            nome:<br />
            <input type="text" name="nome" size="50" /><br />
            Email:<br />
            <input type="text" name="email" size="50" /><br />
            <input type="submit" name="enviar" value="Enivar dados" />
        </form>
    </div>
    <div class="formulario">
        <form method="POST" action="processafrm.php?var=10" id="meuform2">
            nome:<br />
            <input type="text" name="nome" size="50" /><br />
            Email:<br />
            <input type="text" name="email" size="50" /><br />
            <input type="submit" name="enviar" value="Enivar dados" />
        </form>
    </div>
    <div class="formulario">
        <form method="POST" action="processafrm.php?var=10" id="meuform3">
            nome:<br />
            <input type="text" name="nome" size="50" /><br />
            Email:<br />
            <input type="text" name="email" size="50" /><br />
            <input type="submit" name="enviar" value="Enivar dados" />
        </form>
    </div>
    </body>
    </html>

3 Respostas 3

3

Use o pseudo-selector para selecionar ID's começadas com meuform (^=) ou até somente $('form').

    $(document).ready(function() {
        $(".resultado").hide();
        $("form[id^=meuform]").ajaxForm({      // ou somente $('form').ajaxForm({
            target: '.resultado',

O problema que resta para resolver é:
como apontar para o this dentro da função success?

Aqui têm duas opções:

- não usar este plugin

Usar o jQuery .ajax() que tem basicamente a mesma funcionalidade, e que neste caso teria uma sintaxe:

$(document).ready(function (e) {
    $('form').submit(function (e) {
        var self = $(this);
        e.preventDefault();
        var form_data = self.serialize();
        var form_url = self.attr("action");
        var form_method = self.attr("method").toUpperCase();
        var self = this;
        $.ajax({
            url: form_url,
            type: form_method,
            data: form_data,
            success: function (retorno) {
                $(".resultado").html(retorno);
                $(".resultado").show();
                self.resetForm();      // aqui é onde resolve o problema
            }
        });
    });
});

- encontrar o this

Se bem me lembro esse plugin passa o elemento form como um dos parametros da função. Faça um log da palavra reservada arguments para vêr todos os parâmetros da função success, julgo que o 4o é o form.

        success: function (retorno) {
            console.log(arguments);
        }

Se encontrar, pode usar assim:

        success: function (retorno, status, xhr, form) {
            $(".resultado").html(retorno);
            $(".resultado").show();
            form.resetForm();      // ou talvez $(form) no caso do elemento não vir encapsulado
        }

Se eu estiver errado nesse quarto paâmetro envie pf o link para a documentação desse .ajaxForm

1
  • 1
    Código funcionou perfeitamente e solucionou por completo a questão só fiz uma pequena alteração para dar o reset no form onde era self.resetForm(); ficou assim $(self).resetForm(); Commented 5/06/2014 às 0:16
3

Uma solução interessante é criar uma função "genérica" que funciona para qualquer form com qualquer campos.

Exemplo:

function enviaForm(seletor) {
    var form = $(seletor),
        campos = new Object();

    form.on('submit', function (e) {
        //bloqueia o envio do form, para tratarmos dele aqui dentro
        e.preventDefault();

        //recolhe todos os inputs, desde que não sejam do tipo submit
        $(this).children('input:not([type="submit"])').each(function (i, el) {
            campos[el.name] = el.value;
        });

        //Com os dados todos computados, você faria o AJAX aqui
        $.post('minha-url-post',campos,function(resposta){
            //...
        });

        //limpa o objeto campos para rodar novamente caso necessário
        campos = new Object();
    });
}

Exemplo de como chamar a função:

enviaForm('.minhas-forms');

Para ver ao vivo: FIDDLE

O que esse código faz é basicamente gerar um Object() com todos os dados de um determinado formulário sempre que você der submit nele. Com esses dados já no objeto você pode fazer qualquer coisa, no seu caso, enviar via AJAX.


Nota:

Vale lembrar que este tipo de envio genérico por si só (assim como qualquer código client-side) não oferece segurança real contra pessoas má intencionadas. É altamente recomendável (para não dizer obrigatório) que se faça uma validação dos campos no lado servidor.

Uma boa implementação seria realizar uma validação em JavaScript com mensagens amigáveis para o usuário comum, e no lado servidor realizar a validação contra algum ataque, tratando esta requisição de forma diferente (como por exemplo gravar num log a data e o IP de quem fez a requisição, etc), já que, se o usuário chegou até ali com dados inválidos foi porque ele burlou o JavaScript intencionalmente e muito provavelmente está tentando uma invasão.

1

Você pode utilizar o $.each, referenciando cada form com this:

$(document).ready(function() {

    $('form').each(function(){ //para cada form, execute as ações abaixo

           $(this).closest(".resultado").hide(); 
     //como você deve ter vários .closest, selecionamos o mais próximo do form atual

           targetSel = '#'+$(this).attr('id')+' .resultado';
     //criando um novo seletor de alvo, pois o anterior selecionava todos os .resultado da página

           $(this).ajaxForm({
                target: targetSel,
                success: function(retorno){

                     $(this).closest(".resultado").html(retorno);
                     $(this).closest(".resultado").show();
                     $(this).resetForm();
                }
            });
       });

});

JQuery each
JQuery closest

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 .