0

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">
    <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>

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.