[SOLUCIONADO] Obtener valor input y enviar mediante post

[agustinpak]

Buenas! Resumo, estoy creando un formulario con dos botones. Y la idea es que al presionar el primer botón "UNO", obtenga el valor que hay en el campo "importe" y lo envie mediante post a "ejemplo.php". Ya de ahí realizo una consulta y muestro el resultado en "salida". Una vez hecho esto, si ejecuto el sumbit del formulario.

Código HTML:

<form action="kiosk.php" method="post" class="form" id="form1"><?php       
 
        <input type="text" name="importe" id="comment" placeholder="IMPORTE DE CARGA" required />
 
         <button class = "enviar" name="boton" id="button-blue" value = 1>UNO</button>
        <input type="submit" value="IMPRIMIR COMPROBANTE" id="button-blue"/>
</form>
 
<div id = "salida"></div>
 

Código Javascript:

<script type="text/javascript">
 
    var botones = document.getElementsByClassName("enviar"),
    total = botones.length,
    salida = document.getElementById("salida");
 
for (i = 0; i < total; i++) {
    botones[i].addEventListener("click", function(){
        var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") || new ActiveXObject("Msxml2.XMLHTTP");
 
        ajax.open("POST", "ejemplo.php", true);
        ajax.onreadystatechange = function(){
            if (ajax.readyState == 4) {
                switch (ajax.status) {
                    case 200:
                        salida.innerHTML = ajax.responseText;    
                    break;
 
                    case 404:
                        salida.innerHTML = "La dirección brindada no existe";
                    break;
 
                    default:
                        salida.innerHTML = ajax.status;
                    break;
                }
            }    
        };
 
        ajax.send(this.value);
    }, false);
}        
</script>
 

[KATHYU]

Según veo, quiere enviar un mismo dato a dos archivos php diferentes ?? a ejemplo.php y a kiosk.php

Y si prueba las nuevas funciones de HTML para tener un input vinculado a un formulario diferente al que esta inmerso ??

[Alexis88]

Para realizar una petición asíncrona mediante el método POST, tienes que establecer las cabeceras respectivas:

Código Javascript:

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 

Por otro lado, si deseas que se envíe mediante AJAX el valor en cuestión cuando pulses el primer botón, solo tienes que asociar el evento click al mismo, cancelar el evento submit el cual se dispara cuando se pulsa un botón contenido en un formulario (utilizando el método .preventDefault), y, finalmente, realizar la petición asíncrona:

Código Javascript:

document.querySelector("#button-blue").addEventListener("click", function(event){
    event.preventDefault();
 
    //Aquí realizas la petición asíncrona (AJAX)
}, false);
 

Obviamente vas a tener que dejar de usar ese bucle para que esto funcione o se generará un conflicto.

[KATHYU]

An HTML form with two submit buttons, with different actions:

Código HTML:

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>
 

https://www.w3schools.com/html/html_form_attributes.asp

[agustinpak]

Gracias por sus respuestas. Me sirven las dos. Saludos