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 sirrocha
      Olá pessoal, sou iniciante só que tenho um projeto com uma certa pressão de tempo pra fazer. Um dos problemas que estou tendo é relacionado ao clicar em um tipo "a href" e aplicar uma função. Pelo que vi, tenho que usar AJAX mas não tenho nenhuma noção de como iniciar, mesmo vendo muitos vídeos...

      Basicamente tenho uma página onde está carregando algumas sessões. Porém, ao clicar neste botão:
       
      1 <p><a class="link" name="final" id="fin" onclick="finalizar()" href="areaUsuario.php" style="text-decoration:none;">finalizar</a></p>

      Estava tentando chamar uma função do tipo finalizar(), que iria dar UNSET em duas sessões específicas que eu precisava desligar (por isso não posso usar o destroy para tirar todas).
       
      1 2 3 4 5 6 7 8 9 <script type="text/javascript">>     <?php     function finalizar() {         unset($_SESSION['prestacao']);         unset($_SESSION['nomeproj']);         header("location:areaUsuario.php");     }     ?> </script>

      O que eu fiz e falaram que estava errado era isso. Como posso usar o AJAX neste caso para desligar essas duas funções e enviar o usuário para a área inicial? Por favor, se possível, enviar uma base de como poderia fazer com o raciocínio. É algo urgente, mas também gostaria de aprender.
    • By DinhoPHP
      Pessoal, tenho um código PHP que busca imagens em subpastas, porém gostaria de fazê-lo com que fosse carregado aos poucos pois são muitas fotos, tentei de ns maneiras entender o AJAX, mas não tive sucesso. Favor! Peço ajuda.
       
      loadAjax.php
      $dir = new DirectoryIterator( './images/portfolio/sem_categoria' ); // array contendo os diretórios permitidos $diretoriosPermitidos = array("portfolio","sem_categoria"); foreach($dir as $file) { // verifica se $file é diferente de '.' ou '..' if (!$file->isDot()) { // listando somente os diretórios if ( $file->isDir() ) { // atribui o nome do diretório a variável $dirName = $file->getFilename(); // subdiretórios $caminho = $file->getPathname(); // chamada da função de recursividade recursivo($caminho, $dirName); } // listando somente os arquivos do diretório if ( $file->isFile() ) { // atribui o nome do arquivo a variável $fileName = $file->getFilename(); // print //echo "Arquivos: ".$fileName."<br>"; } } } function recursivo( $caminho, $dirName ){ global $dirName; $DI = new DirectoryIterator( $caminho ); foreach ($DI as $file){ if (!$file->isDot()) { if ( $file->isFile() ) { // $fileName = $file->getFilename(); // //echo $dirName.": ".$fileName."<br>"; echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''> <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'> <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'> </a> </div>"; } } } } Tentei adaptar o código abaixo as minhas necessidades, mas não consegui.
      <script> //variavel para controle de registros retornados var pagina = 0; var pesquisa = true; //function carrega function carrega(){ $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast'); $.ajax({ type: "POST", url: "loadAjax.php", data: "page="+pagina,//variavel passada via post cache: false, success: function(html){ if(html){ $('#loading').fadeOut('fast'); $("#result").append(html); //mostra resultado na div result pesquisa = true; }else{ $('#loading').html("Fim da pesquisa...").fadeIn('fast'); pesquisa = false; } }, error:function(html){ $('#loading').html("erro...").fadeIn('fast'); } }); }; //chama minha funcao ao carregar a pagina $(document).ready(function(){ carrega(); }); //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando //minha function carrega novamente para trazer mais dados dinamicamente $(window).scroll(function(){ if($(window).scrollTop() + $(window).height() >= $(document).height()){ pagina += 1; carrega(); }; }); </script>  
    • By mamotinho
      Olá, estou tentando enviar a url que corresponde a imagem porém não é possivel enviar essa url pois ela é muito grande, teria alguma maneira de eu conseguir fazer esse envio sem perde muito o sentido. já rodei a internet toda mais não conseguir resolver a questão.
      segua abaixo o exemplo
       
      function photo(idx){ var character = idx; (async () => { const { value: file } = await Swal.fire({ input: 'file', inputAttributes: { accept: 'image/*', 'aria-label': 'Selecione sua imagem' } }) if (file) { const reader = new FileReader() reader.onload = (e) => { var mystring = e.target.result; var encodedString = btoa(mystring); //alert(encodedString); //código que envia os dados. new Ajax.Updater('carfunc', 'pag/request/user/swal.php?Idx='+character+'&form=6&image='+encodedString, {method: 'get', asynchronous:true, evalScripts:true}); carregando('#carfunc'); } reader.readAsDataURL(file) } })() }  
       
      Aqui é a chamada da função:
       
      <div class="skillBlock"> <div class="skillBlock-block"> <div class="skillBlock-img"> <img src="images/skill_5.jpg" alt=""> <span class="m-number">3</span> </div> <div class="skillBlock-info" style="cursor:pointer;" onclick="javascript:photo('<?=soNumero(antSQL(anti_injection(htmlspecialchars($rowsCharacter->CharacterIdx))))?>')"> <p>Adicionar Emblema</p> adicione emblema de guild </div> </div> Algum especialista do coração bom poderia me tirar esse sufoco.
    • By andremergueluiz
      Mandei uma imagem em anexo pra entender
       
      Alguém pode me ajudar como posso fazer um script que vai  pegar o id de cada produto ir no banco de dados e atualizar o campos visualizações vendas concretizadas isso de modo automatico sem que eu precise ficar clicando em atualizar a pagina

    • By DinhoPHP
      Estou tentando enviar um anexo e o mesmo não chega no email, apenas quando não faço uso da função attach.
      arquivo que contém as functions responsáveis pelo envio do email.
      public function attach(string $filePath, string $fileName): Email{ $this->data->attach[$filePath] = $fileName; return $this; } Arquivo que utiliza a função attach.
      No arquivo que captura os dados do formulário, já passei os parâmetros de tudo quanto é jeito.
      require __DIR__ . "/include/head.php"; require __DIR__ . "/vendor/autoload.php"; use Source\Support\Email; $email = new Email(); // CAPTURANDO DADOS DO FORMULÁRIO $nome = trim(ucwords(preg_replace('/\s\s+/', ' ',($_POST['nome-curriculo'])))); $eemail = trim(strtolower(preg_replace('/\s\s+/', ' ',($_POST['email-curriculo'])))); $telefone = trim(preg_replace('/\s\s+/', ' ',($_POST['telefone-curriculo']))); $cidade = trim(preg_replace('/\s\s+/', ' ',($_POST['cidade-curriculo']))); $assunto = trim(preg_replace('/\s\s+/', ' ',($_POST['assunto-curriculo']))); $mensagem = trim(preg_replace('/\s\s+/', ' ',("<pre>".$_POST['mensagem-curriculo']."</pre>"))); // $file_tmp = ($_FILES['file'], $_POST['name']); $files = $_FILES['curriculo']; $email->add($assunto, "<h3>Nome: {$nome}<br>{$files['name']}<br>Email: {$eemail}<br><br>Telefone: {$telefone}<br><br>Cidade: {$cidade}<br><br></br>Mensagem:<br>{$mensagem}</h3>", $nome, $eemail)->attach($files['tmp_name'], $files['name'])->send(); var_dump($files); A função attach que recebe dois parâmetros, quando utilizada, não envia o anexo vindo do form HTML, já digitando os parâmetros na função, ela envia o anexo. Já li até alguns casos semelhantes aqui mesmo e nada! Só envia o anexo digitando os parâmetros manualmente. 
×

Important Information

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