1

Tengo un formulario con 2 botones en el que dependiendo del botón pulsado registra o edita, el problema es que no consigo detectar cual de los dos botones he pulsado, aquí el código:

HTML

<form enctype="multipart/form-data" method="post" action="" name='registroforoedit' id="registroforoedit" onsubmit="finRegistroEdit(); return false">
    <div class="form-group">
        <button type="submit" id="nuevo" name="nuevo" value="nuevo">Nueva version</button>
        <button type="submit" id="editar" name="editar" value="editar">Editar</button>
    </div>
</form>

JS


function finRegistroEdit(){
    var dataString = $('#registroforoedit').serialize();
    $.ajax({
        type: "POST",
        url: "php/ed_presupuestos_back.php",
        data: dataString,
        success: function(data) {
            document.getElementById("registroforoedit").reset();
        }
    });
}

ed_presupuestos_back.php

    $nuevo=$_POST["nuevo"];//no recibo ningún valor
    $editar=$_POST["editar"];//no recibo ningún valor

1 respuesta 1

3

El problema es que en jQuery, el método serialize() no recoge los botones o input de tipo submit, porque dicho método no tiene medio para saber cuál botón, entre varios posibles, ha sido presionado.

Esto viene explicado claramente en la documentación:

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.


Nota: Solo los "controles correctos" se serializan en la cadena. No se serializa ningún valor de botón de envío ya que el formulario no se envió mediante un botón. Para que el valor de un elemento de formulario se incluya en la cadena serializada, el elemento debe tener un atributo de name. Los valores de las casillas de verificación y los botones de opción (entradas de tipo "radio" o "casilla de verificación") se incluyen solo si están marcadas. Los datos de los elementos de selección de archivos no se serializan.

Para este caso concreto, si lo que quieres es saber cuál de los botones fue pulsado, puedes escuchar los clicks de ambos botones y luego usar this para saber cuál de ellos fue pulsado, poniendo en una clave (aquí la he llamado action), el valor del botón. Así en el servidor sabrás qué acción ejecutar.

Si el formulario tuviera más datos que quieras pasar, puedes usar serialize() con el id del formulario para incluir dichos datos en la variable toPost y postearla vía Ajax.

JS

$( "#nuevo,#editar" ).on( "click", function( e ) {
  e.preventDefault();
   var toPost={ action : $( this ).val()};
   console.log( toPost );

    $.ajax({
        type: "POST",
        url: "php/ed_presupuestos_back.php",
        data: toPost,
        success: function(data) {
            document.getElementById("registroforoedit").reset();
        }
    });

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

<form enctype="multipart/form-data" method="post" action="" name='registroforoedit' id="registroforoedit" onsubmit="finRegistroEdit(); return false">
    <div class="form-group">
        <button type="submit" id="nuevo" name="nuevo" value="nuevo">Nueva version</button>
        <button type="submit" id="editar" name="editar" value="editar">Editar</button>
    </div>
</form>

PHP

$mAction=!empty($_POST['action']) ? $_POST['action'] : NULL;

if($mAction) {
    #En caso de más de dos acciones podría pensarse en algo más simple
    #como un bloque switch u otro
    if ($mAction==='editar') {
        #Código para editar
    } else {
        #Código para nuevo
    }
} else {
    #Ningún action fue enviado
}

Recomendaciones

  1. No declares tu formulario como enctype="multipart/form-data" si no lo es. En este formulario no se aprecia que estés pasando archivos por ejemplo para declarar que es multipart.
  2. Es una mala práctica usar funciones in-line, como ocurre aquí: onsubmit="finRegistroEdit(); return false" Esto hace que el contenido HTML sea siempre dependiente del código Javascript. Si mañana esa función debe cambiar de nombre, recibir parámetros, etc, y la tienes in line en cientos o miles de archivos HTML te quiero ver adivinando en qué archivos la has puesto. Considera por tanto escuchar los envíos de formularios, clicks, cambios de elementos, etc directamente en Javascript (como se ha hecho en esta respuesta). Si observas aquí el código JS no depende para nada del HTML. Al bloque $( "#nuevo,#editar" ).on( "click", function( e ) { puedes agregar lo que quieras sin tocar para nada el contenido HTML.
2
  • De acuerdo gracias por la respuesta, pero si el ajax lo tengo en otro archivo? presupuesto.js, he cogido la aplicación casi terminada y no me dan tiempo a arreglar los muchos errores que tiene como los que mencionaste arriba el 22 mar. 2021 a las 10:46
  • @Superchicken puedes corregir el código en ese archivo .js que refieres
    – A. Cedano
    el 22 mar. 2021 a las 10:50

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.