Jump to content
Sign in to follow this  
Omar~

Obter todos e quaisquer dados de um formulário

Recommended Posts

Bem ao executar um post com AJAX usando jQuery podemos fazer assim:

$.ajax({
    method: 'POST',
    url: httpFile,
    dataType: 'html',
    data: $('form').serialize(),
    success: function (data) {
        $(divName).html(data);
    }
});

httpFile seria o arquivo PHP que vai receber os dados do POST e divName o local(DIV) onde o arquivo será aberto.

Então como faria isso usando javascript puro?

 

Lembrando que se fazer isso com jquery ele envia qualquer coisa em um formulário (input, textarea, select, radio etc....). 

Share this post


Link to post
Share on other sites

Como sempre eu resolvo minhas "gabiarras" ^.^

Como os posts aqui sempre são mostrados nos resultados de sites de pesquisa, e pelo que pesquisei vi que muitos procuram uma forma de executar ajax com javascripts incorporados e não querem usar jQuery. Vou postar minha Class(JS) atualizada já incorporada com a função para formulários.

 

AjaxRequest.js

Spoiler

/**
 * ****************************************************
 * @Copyright (c) 2017, Spell Master.
 * @Version: 2.0
 * @Requisitos: Navegador compatível com HTML 5
 * ****************************************************
 * @class Executa ajax.
 * ****************************************************
 * @changes : 2.0 (spell master)
 *            - Adicionado método para validação de
 *            formulários.
 *            - Corrigido problemas de compatibilidade
 *            com os navegadores da microsoft "IE/EDGE" 
 * ****************************************************
 **/

