1

lo que pasa es que he buscado y buscado y no encuentro nada. Intento hacer que cuando un usuario le dé click a alguno de los dos botones y al finalizar dándole click en "Enviar post", se envíe por post jquery. (Obvio que no sea cambiando el <button por un input):

HTML:

    <button id='boton1' value='9876' type='button'>Boton 9876</button> //Por ejemplo este botón al ser seleccionado, se envíe por post el valor 9876

    <button id='boton2' value='1234' type='button'>Boton 1234</button>// O si presiona este, entonces se envía el 1234 y ya no el 9876

    <button type='submit'>Enviar post</button>
</form>

JAVASCRIPT

$('#enviar_post').submit(function(e){
    
   
//Se supone que al dar click en un boton (elegido por el usuario) el valor se envíe ¿O qué me recomendarian?
if($('#boton1').click()){
    var enviarEsto=$('#boton1').val(); 
}else if($('#boton2').click()){
    var enviarEsto=$('#boton2').val(); 
}

$.ajax({
     type: 'POST',
     url: RUTAURL+'datos/enviar/',
     dataType: 'text',
     data: {datoButton: enviarEsto, otrosParametros:'buenos dias'},
    success: function(response){
     console.log(response);

    }
     
})


e.preventDefault();
})


pero... cómo hago para agregar el submit cuando el usuario termine de seleccionar alguno de los dos botones?

Iría asi?

$('#enviar_post').submit(function(e){

        $("body").on("click", ".botones", function() {
          const valor = $(this).data('value');
 
            $.ajax({
                  type: 'POST',
                  url: ruta+'datos/enviar/',
                  dataType: 'text',               
                  data: {botones: valor, otros:'buenos dias'},
                    success: function(response){
                      console.log(response);
 
                    }
                   
            })
        })
 
    })

4
  • Si eso es lo que buscas entonces dales la misma clase a ambos, recuperalos, iteralos y con condiciones evalua si una clase esta o no presente, en función de eso construyes la petición ajax
    – user128299
    Commented el 21 oct. 2020 a las 22:41
  • lo que quieres es enviar informacion a traves del button? Commented el 21 oct. 2020 a las 22:44
  • @MiguelVargas exactamente
    – kiuesti
    Commented el 21 oct. 2020 a las 22:46
  • te dejo un ejemplo para que veas el funcionamiento Commented el 21 oct. 2020 a las 23:05

1 respuesta 1

0

Tienes que utilizar data a traves del button, te doy el ejemplo para que veas su funcionamiento.

Los atributos data-* permiten almacenar información adicional sobre un elemento HTML cualquiera sin tener que recurrir a artilugios tales como la utilización de atributos no estándar, propiedades adicionales en el DOM o Node.setUserData().

Para obtener un atributo data a través del dataset del objeto, obtenga la propiedad por la parte del nombre del atributo despues de data- (tenga en cuenta que los guiones son convertidos en camelCase).

$("body").on("click", ".botones", function() {
    //aqui usas $(this).data('value') y te devolvera el valor del button seleccionado
    const valor = $(this).data('value');
    console.log(valor);
    
    $("body").on("click", "#enviar", function() {
        console.log(valor);
        //aqui ejecutas ajax
        /*
        $.ajax({
                  type: 'POST',
                  url: ruta+'datos/enviar/',
                  dataType: 'text',               
                  data: valor,
                    success: function(response){
                      console.log(response);
 
                    }
                   
            })
        */
    });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='botones' data-value='9876' type='button'>Boton 9876</button>

<button class='botones' data-value='1234' type='button'>Boton 1234</button>


<button id="enviar">Enviar post</button>

2
  • 1
    Buena respuesta, aunque sería conveniente que expliques porqué se usan atributos de datos (dataset) en lugar de value.
    – Triby
    Commented el 21 oct. 2020 a las 23:16
  • De esta forma, cada vez que el usuario aprieta un botón, se asocia un nuevo evento al enviar... Si aprieta 10 veces los botones antes, al enviar estarías disparando 10 consultas por AJAX
    – Pollo
    Commented el 22 oct. 2020 a las 6:20

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.