Ir para conteúdo
Entre para seguir isso  
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....). 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

  • Conteúdo Similar

    • Por emersonandree
      <script type="text/javascript"> $(document).ready(function(){ $('#btn_busca_f').click(function () { var data_ini = $('#data_ini').val(); var data_fim = $('#data_fim').val(); var cod_recurso = $('#cod_recurso').val(); var cod_funcionario = $('#cod_funcionario').val(); var num_op = $('#num_op').val(); $.ajax({ type: 'post', async: false, url: '/intranet/ExportaFimApontamento', data:{ '_token': '{{csrf_token()}}', 'data_ini': data_ini, 'data_fim': data_fim, 'cod_recurso': cod_recurso, 'cod_funcionario': cod_funcionario, 'num_op': num_op }, erro: function () { alert('erro'); }, success: function (data) { return (data); alert('Excel Gerado com Sucesso!'); } }); }); }); </script> este script executa uma função no controller onde ele gera um arquivo excel.xls, porem se eu executar a função direto no controler ele funciona, se eu executar com o script ele funciona mas nao gera o arquivo.xls alguem sabe como posso fazer para que ele baixe o arquivo la na função?
    • Por Andersonografia
      Gostaria de agradecer o topico do Tonga (topic/436039-resolvido refresh/) pois me esclareceu a criar um método prático para certificar se o form vem do botão ou do F5.
      Vou esclarecer também que só tenho essa necessidade quando o primeiro form do documento é um input, porque na maioria dos meus casos sempre é um search.  
       
      No Value do botão eu coloco o time:
      <button type="submit" name="carga" class="button" value="<?PHP echo $time;?>"> Coloco a condição se estiver setado e se for diferente da sessão:
      if(isset($_POST['carga'])) { $compara = ($_POST['carga']); if($compara != $_SESSION['compara']) { E depois do insert, ainda dentro da condição eu gravo a variável na sessão:
      $_SESSION['compara'] = $compara; Obrigado mais uma vez ao Tonga e ao Forum. Se alguém souber de um método mais prático, por gentileza será muito útil divulgar!!!!
    • Por michelmir
      Olá a todos.
       
      Tenho um formulário que esta inserido em um código Bootstrap Modal. Quando os valores são inseridos nos campos input, o Ajax script passa esses valores para um arquivo php e retorna com um alert de sucesso. O que ocorre é que somente o alert aparece, porém quando clica no botão OK deste alerta o Modal não fecha. Abaixo segue o código do popup Modal e o script Ajax:
      <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal"></button> <!-- Modal --> <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" >Adicionar dados</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="usersform" method="post"> <input type="text" name="nome" id="nome"/> <input type="email" name="email" id="email"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCELAR</button> <button type="submit" class="btn btn-success" id="submit" >ADD USER</button> </form> </div> </div> </div> </div> E abaixo segue o Ajax script ao qual faz a passagem dos valores input para o arquivo insert.php que no caso funciona corretamente inserindo os dados no banco de dados:
      <script> $(document).on('submit', '#usersform', function(event){ event.preventDefault(); $.ajax({ url:"insert.php", method:'POST', data:new FormData(this), contentType:false, processData:false, success:function(data){ alert("Cadastro realizado com sucesso!"); $("#usersform")[0].reset(); $("#dataModal").modal('hide'); } }); }); </script> O que ocorre é que o popup Modal não fecha apesar do código $("#dataModal").modal('hide'); estar após o alert e nem "zera" os campos após o resultado de sucesso. Os dados são inseridos normalmente após clicar no "ok" da tela de mensagem do alert. O que pode ser? Obrigado.
    • Por Soneca_BO
      Boa tarde Pessoal!
       
      Estou a um bom tempo tetando fazer um CRUD em um banco de dados não tradicional e sim do "Cognos tm1",
       
      Estou fazendo uma aplicação WEB e queria usar o Ajax com jquery e javascript(dependendo do caso) para fazer um CRUD
      salvando dados deletando e fazendo as devidas atualizações, mas não estou conseguindo fazer o "PUT" e nem o "DELETE", 
      E não faço ideia de como começar a escrever o código para os métodos informados acima.
       
      Segue código criado para fazer o GET (só conseguir fazer o GET)
      $.ajax({ username: 'admin', password: ' ', url: "http://localhost:8881/api/v1/Cubes('ACO.200.Despesas')/Views('visao')/tm1.Execute?$expand=Cube($select=Name;$expand=Dimensions($select=Name)),Axes($expand=Tuples($expand=Members($select=Name;$expand=Element($select=UniqueName)))),Cells", method: 'POST', headers: { "Authorization": "Basic YWRtaW46", "cache-control": "no-cache", }, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { console.log(data); }, error: function () { alert("erro"); } });  
       
      Obs.: não sou muito bom em rest e estou buscando aprender mais sobre ele, se alguém poder me ajudar agradeceria muito.
       
      Desde já agradeço alguém que conseguir me da uma força.
       
    • Por gsinhorini
      Olá! Bom dia pessoal tudo bem?
      Estou com uma dúvida, estou fazendo um requerimento em Ajax para pegar algumas informações e preencher alguns campos até ai tudo bem. A minha dúvida é o seguinte eu preciso fazer uma validação em um select como eu posso fazer isso.
      Eu criei um variável output que recebe as informações e monta o html, tenho que fazer a validação dentro do output. Vou colocar o código. 
      Muito obrigado pela atenção.
      $('#btn_problema').on('click', function () { var codigo_sac = $(this).attr('data-codigo'); console.log(codigo_sac); $.ajax({ type: "GET", url:'buscarProblema?codigo='+codigo_sac, dataType: "html", async:false, success: function (data) { console.log(data); var dados = JSON.parse(data); output = ""; $('#descricao-problema').val(dados.descricao); $('#Etapa02_codigo_sac').val(dados.codigo_sac); if (dados["debitos"] != null) { $.each(dados.debitos, function (i, item) { if (item.tipo == 1) { output += '<div class="col-md-12"><div class="col-md-2"><div class="form-group text-center"><label class="control-label">Tipo<!-- <span class="required"> * </span> --></label><div class=""><select class="form-control select2me" disabled><option value="">Selecione...</option><option value="1" selected > Débitos </option></select></div></div></div><div class="col-md-3"><div class="form-group text-center"><label class="control-label uppercase">Descrição:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="text" class="form-control text-center" value="'+item.descricao+'" /></div></div></div></div><div class="col-md-3"><div class="form-group text-center"><label class="control-label uppercase">Data:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="date" class="form-control text-center" value="'+item.data+'" /></div></div></div></div><div class="col-md-2"><div class="form-group text-center"><label class="control-label uppercase">Valor:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="text" class="form-control text-center" name="" id="" value="R$ '+item.valor+'" /></div></div></div></div><div class="col-md-2"><div class="form-group text-center"><label class="control-label">Ação<span class="required"> * </span></label><div class=""><select class="form-control select2me acao_debitos" data-codigo="item.codigo"><option value="">Selecione...</option><option value="1"> Sim </option><option value="2"> Não </option></select></div></div></div></div>'; } if (item.tipo == 2) { output += '<div class="col-md-12"><div class="col-md-2"><div class="form-group text-center"><label class="control-label">Tipo<!-- <span class="required"> * </span> --></label><div class=""><select class="form-control select2me" disabled><option value="">Selecione...</option><option value="2" selected > Multa </option></select></div></div></div> <div class="col-md-3"><div class="form-group text-center"><label class="control-label uppercase">Data:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="date" class="form-control text-center" value="'+item.data+'" /></div></div></div></div><div class="col-md-2"><div class="form-group text-center"><label class="control-label uppercase">Valor:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="text" class="form-control text-center" name="" id="" value="'+item.valor+'" /></div></div></div></div><div class="col-md-3"><div class="form-group text-center"><label class="control-label uppercase">AIT:<!-- <span class="required"> * </span> --></label><div class=""><div class=""><input readonly type="text" class="form-control text-center" value="RS'+item.ait+'" /></div></div></div></div><div class="col-md-2"><div class="form-group text-center"><label class="control-label">Aprovação<span class="required"> * </span></label><div class=""><select class="form-control select2me acao_debitos" data-codigo="item.codigo"><option value="">Selecione...</option><option value="1"> Sim </option><option value="2"> Não </option></select></div></div></div></div>'; } $("#problema-debitos").html(output); $("#problema-debitos").trigger('chosen:updated'); }); } } }); });  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.