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 asacap1000
      Galera estou com uma dúvida, tenho a parte de envio de dados para em Post, com encode json e curl. Já pesquisei em todos os lugares e não encontrei nada pra clarear as idéias.
       
      a parte final é essa do envio (cliente)
      header("Content-Type: ".$mediaType); $headers = array(); $headers[] = "Accept: ".$mediaType; $headers[] = "Accept-Charset: ".$charSet; $headers[] = "Accept-Encoding: ".$mediaType; $headers[] = "Content-Type: ".$mediaType.";charset=".$charSet; $headers[] = "Authorization: Basic ".$AuthorizationHeaderBase64; $ch = curl_init(); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS,"contatos=$contatos"); #campos que serão enviados curl_setopt($ch, CURLOPT_USERPWD, $AuthorizationHeaderBase64); curl_setopt($ch, CURLOPT_HEADER, $headers); curl_setopt($ch, CURLINFO_HTTP_CODE, true); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);#ativa se for ter retorno do chamada $result = curl_exec($ch); $result2 = json_decode($result,true); curl_close($ch); if($result2 === false) { $err = 'Curl error: ' . curl_error($ch); $result2 = $err; echo "This is text".$err; } var_dump ($result2);  
      Preciso de ajuda para entender como deve ser feito a página que será chamada, no caso lado servidor.
       
      Como pode ver tenho um header configurado e será enviado com chave de autorização agora como isso é feito do lado servidor??
       
      Se alguém puder me ajudar, preciso entregar este webservice sexta feira 18/10. Todos os dados recebidos serão salvos no BD Oracle.
       
       
    • By smashplus
      Olá amigos, sendo breve, apenas gostaria de saber se alguem sabe por onde começo para fazer por exemplo o seguinte:
       
      Existe o usuário 1 e o usuário 2,  quando o usuário 1 insere uma linha no bd, ele manda uma mensagem para o usuário 2, avisando tipo, foi inserido uma linha no bd para o usuário, tipo aqueles popup sabe.
       
      Se alguem puder dar uma luz, tenho noções basicas de php e ajax...
       
      Agradeço se alguem puder dar a direção.
    • By lucasvbl
      <form id="frmDados" name="frmDados" class="form-horizontal" method="post" action="" enctype="multipart/form-data"> <input name="acao" id="acao" type="hidden" value="paginas"> <? if($_idCodigo){ ?> <input name="r" id="r" type="hidden" value="<?=$_idCodigo;?>"> <? } ?> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label class="col-md-2 col-form-label"> Titulo</label> <div class="col-md-10"> <input class="form-control" autocomplete="off" type="text" name="txtDescricao" id="txtDescricao" value="<?=$_rowDados->C02_DESCRICAO;?>"> </div> </div> </div> <? if($_idCodigo){ ?> <div class="col-md-6"> <div class="form-group row"> <label class="col-md-2 col-form-label"> Link</label> <div class="col-md-10"> <input readonly="readonly" class="form-control" type="text" name="txtLink" id="txtLink" value="pagina.php?p=<?=$_rowDados->C01_ID;?>"> </div> </div> </div> <? } ?> </div> <div class="row"> <div class="col-md-12"> <div class="form-group row"> <label class="col-md-12 col-form-label">Conteúdo</label> <div class="col-md-12"> <textarea class="form-control" name="txtConteudo" id="txtConteudo"> <?=$_rowDados->C04_CONTEUDO;?> </textarea> </div> </div> </div> </div> <div class="col-md-12" style="text-align: center;"> <button class="btn btn-oval btn-success" type="button" id="btGravar">Gravar</button> </div> </form> <script type="text/javascript"> $(function () { $("#btGravar").click(function(){ erros = 0; if(!$("#txtDescricao").val()){ mensagem('mensagemDIV', 'danger', 'Preencha o campo <strong>Título para a página</strong>.', 0, 'txtEntidade'); erros = 1; } if(erros > 0){ return; } off("btGravar"); var formData = $("#frmDados").serialize(); $.ajax({ url: "app.php", type: "POST", data: formData, dataType: "json", success: function (retorno) { if(retorno.status == '1'){ tratarRetorno(retorno); } if(retorno.status == '400'){ tratarRetorno(retorno); } on("btGravar"); return; } }).fail(function (jqXHR, textStatus, error) { console.log(jqXHR.responseJSON); }); return; }); }); $(document).ready(function(){ $("#txtTitulo").focus(); }); </script> Estou com um problema num crud utilizando ajax, ele meio que "corrompe a string"... 
      ENVIO ASSIM
       
      ELE SALVA ASSIM
       
      Não estou utilizando nenhum editor nada, num textarea
      ESSE CODIGO
       
       
       
       
    • By opl12
      Olá Mestres,
      Tenho uma página com comando "input Range" .. é uma barra deslizante... conforme deslisa gera um valor.
       
      o problema, 
      não consigo gravar o valor numa variável PHP,
      Segue html:
      <html> <head> <title> ...::: HOME :::... </title> </head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <body> <form method="POST"> <label class="mt-3" for="ciclo">CICLO</label> <input type="range" class="custom-range" value="201901" min="201901" max="201915" step="1" id="ciclo" name="idciclo"> <span>201901</span> </form> <div id="resultado"> </div> <script type="text/javascript"> $("#ciclo").on("change", function(){ var idCiclo = $("#ciclo").val(); $.ajax({ method: "POST", url: "ciclo_inicios.php", data: { 'ciclo': idCiclo }, success: function(retorno){ alert(retorno); } }); }); </script> </body> </html>  
      código php... arquivo "cilo_inicios.php"
      <?php //$valorciclo = isset($_POST['dados']) ? $_POST['dados'] : ''; $valorciclo = $_POST["idciclo"]; echo "$valorciclo"; ?>  
      Sabem o que estou fazendo de errado ?   :/
       
       
       
    • By Dj Del Palmis
      Olá pessoal criei um seguinte script para minha pagina para upload de múltiplas fotos, contudo coloquei um if para caso o campo $_FILES retornar vazio ele retorne uma msg de erro. Porém toda vez mesmo o campo file estando vazio, ele retorna que há algo. Alguém pode me dar uma ajuda no que estou fazendo de errado?
      if(!empty($_FILES["imagens"]) and !empty($_FILES["imagens"]["name"])){ $img_contar = count($_FILES["imagens"]["name"]); $array_img = ""; for ($i = 0; $i < $img_contar; $i++){ $imagens = $_FILES["imagens"]; $new_img = uniqid("img_", $imagens["name"][$i]); $extensao = pathinfo($_FILES["imagens"]["name"][$i], PATHINFO_EXTENSION); move_uploaded_file($imagens["tmp_name"][$i], "upload/".$new_img.".".$extensao); $array_img .= $new_img.".".$extensao.";"; } $insert = mysqli_query($conn, "INSERT INTO itens(codigo, model, nome, imagens, categoria, qnt, marca, preco) VALUES('".$cod."', '".$model."', '".$nome."', '".$array_img."', '".$cat."', '".$qnt."', '".$marca."', '".$preco."');"); if(!$insert){ echo "<center style='color:red' class='men'>O SQL retornou algum erro, tente novamente!</center>"; } else{ echo "<center style='color:green' class='men'>Produto cadastrado com exito!</center>"; } } else{ $insert = mysqli_query($conn, "INSERT INTO itens(codigo, model, nome, categoria, qnt, marca, preco) VALUES('".$cod."', '".$model."', '".$nome."', '".$cat."', '".$qnt."', '".$marca."', '".$preco."');"); if(!$insert){ echo "<center style='color:red' class='men'>O SQL retornou algum erro, tente novamente!</center>"; } else{ echo "<center style='color:green' class='men'>Produto cadastrado com exito!</center>"; } }  
×

Important Information

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