Tengo el siguiente formulario HTML y quiero enviar todos los datos usando AJAX, el problema es que no puedo obtener lo que el usuario haya colocado en los input (quite la parte de AJAX y lo sustituir por el console.log
para el ejemplo). El +
arriba a la derecha me sirve para dar la opción de agregar más fotos y por ello es que necesito obtener todos los valores del formulario porque nunca serán iguales.
Intente hacerlo así, pero no funciona.
$(document).ready(function() {
$('#Enviar').on('click', function(event) {
event.preventDefault();
// Serializar el formulario
var formData = $('#registro').serialize();
console.log(formData);
});
});
Este es mi código:
$(document).ready(function(){
var maxField = 6;
var addButton = $('#add_gondola');
var wrapper = $('#field_wrapper_gondola');
var fieldHTML = '<div class="input-group mt-2"><input class="foto-input" type="file" accept="image/*" capture="camera" style="display: none;"><img class="camara" style="height: 100%; width: 100%;" src="https://www.freeiconspng.com/thumbs/camera-icon/camera-icon-21.png" alt="Icono de la cámara"><img class="preview" src="#" alt="Vista previa de la foto" style="display:none;"><button class="btn btn-circle btn-danger mt-2 borrarBtn" style="display: none;"><i class="fas fa-trash"></i></button><a href="javascript:void(0);" class="btn btn-circle btn-danger mt-2 ml-2" id="remove_gondola"><i class="fas fa-minus"></i></a></div>';
var x = 1;
$(addButton).click(function(){
if(x < maxField){
x++;
$(wrapper).append(fieldHTML);
}
else alert("Solo se pueden añadir 6 fotos")
});
$(wrapper).on('click', '#remove_gondola', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
$(document).on('click', '.camara', function() {
var inputFile = $(this).siblings('input[type=file]');
inputFile.click();
});
$(document).on('change', 'input[type=file]', function() {
var archivo = this.files[0];
var vistaPrevia = $(this).siblings('.preview');
var camaraIcon = $(this).siblings('.camara');
var borrarBtn = $(this).siblings('.borrarBtn');
if (archivo) {
var lector = new FileReader();
lector.onload = function(e) {
vistaPrevia.attr('src',e.target.result);
vistaPrevia.css({
'display': 'block',
'height': '100%',
'width': '100%'
});
camaraIcon.hide();
borrarBtn.show();
};
lector.readAsDataURL(archivo);
}
});
$(document).on('click', '.borrarBtn', function(event) {
event.preventDefault(); // Detener el comportamiento predeterminado del botón
var archivo = $(this).siblings('input[type=file]');
var vistaPrevia = $(this).siblings('.preview');
var camaraIcon = $(this).siblings('.camara');
var borrarBtn = $(this);
vistaPrevia.val('');
vistaPrevia.attr('src', '#').hide();
archivo.val('');
camaraIcon.show();
borrarBtn.hide();
});
//Aqui es donde estoy intentando obtener toda la información del formulario
$(document).ready(function() {
$('#Enviar').on('click', function(event) {
event.preventDefault();
// Serializar el formulario
var formData = $('#registro').serialize();
console.log(formData);
});
});
.pull-right {
float: right !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario con JSON</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<form id="registro">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Gondola <a href="javascript:void(0);" style="display:flex; align-items:center; text-decoration:none;" class="pull-right" id="add_gondola"><i class="fas fa-plus"></i></a></h6>
</div>
<div class="card-body">
<div class="col-sm-6" id="field_wrapper_gondola">
<label for="descripcion_gondola" style="width:100%">Descripción</label>
<textarea id="descripcion_gondola" class="form-control mb-2"></textarea>
<div class="input-group">
<input class="foto-input" type="file" accept="image/*" capture="camera" style="display: none;">
<img class="camara" style="height: 100%; width: 100%;" src="https://www.freeiconspng.com/thumbs/camera-icon/camera-icon-21.png" alt="Icono de la cámara">
<img class="preview" src="#" alt="Vista previa de la foto" style="display:none;">
<button class="btn btn-circle btn-danger mt-2 borrarBtn" style="display: none;"><i class="fas fa-trash"></i></button>
</div>
</div>
</div>
</div>
</form>
<button class="btn btn-primary mt-2 pull-right" id="Enviar">Enviar</button>
</body>
</html>