3

Estoy intentando realizar una consulta SEARCH con dos parámetros, el primero es el texto de búsqueda y lo segundo la etiqueta, pero el resultado de GET no es el deseado. El código es el siguiente:

 <section>
    <form action="https://google.com/search" method="get" name="search" role="search">
      <p>
        <label for="search-field">Buscar</label>
        <input type="search" name="q" placeholder="Buscar" />
      </p>
      <p>
        <label for="categories">Sect.</label>
        <select name="label">
          <option value="reposteria" selected>Repostería</option>
          <option value="decorado">Decorado de salones</option>
          <option value="comida">Comida</option>
        </select>
      </p>
      <p>
        <button>
          Search
        </button>
      </p>
    </form>
</section>

Resultado:

https://google.com/search?q=consulta+inicial&label=reposteria

Como verán la respuesta de consulta solo llega al primer parámetro, es decir "consulta+inicial" y obvia lo segundo. El resultado que espero obtener es el siguiente:

https://google.com/search?q=consulta+inicial+label+reposteria

o en su defecto:

https://google.com/search?q=consulta+inicial+reposteria

Como verán, busco quitar "&" y "=" para reemplazarlo por "+" para obtener la consulta deseada. Imagino que esto se puede resolver con Javascript, pero la verdad que no tengo mucho conocimiento de cómo aplicarlo, soy estudiante aún. De antemano agradezco la ayuda.

Carola

Nota: Obviamente google.com es solo ejemplo de dominio.

Importante: El código que puse es para consulta del lado del cliente, solo que el segundo parámetro "select" resuelve "&label=etiqueta" y no se reconoce la búsqueda porque el signo "&" y "=" deberían reemplazarse por "+" de modo que la consulta search sea "/search?q=consulta+escrita+label+etiqueta".

2 respuestas 2

0

Debes escribir las URLs siempre con su protocolo, es decir: http:// o https://.

Una vez que has montado la URL puedes usarla de diferentes formas, ya sea hacer la petición por Ajax o ir a o la página en cuestión. En el ejemplo el formulario sólo lo uso para recoger los datos, no lo envío, aunque podrías añadirle la URL una vez creada y enviarlo si lo prefieres (algo más habitual con peticiones POST).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        let url = 'https://google.com/q?=';

        function searchValues(event)
        {
            // Evitar envio del formulario
            e = event || window.event; 
            e.preventDefault();

            // Montar la URL
            const search_value = document.getElementById('searcher').value;
            const search_tag = document.getElementById('selector').value;

            url += search_value + '&' + search_tag;
            console.log('URL: ' + url); // HACK: trace
            
            // Ir a la página
            //location.replace(url);
        }
    </script>
</head>
<body>
    <section>
        <form action="" method="get" name="search" role="search">
          <p>
            <label for="search-field">Buscar</label>
            <input type="search" name="q" placeholder="Buscar" id="searcher"/>
          </p>
          <p>
            <label for="categories">Sect.</label>
            <select name="label" id="selector">
              <option value="reposteria" selected>Repostería</option>
              <option value="decorado">Decorado de salones</option>
              <option value="comida">Comida</option>
            </select>
          </p>
          <p>
            <button onclick="searchValues()">
                Search
            </button>
          </p>
        </form>
    </section>
</body>
</html>

6
  • intenté y apliqué sin éxito. Modifiqué mi pregunta para que se pueda entender mejor. No sé que otro recurso o método podría aplicar. Te agradezco el aporte.
    – Carola
    Commented el 26 abr. 2020 a las 14:46
  • @Carola ¿en qué parte tienes el problema? ¿Has conseguido componer la URL? ¿Se envía y no llega la petición al servidor?
    – Orici
    Commented el 26 abr. 2020 a las 16:09
  • No sé qué hacer, intenté y no consigo resultado alguno. Solo quiero implemetar un search simple, adicionando el "value" de "select" de modo que obtenga dominiopropio.com/search?q=consulta1+consultaoption2 quiero que se pueda ver en el navegador como url. Aplicando lo que me dejaste, del cual te agradezco un montón, solo me manda a "/#" en vez de "/search?q=consulta1+consultaoption2". Desearía aplicarlo en cualquier archivo html y obtener lo requerido como url al pulsar search.
    – Carola
    Commented el 26 abr. 2020 a las 22:24
  • Puedes tener algo así en el cliente dominiopropio.com/search?q=consulta1+consultaoption2 pero solo sirve para hacer la petición, tienes que capturar los parámetros en el servidor y devolver una página de resultados, solo vas a poder cargar una URL directamente si existe una página en tu servidor con esa URL.
    – Orici
    Commented el 26 abr. 2020 a las 22:54
  • Sí, solo quiero hacer la petición de lado del cliente (eso es lo que deseo). Por ejemplo este código base (<form action="/search" method="get"><input name="q" type="text" placeholder="Buscar..."/><input value="Search" type="submit"/></form>) genera la petición requerida (/search?q=consulta+escrita), pero al añadirle el parámetro "select" genera "/search?q=consulta+escrita&label=etiqueta". Deja sin efecto "&label=etiqueta" y para que tenga efecto lo ideal sería "+label+etiqueta", en conclusión "/search?q=consulta+escrita+label+etiqueta". Gracias por entender lo que deseo, espero puedas ayudarme
    – Carola
    Commented el 27 abr. 2020 a las 0:28
0

teniendo en cuenta tu situacion, con lo unico que podriamos solucionar es con Javascript.

lo primero que haremos en cambiar la propiedad name a id de las etiquietas input y select

// Guardamos el form en una constantes
// esto lo haremos para escuchar eventos del mismo
const form = document.getElementById("form")

// Primero tendremos que capturar el input y select
// hacemos referencia atravez del id de los elementos
const searchInput = document.getElementById("q")
const categories = document.getElementById("label")

// Aca accionamos cuando el usuario envie el formulario
form.addEventListener("submit", (e) => {
  
  // Este metodo evita que el formulario se ejecute automaticamente
  // en cambio controlaremos el evento manual
  e.preventDefault()
  
  // Aca ocuparemos algo llamado template string
  // puedes encontrar mas informacion aca https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
  const url = `https://google.com/search?q?=${categories.value}+${searchInput.value}`
  
  
  // Imprimimos en consola el resultado que esperas
  // asi remplazamos y manejamos a gusto el url que quieras
  console.log(url)
  
  // este metodo funciona para abrir la url creada en el navegado como una nueva tab
  // window.open(url)
})
<form action="#" id="form">
  <div>
    <label for="search-field">Buscar</label>
    <input type="search" id="q" placeholder="Buscar" />
  </div>
  <div>
    <label for="categories">Sect.</label>
    <select id="label">
      <option value="reposteria" selected>Repostería</option>
      <option value="decorado">Decorado de salones</option>
      <option value="comida">Comida</option>
    </select>
  </div>
  <div>
    <button>
      Search
    </button>
  </div>
</form>

Trate de dejar todo comentado, espero que te ayude.

1
  • Merling Samuel, implementé lo que me mandaste y no logro obtener la url en el navegador. Investigué lo que me mandaste y traté de modificar en base a todo lo explicado por ti, pero no logré conseguirlo. ¿Habrá alguna forma de que pulsado SEARCH podremos mandar la consulta GET en el misma página y que se muestre la url de consulta en el navegador? Es decir .com/search?q=consulta+uno+consultaoption+dos ¡GRACIAS POR RESPONDER! ;)
    – Carola
    Commented el 26 abr. 2020 a las 22: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.