0

tengo un formulario para guardar datos utilizando ajax, el problema es que el momento de enviar los datos al backend no llega el valor del pais el cual no es un campo de tipo input si no uno de tipo select

aca el codigo de la tabla:

<table align="center" border="2" class="striped">
                    <tr>
                        <form id="form-emisora">                            
                            <td width="150px" align="center">               
                                <select id="pais" name="pais">
                                    <option value=""> Seleccione Pais</option>
                                    <?php  
                                        foreach ($paisesCombo as $key => $combo) {
                                    ?>
                                    <option value="<?= $combo; ?>"><?= $combo; ?></option>
                                    <?php    
                                        } // aca cerramos el ciclo while */                                     
                                    ?>
                                    <input type="hidden" name="oldPais" id="oldPais">
                                </select>
                            </td>

                            <td width="300px" align="center">
                                <input type="text" size="50px" name="emi" id="emi">
                            </td>
                            <td width="100px" align="center">
                                <input type="text" name="id" id="id">
                                <input type="hidden" name="oldId" id="oldId">
                            </td>
                            <td width="300px" align="center">
                                <input type="text" size="50px" name="url" id="url">
                            </td>
                            <td align="center">
                                <input type="text" name="web" id="web" size="50px">
                            </td>
                            <td width="300px" align="center">
                                <a class="guardar-btn" onclick="crearEmisora()" href="#"> GUARDAR </a>
                                <a class="editar-btn" style="display: none;" onclick="editarEmisora()" href="javascript:void(0);">GUARDAR CAMBIOS  /</a>
                                <a class="volver-btn" style="display: none;" href="#">ATRAS</a>
                            </td>
                        </form>
                </table>

el codigo con el cual obtengo los datos del formulario es el siguiente

function crearEmisora(){
                var pais    = document.getElementById('pais').value
                var emi     = document.getElementById('emi').value
                var id      = document.getElementById('id').value
                var url     = document.getElementById('url').value
                var web     = document.getElementById('web').value


                if (pais ==='' || emi==='' || id==='' || url==='' || web==='' ) {
                    $('#mensajeERROR').css('display','block')
                    $('#mensajeERROR').text('Todos los Campos de Formulario deben ser Llenados')
                    setTimeout(function(){ document.location.reload(); }, 1000);
                }else{              
                    $('#mensajeERROR').css('display','none')    
                     var form = $('#form-emisora');
                     console.log(form)
                        $.ajax({
                          type: "POST",
                          url: 'crear_emisora.php',
                          data: form.serialize(),
                          success: function( response ){
                            var g   =response
//console.log(data)
                            if (g==200) {
                                $('#mensajeERROR').css('display','none')
                                $('#mensajeSuccess').css('display','block')
                                $('#mensajeSuccess').text('EMISORA REGISTRADA EXITOSAMENTE')
                                setTimeout(function(){ document.location.reload(); }, 1000);
                            }else{
                                $('#mensajeERROR').css('display','block')
                                $('#mensajeERROR').text('ERROR AL REGISTRAR')
                                //setTimeout(function(){ document.location.reload(); }, 1000);
                            }
                          }
                        });
                }
            }

al momento de hacer un console.log(pais) se muestra el valor que llega perfectamente pero cuando lo mando al backend me da el error: Undefined index: pais

y en el back tengo este arreglo donde deben de llegar todos los datos

$emisoraNueva = array ( 'pais' => strtoupper($_POST['pais']),
'emisora' => strtoupper($_POST['emi']), 'id' => strtoupper($_POST['id']), 'url' => $_POST['url'], 'web' => strtoupper($_POST['web']), );

2 respuestas 2

2

Puedes utilizar serializeArray() para evitar una cadena preparada para GET ( Como dijo @Jonathan Orta ). Esto te regresará algo raro, por lo que debes parsearlo a un objeto más estructurado. Te dejo un ejemplo, espero te puedas guiar.

$( () => {


  $(document).on('submit', '#form', function( e ) {
    e.preventDefault();
    const data = $(this).serializeArray();
    let objData = {};
    data.forEach( o => objData[ o.name ] = o.value );
    
    console.log( 'Objeto serializado: ',  data );
    console.log( 'Objeto parseado: ',  objData );
  })

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form">
  <input type="text" name="foo">
  <input type="text" name="bar">
  <input type="text" name="poo"><br><br>
  <button type="submit">Enviar</button>
</form>

1

La función serialize te devolverá un search, es decir, solo para consultas tipo GET, para POST deberás mandar un objeto como el siguiente

{
    pais: $('#pais').val(),
    id: $('#id').val()
},

//Si aun deseas utilizar serialize, deberás agregar un parámetro
dataType: 'json',

Que por cierto, ya que usas jQuery, puedes sustutir los document.getElementById por $('#element_id').val() y concatenar las funciones de esta manera

$('#mensajeSuccess').css('display','block').text('EMISORA REGISTRADA EXITOSAMENTE')

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.