0

Preciso enviar os dados de um formulário para outra página. No momento estou usando Jquery e AJAX, mas preciso passar para JS puro. Já vi outras postagens parecidas, mas não consegui fazer o XMLHttpRequest funcionar.

O site que estou trabalhando é um e-commerce com vários produtos, onde cada produto tem um formulário com um botão rápido para adicionar itens ao carrinho (exemplo abaixo):

inserir a descrição da imagem aqui

Meu FORM:

<form class="formsCarrinho" method="post" data-app="product.buy-form" data-id="{{ product.id }}" action="/loja/carrinho.php?loja=686651&amp;acao=incluir&amp;IdProd={{ product.id }}" onsubmit="notRefresh(this)">
      <button class="botaoAddCarrinho" type="submit" data-tray-tst="button_buy_product"><span class="botao-commerce-img">Adicionar ao carrinho</span></button>
      <div class="divQntd">
           <span id="product-form-box" data-url-form="/mvc/store/product/variant_form/?loja=686651" class="qntdCarrinho"><div data-app="product.quantity" id="quantidade"><label class="color">Quantidade: <input name="quant" class="text" size="1" type="text" value="1" max="{{ product.stock }}" maxlength="5" oninput="seeMaxInput(this)"></label><span id="estoque_variacao"> / {{ product.stock }}</span></div><div data-app="product.buy-button" id="bt_comprar" class="remove-bg" align="left"></div></span>
           <div class="btnsQntd">
                <button type="button" class="btnQntd minus">-</button>
                <button type="button" class="btnQntd pluss">+</button>
           </div>
      </div>
</form>

Meu AJAX (funcionando)

$(".formsCarrinho").on("submit", function(e){
    e.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: 'POST',
        data: $(this).serialize()
    });
});

Na tentativa de fazer o XMLHttpRequest, coloquei um onsubmit no form chamando essa função. O que eu tentei até agora (sem muito sucesso):

function notRefresh(el){
    el.preventDefault();
    var request = new XMLHttpRequest();
    request.open('POST', el.getAttribute("action"), true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send();
}

Estou um pouco perdido e agradeço desde já! (Caso precisem de mais alguma parte do código, vou tentar mandar sem comprometer possíveis dados sensíveis).

4
  • e qual é o erro/problema? seu código parece certo, apenas para confirmar, a url está correta (el.getAttribute("action"))? use o método onreadystatechange para ver as respostas e detectar problemas 22/02/2021 às 19:07
  • @RicardoPontual esse é o problema: não dá nenhum erro, está redirecionando para a página no action do form. Fui utilizar o onreadystatechange, mas não tenho muito conhecimento sobre. Logo após o request.open, coloquei esse código:request.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) alert("foi!"); else alert("nop, não foi."); }; Mas não funcionou, não recebo o alert pois ele redireciona
    – leandrofw
    22/02/2021 às 20:09
  • @RicardoPontual sim, o el.getAttribute("action") está correto
    – leandrofw
    22/02/2021 às 20:17
  • Sua url do action me parece GET, mas o ajax está fazendo post, o outro lado carrinho.php espera o que? Tente tirar os parametros da url, passe um parametro (ajax = true), use o post no ajax e também receba post no carrinho.php, logo no incicio, (if ($_POST['ajax']) {die("teste");}), deixe a aba de network no developer do browser ativa, execute e acompanhe a requisição, quais parametros foram enviadas? o que foi recebido no response? Se o type do request estiver confuso pode acontecer da requisição passar direto e a página inteira ser executada no response, isso pode causar redirecionamentos.
    – Covii
    26/02/2021 às 17:43

1 Resposta 1

-1

Você não está passando o formulário na requisição que está fazendo

function notRefresh(el){
    el.preventDefault();
    var request = new XMLHttpRequest();
    request.open('POST', el.getAttribute("action"), true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(el.target);
}

Uma sujestão é você utilizar o fetch() no lugar do XMLHttpRequest:

fetch(url, {params})
.then(response=> JSON.parse(response))

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 .