I can’t send that form via Ajax!

Question

Hello I have this form code in case the person wants to help my project:

    <form id="my-form" action="envia.php" method="POST">
                <label for="fname"><i class="fa fa-user"></i> Nome</label>
                <input type="text" id="fname" name="firstname" placeholder="seu nome e sobrenome">
                <label for="email"><i class="fa fa-envelope"></i> Email</label>
                <input type="text" id="email" name="email" placeholder="[email protected]">
                <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
                <input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
                <label for="city"><i class="fa fa-institution"></i> City</label>
                <input type="text" id="city" name="city" placeholder="New York">
                <label for="cname">Name on Card</label>
                <input type="text" id="cname" name="cardname" placeholder="John More Doe">
                <label for="ccnum">Numero do Cartão:</label>
                <input type="number" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
                <label for="expmonth">Mês de Expiração:</label>
                <input type="number" id="expmonth" name="expmonth" placeholder="Setembro">
                <label for="expear">Exp Year</label>
                <input type="number" id="expyear" name="expyear" placeholder="2018" pattern="[0-9]+$">
                <label for="cvv">CVV</label>
                <input type="number" id="cvv" name="cvv" placeholder="352">
                <button id="my-form-button" type="submit">Submit</button>
<p id="my-form-status"></p>
            </form>

so far so good because he sends the form in the database, but I wanted him to do it only without refresh so I decided to use ajax so I created this code:

          window.addEventListener("DOMContentLoaded", function() {        
var form = document.getElementById("my-form");
            var button = document.getElementById("my-form-button");
            var status = document.getElementById("my-form-status");

            // Success and Error functions for after the form is submitted
            
            function success() {
              form.reset();
              button.style = "display: none ";
              status.innerHTML = "Obrigado!!";
            }

            function error() {
              status.innerHTML = "Oops! Temos problemas , tente novamente mais tarde";
            }

            // handle the form submission event

            form.addEventListener("submit", function(ev) {
              ev.preventDefault();
              var data = new FormData(form);
              ajax(form.method, form.action, data, success, error);
            });
          });
          
          // helper function for sending an AJAX request

          function ajax(method, url, data, success, error) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url);
            xhr.setRequestHeader("Accept", "application/json");
            xhr.onreadystatechange = function() {
              if (xhr.readyState !== XMLHttpRequest.DONE) return;
              if (xhr.status === 200) {
                success(xhr.response, xhr.responseType);
              } else {
                error(xhr.status, xhr.response, xhr.responseType);
              }
            };
            xhr.send(data);
          }

only that he just made the mistake I’m doing the right way?

Answer 1

An example you can use in this case and serialize the form, follows an example you can use as a basis:

$("#eviarAjax").click(function (e) {
    e.preventDefault();

    var urlCompleto = "/AdicionarDetalhe/";
    var formulario = $("#SeuFormulario");

    $.ajax({
        method: "POST",
        url: urlCompleto,
        data: formulario.serialize(),
        success: function (resultado) {
              console.log(resultado);
        }
    });

});