1

Estoy tratando de enviar datos desde un formulario mediante ajax a una apiRest hecho en nodejs, al enviar me sale errores, quiza este haciendo algo mal en mi código ajax. El formulario es el siguiente:

<div class="container">
    <br>
    <div class="row">
        <div class="col s12 m9">
            <div class="card-panel">
                <h5 class="center">REGISTRO</h5>
                <div class="divider"></div><br>
                <div class="row">

                    <form method="post" id="register" enctype="multipart/form-data" class="s12">
                        <div class="input-field col s12 m6">
                            <input placeholder="Nombres" name="name" id="name" type="text" required>
                            <label for="first_name">NOMBRES</label>
                        </div>
                        <div class="input-field col s12 m6">
                            <input placeholder="Email" name="email" id="email" type="text" required>
                            <label for="email">EMAIL</label>
                        </div>
                        <div class="input-field col s12 m6">
                            <input placeholder="Contraseña" name="password" id="password" type="password" required>
                            <label for="celular">CONTRASEÑA</label>
                        </div>
                        <table>
                            <tr>
                                <td>Fotografia frontal:</td>
                                <td><input type="file" name="image" id="image" required></td>
                            </tr>
                            <tr>
                                <td>Fotografia frontal:</td>
                                <td><input type="file" name="image2" id="image" required></td>
                            </tr>
                        </table>

                        <div class="col s12">
                            <div class="divider"></div><br>
                            <div class="center">
                                <input class="btn black" type="submit" value="REGISTRAR CONDUCTOR">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/js/register.js" ></script>

Mediante el código siguiente de ajax quiero enviar los datos tanto como texto e imagen a la api:

$("#register").on('submit', function(e){
    e.preventDefault();
    var f = $(this);

    var formData = new FormData(document.getElementById("register"));
    $.ajax({
        url: "url de la api",
        type: "post",
        dataType: "json",
        data: formData,
        cache: false,
        contentType: false,
        proccessData: false,
    })
    .done(function(res){
        console.log("Archivo enviado");
    });

});

Pero al tratar de enviar me sale errores... Quizá este haciendo algo mal en el código, soy nuevo en programación.

6
  • El id de tu <form> es register_driver, no solamente register, empieza por cambiar eso en $("#register").on('submit', function(e){... y en var formData = new FormData(document.getElementById("register")); y comenta que otros errores aparecen. Commented el 18 jul. 2019 a las 15:31
  • Uncaught TypeError: Illegal invocation, at i (jquery-3.4.1.min.js:2), at qt (jquery-3.4.1.min.js:2), at Function.k.param (jquery-3.4.1.min.js:2), at Function.ajax (jquery-3.4.1.min.js:2), at HTMLFormElement.<anonymous> (register.js:12), at HTMLFormElement.dispatch (jquery-3.4.1.min.js:2), at HTMLFormElement.v.handle (jquery-3.4.1.min.js:2), la linea 12 empieza el ajax
    – Romero
    Commented el 18 jul. 2019 a las 15:57
  • Esos son los errores que me muestra al dar click en registrar
    – Romero
    Commented el 18 jul. 2019 a las 15:59
  • al parecer es un error en el src de jquery, sustitúyelo por esto <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> y comenta que sucede. Commented el 18 jul. 2019 a las 16:17
  • Me mustra el mismo error, o quiza este haciendo algo mal en el ajax
    – Romero
    Commented el 18 jul. 2019 a las 16:32

1 respuesta 1

1

Tienes que obtener el primer elemento de tu form data que en este caso sera tu formulario

var formData = new FormData(document.getElementById("register")[0]);

Y tienes mal escrita la linea:

  proccessData: false,

cambiala por esta:

    processData: false,

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.