var AjaxRequest = function () {
    var $httpRequest;
    var $progressBar = document.querySelector('.ajax-progress');
    var $progress = 0;
    var $loadDiv;
    var $scripts;

    // **************************************************//
    // * Public Methods
    // **************************************************//

    /******************************************************
     * @function Method : linkAjax()
     * @param divName (Obrigatório): 
     * DIV.ID onde o arquivo deve ser carregado.
     * @param fromHttp (Obrigatório):
     * Arquivo que deve ser carregado.
     * @param urlReplace (Opcional):
     * Alterar a barra do navegador se executado o AJAX.
     * @param progress (Opcional):
     * Mostrar a barra de progresso.
     * ****************************************************
     * @sample: linkAjax('minha-id', 'arquivo.html');
     ******************************************************/
    this.linkAjax = function (divName, fromHttp, urlReplace, progress) {
        initXMLHR();
        $loadDiv = document.getElementById(divName);
        if (urlReplace) {
            window.history.replaceState(null, null, fromHttp);
        }
        if (progress) {
            $httpRequest.addEventListener('progress', updateProgress, false);
        }
        $httpRequest.onreadystatechange = function () {
            try {
                if (($httpRequest.readyState === 4) && ($httpRequest.status === 200)) {
                    $loadDiv.innerHTML = $httpRequest.responseText;
                    $scripts = unescape($httpRequest.responseText);
                    appendjS($scripts);
                    if (progress) {
                        $progressBar.style.width = '0';
                    }
                }
            } catch (e) {
                $loadDiv.innerHTML = '<div class="font-jumbo align-center margin-top">\n\
                                      Erro ao requisitar arquivo do servidor!</div>';
                if (progress) {
                    $progressBar.style.width = '0';
                }
            }
        };
        $httpRequest.open('GET', fromHttp, true);
        $httpRequest.send();
    };

    /******************************************************
     * @function Method : postAjax()
     * @param divName (Obrigatório): 
     * DIV.ID onde o arquivo deve ser carregado.
     * @param fromHttp (Obrigatório):
     * Arquivo que deve ser carregado.
     * @param formValue (Obrigatório):
     * FORM.ID Que executa a função.
     * @param progress (Opcional):
     * Mostrar a barra de progresso.
     * ****************************************************
     * @sample: postAjax('minha-id', 'post.php', 'form');
     ******************************************************/
    this.postAjax = function (divName, fromHttp, formValue, progress) {
        initXMLHR();
        $loadDiv = document.getElementById(divName);

        var $frm = document.getElementById(formValue);
        var $head = "form_id=" + formValue;
        for (i = 0; i < $frm.elements.length; i++) {
            $frm.elements[i].disabled = true;
            if ($frm.elements[i].type == "checkbox") {
                if ($frm.elements[i].checked) {
                    $frm.elements[i].value = 1;
                } else {
                    $frm.elements[i].value = 0;
                }
            }
            $head += "&" + $frm.elements[i].name + "=" + escape($frm.elements[i].value);
        }
        $httpRequest.open("POST", fromHttp, true);

        if (progress) {
            $httpRequest.addEventListener('progress', updateProgress, false);
        }
        $httpRequest.onreadystatechange = function () {
            try {
                if (($httpRequest.readyState === 4) && ($httpRequest.status === 200)) {
                    for (i = 0; i < $frm.elements.length; i++) {
                        if ($frm.elements[i].type == "checkbox") {
                            $frm.elements[i].checked = false;
                        }
                        if ($frm.elements[i].type == "radio") {
                            $frm.elements[i].checked = false;
                        }
                        if ($frm.elements[i].type == "password") {
                            $frm.elements[i].value = "";
                        }
                        $frm.elements[i].disabled = false;
                    }
                    $loadDiv.innerHTML = $httpRequest.responseText;
                    $scripts = unescape($httpRequest.responseText);
                    appendjS($scripts);
                    if (progress) {
                        $progressBar.style.width = '0';
                    }
                }
            } catch (e) {
                $loadDiv.innerHTML = '<div class="font-jumbo align-center margin-top">\n\
                                      Erro ao requisitar arquivo do servidor!</div>';
                if (progress) {
                    $progressBar.style.width = '0';
                }
            }
        };

        $httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        $httpRequest.setRequestHeader("Content-length", $head.length);
        $httpRequest.setRequestHeader("Connection", "close");
        $httpRequest.send($head);

        return false;
    };

    // **************************************************//
    // * Private Methods
    // **************************************************//

    /******************************************************
     * @function Method : initXMLHR()
     * ****************************************************
     * @data: Inicia o protocolo XMLHTTP
     ******************************************************/
    function initXMLHR() {
        $httpRequest = null;
        if (window.XMLHttpRequest) {
            $httpRequest = new XMLHttpRequest();
            if ($httpRequest.overrideMimeType) {
                $httpRequest.overrideMimeType('text/html');
            }
        } else if (window.ActiveXObject) {
            try {
                $httpRequest = new ActiveXObject('Msxml2.XMLHTTP');
            } catch (e) {
                try {
                    $httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {
                    $httpRequest = true;
                }
            }
        }
    }

    /******************************************************
     * @function Method : updateProgress()
     * ****************************************************
     * @param event : Abstrai o evento iniciado
     * @data : Calcura o status da requisição, e modifica
     *         o barra de progresso com essa relação.
     ******************************************************/
    function updateProgress(event) {
        if (event.lengthComputable) {
            $progress = (event.loaded / event.total) * 100;
            $progressBar.style.width = $progress + '%';
        }
        return true;
    }

    /******************************************************
     * @function Method : appendjS()
     * ****************************************************
     * @param script : Obter os dados de script da página
     * @data : Busca por todos javascripts inseridos na
     *         requisição e incorpora eles ao DOM.
     ******************************************************/
    function appendjS(script) {
        var $src;
        var $endSrc;
        var $newSrc;
        var $stringSrc;
        var $coutSrc;

        $coutSrc = script.indexOf('<script', 0);
        removeOldSrc();

        while ($coutSrc != -1) {
            $newSrc = document.createElement('script');
            $src = script.indexOf(' src', $coutSrc);
            $coutSrc = script.indexOf('>', $coutSrc) + 1;
            if ($src < $coutSrc && $src >= 0) {
                $coutSrc = $src + 4;
                $endSrc = script.indexOf('.', $coutSrc) + 4;
                $stringSrc = script.substring($coutSrc, $endSrc);
                $stringSrc = $stringSrc.replace("=", "").replace(" ", "").replace("\"", "").replace("\"", "").replace("\'", "").replace("\'", "").replace(">", "");
                $newSrc.src = $stringSrc;
            } else {
                $endSrc = script.indexOf('</script>', $coutSrc);
                $stringSrc = script.substring($coutSrc, $endSrc);
                $newSrc.text = $stringSrc;
            }
            $loadDiv.appendChild($newSrc);
            $coutSrc = script.indexOf('<script', $endSrc);
            $newSrc = null;
        }
    }

    /******************************************************
     * @function Method : appendjS()
     * ****************************************************
     * @data: Depois de completado, limpar o DOM removendo
     *        dados entigos de script não funcionais.
     ******************************************************/
    function removeOldSrc() {
        var $oldScript = $loadDiv.getElementsByTagName('script'), cns;
        for (cns = $oldScript.length - 1; cns >= 0; cns--) {
            $oldScript[cns].parentNode.removeChild($oldScript[cns]);
        }
        return;
    }

};

 

 

E um arquivo html para servir de exemplo como utilizar.

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Meu Ajax</title>
        <script src="AjaxRequest.js" type="text/javascript"></script>
        <script type="text/javascript" src="teste.js"></script>
        <style>
            .ajax-progress {
                z-index: 9;
                height: 5px;
                width: 0;
                position: absolute;
                top: 0;
                left: 0;
                background-color: #ff0000;
                border-top: .625rem solid #bb0000;
                border-bottom: .625rem solid #bb0000;
                box-shadow: 0 .2rem .625rem 0 rgba(255,0,0,.5)
            }
        </style>
    </head>
    <body>
        <div class="ajax-progress"></div>
        
        <h1>Ajax Definitivo PURE-JS by: Spell Master</h1>
        <div id="carregar" style="background-color: #c0c0c0; padding: 10px"></div>
        
        
        <h2>Requisição GET</h2>
        <button onclick="ajx.linkAjax('carregar', 'get.php');">Carregar</button>

        <hr />
        <h2>Requisição GET PARSE</h2>
        <button onclick="ajx.linkAjax('carregar', 'get-param.php/?getaction1=data1&getaction2=data2');">?getaction1=data1&getaction2=data2</button>

        <hr />
        <h2>Formulário POST</h2>

        <form method="POST" id="formulario" onsubmit="return ajx.postAjax('carregar', 'post.php', 'formulario');">
            <p>input type="text"
            <input type="text" name="input_text" maxlength="30"/></p>
            <br />
            <p>input type="password"
            <input type="password" name="input_text" maxlength="30"/></p>
            <br />
            <p>textarea
            <textarea name="input_textarea"></textarea></p>
            <br />
            <p>checkbox
            <input type="checkbox" name="input_checkbox"/></p>
            <br />
            <p>Select
            <select name="select_option">
                <option class="option1" value="op1">Opção 1</option>
                <option class="option2" value="op2">Opção 2</option>
            </select></p>
            <br />
            <p><input type="submit" value="Validar Post" /></p>
        </form>

        <script>var ajx = new AjaxRequest();</script>
    </body>
</html>

 

 

E os arquivos de teste do exemplo

Spoiler

get.php


<b>Teste de javascript no arquivo</b>
<button onclick="teste2();">TESTE</button>
<div id="texto"></div>
<script>
    function teste2() {
        document.getElementById('texto').innerHTML = "Função carregada dentro do arquivo que veio no GET";
    }
</script>

get-param.php


<?php
echo ("<pre>");
var_dump($_GET);
echo ("</pre>");

post.php


<?php
echo ("<pre>");
var_dump($_POST);
echo ("</pre>");

 

 

 

Como disse... Nos arquivos que vai abrir pelo ajax pode incorporar qualquer função javascript que seu navegador vai conseguir interpretar, mesmo que seja uma arquivo que será aberto por formulário.

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By fideles
      Mais uma vez venho aqui pedir ajuda a vocês.
       
      Tenho um formulario que criei aqui na empresa algo bem simples, somente para sair das planilhas de excel, que seria cadastro de funcionarios.
       
      Tem os campos, matricula, nome completo, unidade de trabalho, endereço e telefone de emergencia.
       
      A parte do formulario funciona, a gravação no BD tbm, listar as informações também, ai me perguntaram se era possível um auto preenchimento dos campos colocando somente a matricula do funcionario e respondi que eu não sei porque realmente não sei.
       
      A ajuda que eu preciso de vocês seria, é possível fazer isso ? Colocar a matricula e vir do banco e preencher os outros inputs? Se sim, é possível me derem um exemplo de como funciona e eu estudar o codigo e colocar nos outros inputs.
       
      Obrigado antecipadamente. 
       
    • By Authent
      Gente tenho um laço de repetição onde exibi uma lista , nele contem um botão para atualizar o nível desses itens, porem queria que a pagina não desse refresh e ao mesmo tempo enviasse uma msg para o "TD" daquele item atualizado, e utilizei o Ajax que envia no metodo post o id, porem ele está enviando só o ultimo id da lista alguem poderia me ajudar. Abaixo explicarei melhor
       
      while($row = $select->fetch(PDO::FETCH_ASSOC)): ?> <tbody> <tr> <td><?php echo $row['nome'];?></td> <td><?php echo $row['data'];?></td> <td class="contador<?php echo $row['id']; ?>"> <ul class="actions"> <li><a href="" id="<?php echo $row['id'];?>" class="ative btnUpdate"><i class="fas fa-check"></i> Atualizar</a></li> </ul> </td> </tr> </tbody> <form class="ajax_form"> <input type="hidden" class="id" name="id" value="<?=$row['id']?>" /> </form> <?php endwhile; ?> Nesse laço de repetição eu adicionei um td com uma class ID, para que a msg enviada fosse só para aquele td, até ai esta funcionando normal
      e o link que contem o ID = id, e um formulario dentro do while, e o valor do input é o valor do id
       
      <script> $(document).ready(function(){ $("body").delegate('.btnUpdate', 'click', function(e){ e.preventDefault() //Para anular o comportamento padrão do link var dados = $(".ajax_form").serializeArray(); var id = $(this).attr("id"); var contador = id; $.ajax({ url: "action/test.php", type: "POST", data: dados, success: function (resultado) { console.log(resultado); $('.contador'+contador+'').html(resultado); }, error: function (jqXHR, textStatus, errorThrown) { alert(jqXHR) console.log(jqXHR); } }); }) }); </script> e no script do Ajax ele recupera os dados, e enviar uma msg de sucesso para a class .contador+id(nessa parte está funcionando perfeitamente), porem como mencionado o id que está sendo enviado para o arquivo test.php é sempre o ultimo id do meu while alguem poderia me ajudar. se houver outro método estou aceitando também
    • By FabianoSouza
      Pessoal, qual a forma correta de enviar emoji por AJAX ao meu backend?
       
      Tem que usar:
      encodeURIComponent(minhaString) ??
      Quando envio uma string que tem texto junto com emoji,  meu código não funciona.
      Quando envio apenas o emoji, vai um código meio louco para o backend.
       
      Qual a maneira correta de tratar isso?
      Seria separar texto de emoji para enviar, e no backend juntar tudo novamente para poder gravar no banco?
       
      Preciso entender conceitualmente qual é a melhor forma de tratar essa situação, depois partir para a programação.
       
      Já fiz os testes do meu banckend: grava emoji com texto direitinho.
      O problema está realmente no meu frontend. Preciso saber como devo fazer o POST dos dados.
       
      Valew!!
       
       
    • By kaayasinho
      Boa tarde Pessoal tudo bom?
      Durante um tempo eu fui estudante de programação, para web. E esse forum me foi muito util pois aprendi muitas coisas, e tirei muitas duvidas com todos os participantes. Por outro lado não segui a carreira de programado pois tive outras oportunidades.
       
      Em fim, estou com um projeto de criar uma plataforma online para eventos, e estou tentando montar um time chegar nesse objetivo. Por hora ainda estou tentando juntando a equipe necessária para isso acontecer.
       
      Pela pouca experiência que tive na programação, sei que fazer essa plataforma é bem complexa principalmente com as necessidades que vamos englobar, porém o mercado esta escasso de plataformas flexíveis, no sentido de oferecer algumas ferramentas básicas na comunicação. apesar de ja existir algumas plataformas no mercado.
       
      Resumo:
      1-) Procuro por programadores backend com experiência (não sei exatamente informar a linguagem) mas chuto que Java, Javascript e PHP sejam fundamentais. (sei que abusaremos muito do AJAX)
       
      2-) Programador FrontEnd, com experiência. E que tenha principalmente em boas praticas, pois código sujo cheio de plugins tornará a plataforma pesada, e cheia de bugs.
       
      PS: Não procuro nada pronto, claro que plugins coisas são inevitáveis porém para funcionarmos Lisos com menos bugs possíveis procuro algo feito “artesanalmente” rsrs.
       
      Obs: o projeto esta no inicio ainda, estou juntando contatos para chegar no objetivo, e assim que tiver um contato gostaria de poder conversar trocar ideias, caso seja um projeto onde você se identifique nada impede de sermos parceiros ter uma % sobre o negocio.
       
       
      Obs2: Desculpem se escrevi meio enrolado ou esta complicado de entender. pois apenas disse plataforma de eventos e não especifiquei nada. mas assim que receber um contato eu passo mais informações com alguns links de exemplos, que é melhor que falar.
       
      E caso aqui seja o lugar correto posso passar mais informações por aqui também.
       
      Seguem alguns exemplos de plataforma de eventos online.
      Download de 2 PDFs de apresentações do mesmo segmento
       
      Site de uma das plataformas porém proximo do que almejamos
      https://www.swaper.com.br/
       
       
      Fico a disposição,
       
      Desculpem se postei no local incorreto
       
    • By Rafael Castelhano
      Olá, nunca fiz consulta com Ajax e estou quebrando a cabeça para atualizar um campo no Django, tenho um template de funcionário e assim que selecionar a matricula quero que busque via ajax o nome do funcionário, segue no link meus arquivos, se alguém puder ajudar agradeço:
       
      https://gist.github.com/castelhano/dcbdbd6bef0d0012efddae544224a5a5
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.