1
<form action="" id="form" method="POST" >
<select id="controlselect" name="ordenar">
    <option value='0' >Seleccione</option>
    <option value='1' >General</option>
    <option value='2' >Producto</option>
</select>

<input type="submit"  id="BotonBuscar" onclick="Buscar()" value="buscar" />
<input type="submit"  id="BotonGenerar" onclick="Generar()" value="generar" />
</form>
  1. Tengo el siguiente formulario , con su combobox y dos botones.

    1.1 Quiero que cuando el usuario presione el botón Buscar envíe los elementos del select a mi archivo php Prueba 8 y cuando presione el botón Generar envíe los elementos del select a mi archivo Prueba 9.

    1.2 He estado indagando , pero no hallo la solución , estoy implementando código JavaScript para manipular el form y su propiedad action y tengo algo como esto pero no funciona.

function Buscar()
{

document.getElementById('BotonBuscar').addEventListener('click', (e) => {
  e.preventDefault()

    form.setAttribute("action", "Prueba8.php")

})

}


function Generar()

{
  document.getElementById('BotonGenerar').addEventListener('click', (e) => {
  e.preventDefault()

    form.setAttribute("action", "Prueba9.php")

  })

}

1.3 Es posible hacer esta manipulación?¿ , si es así , entonces pueden facilitarme el código bien elaborado y explicado, en base a lo que tengo o alguna solución mejor.

Agradecido de Antemano!

7
  • 2
    No te va a funcionar porque estas haciendo un e.preventDefault() el cual previene el submit de tu input por eso no te manda a la página, en sí para que necesitas mandar tu información a ese archivo? Puedes usar AJAX. Commented el 4 dic. 2019 a las 17:40
  • 1
    He probado con AJAX , pero elaborando el código me capta los valores del select , mas no me abre los nuevos archivos. ¿Tienes un pequeño ejemplo , que me pueda servir para practicarlo ? Commented el 4 dic. 2019 a las 17:42
  • 1
    Al "abrir" te refieres a que te redirija a la página? Commented el 4 dic. 2019 a las 17:43
  • 1
    Correcto el debe abrir la pagina porque alli tengo un codigo que debe ejecutar de acuerdo a los valores del SELECT. Commented el 4 dic. 2019 a las 17:44
  • 1
    Puedes utilizar un <a href="prueba8.php?valor=${select}"></a> creado con JS al momento de que seleccione un valor, osea al change y mandar ese valor del select por GET y obtenerlo en tu archivo PHP como $_GET['valor']. Commented el 4 dic. 2019 a las 17:50

1 respuesta 1

1

Te dejo comentarios en el código, haz la prueba y cualquier duda hazla saber. :D

//Creamos variables para ahorrarnos el document....
let btnBuscar = document.getElementById('Buscar');
let btnGenerar = document.getElementById('Generar');

//agregamos un listener al select para obtener su valor cuando cambie
document.getElementById('controlselect').addEventListener('change', function(e){

let valor = this.value;

//le agregamos el href a la etiqueta <a> para mandarnos a la página que deseamos
btnBuscar.setAttribute('href',`pagina8.php?valor=${valor}`);
btnGenerar.setAttribute('href',`pagina9.php?valor=${valor}`);

//para que observes su href correspondiente
console.log(btnBuscar.getAttribute('href'));
console.log(btnGenerar.getAttribute('href'));

});
<form action="" id="form" method="POST" >
<select id="controlselect" name="ordenar">
    <option value='0' >Seleccione</option>
    <option value='1' >General</option>
    <option value='2' >Producto</option>
</select>

<!--<input type="submit"  id="BotonBuscar" onclick="Buscar()" value="buscar" />
<input type="submit"  id="BotonGenerar" onclick="Generar()" value="generar" />-->

<a href="" id="Buscar"><button type="button">Buscar</button></a>
<a href="" id="Generar"><button type="button">Generar</button></a>


</form>

En PHP

  <?php
//así obtenemos el valor por GET
$_GET['valor'];


    ?>
15
  • 1
    Perfecto , voy a probar la solución y te aviso. Commented el 4 dic. 2019 a las 18:18
  • Dale, éxito compañero! :) Commented el 4 dic. 2019 a las 18:18
  • Estoy haciendo la modificación respectiva , pero me esta arrojando error JS: Uncaught TypeError: Cannot read property 'addEventListener' of null Commented el 4 dic. 2019 a las 18:31
  • Disculpa es que soy nuevo en esta web , gracias por la acotación. Osea coloco mi código JS después de mi body es a lo que te estás refiriendo?¿ Commented el 4 dic. 2019 a las 18:44
  • Si de esta manera <body>aquí va tu form, después del form y antes de la etiqueta de cierre de tu body o sea está --> (</body>)pones las de <script>//aquí va el código que te pase</script></body> Commented el 4 dic. 2019 a las 18:46

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.