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.
id
de tu<form>
esregister_driver
, no solamenteregister
, empieza por cambiar eso en$("#register").on('submit', function(e){...
y envar formData = new FormData(document.getElementById("register"));
y comenta que otros errores aparecen.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 elajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
y comenta que sucede.