Formulario con campo de texto obligatorio

Mitacsss · #1 (**permalink**) 09/08/2012, 12:47

Hola!
estoy haciendo un formulario de búsqueda, y quiero que al pulsar el botón buscar, sea necesario que haya algún texto en el campo para que proceda y busque, es decir que si en el campo de texto no hay nada, que al pulsar el botón "Buscar", no ocurra nada, mientras que si que hay texto en el campo que haga la función de búsqueda.

Código:

<form method="get" action="http://www.buscador.com/buscar.php" name="Buscador"><font face="arial">Introduce el texto a buscar</font><br>
  <input size="100" name="q"><br>
  <input name="Buscar" value="Enviar" type="submit"><input name="Borrar" value="Borrar" type="reset"><br>
</form>

Alguien me puede decir que tengo que poner para hacer esa función? He buscado varios métodos, pero se ve que no se implementarlos...

Saludos! ;D

WyLY · #2 (**permalink**) 09/08/2012, 18:43

Hola mitacsss, para poder realizar esta acción se requiere de una verificación y para ello necesitas de un lenguaje que te apoye, html sólo nop.

Lo que te puedo recomendar es utilizar directamente Javascript o Jquery, en mi opinión siempre encuentro más fácil para aquellos que son principiantes el segundo, aunque seguro habrá gente que no concuerde conmigo.

Vamos a comenzar, intentaré darte una guía, si te trabas intenta buscar un poco de info con papá Google, si ya de plano no puedes, regresas y con gusto te sigo apoyando u otro programador.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#buscar").click(function(){// nombre del boton que haces click
if($("#campo_de_busqueda").val() == "" || $("#campo_de_busqueda").val() == null){
alert("Por favor inserte texto en su campo de búsqueda.");
}
});
});
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="text" name="campo_de_busqueda" id="campo_de_busqueda" />
  <input type="submit" name="buscar" id="buscar" value="buscar" />
</form>
</body>
</html>

WyLY · #3 (**permalink**) 09/08/2012, 18:44

Bueno más que guia me entusiasme y te hice la chamba.

Mitacsss · #4 (**permalink**) 10/08/2012, 00:49

Gracias! :D
Por otra parte, con el código que me has dado, al pulsar "Enviar" aparece una alerta y le deja continuar con la búsqueda, es decir que:
1º Aparece la alerta
2º Le envia a http://www.buscador.com/buscar.php?campo_de_busqueda=&Enviar=Enviar
Y entonces me quedo igual... porque lo que yo necesito, es que si no introduce texto, que no pueda continuar y que se le avise de que tiene que introducir texto.

He probado a recargar con javascript y creo que lo pongo mal porque yo pongo esto:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#buscar").click(function(){// nombre del boton que haces click
if($("#campo_de_busqueda").val() == "" || $("#campo_de_busqueda").val() == null){
alert("Por favor inserte texto en su campo de búsqueda."); location.reload();
//He probado a ponerlo aquí también quitando el de arriba//
}
});
});
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input type="text" name="campo_de_busqueda" id="campo_de_busqueda" />
  <input type="submit" name="buscar" id="buscar" value="buscar" />
</form>
</body>
</html>

y también he probado a cambiar el:
location.reload(); por document.location.href = document.location.href; y sigue igual, que hago??

furoya · #5 (**permalink**) 10/08/2012, 07:57

Cita:

Iniciado por WyLY

... para poder realizar esta acción se requiere de una verificación y para ello necesitas de un lenguaje que te apoye, html sólo nop.

Bueno, HTML5, síp. (Aunque haga trampa.)

http://www.w3.org/TR/html-markup/input.search.html

Cita:

Iniciado por WyLY

Lo que te puedo recomendar es utilizar directamente Javascript o Jquery, en mi opinión siempre encuentro más fácil para aquellos que son principiantes el segundo, aunque seguro habrá gente que no concuerde conmigo.

Por supuesto que muchísima gente no va a concordar contigo. En este caso, cargar una librería sólo para confirmar que un campo está vacío es un absurdo.

Es mucho más fácil (y corto) usar JS.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
</head>
<body>
<form method="get" action="http://www.buscador.com/buscar.php" name="Buscador"><font face="arial">Introduce el texto a buscar</font><br>
  <input size="100" name="q"><br>
  <input name="Buscar" value="Enviar" type="submit" 
onclick="if(Buscador.q.value=='') return false">
  <input name="Borrar" value="Borrar" type="reset"><br>
</form>
</body>
</html>

Si bien la sintaxis que usé no es la mejor, al menos muestra cómo se puede hacer.

Ni hablar que este problema ya está resuelto miles de veces y con usar el buscador alcanzaba para no poner el post, pero quería ver si se podía destacar texto en la etiqueta de código.

Y hablando de buscadores ... ¿sabes que el sitio que pusiste de ejemplo sí existe, Mitacsss? Digo, por lo del spam XD

furoya · #6 (**permalink**) 10/08/2012, 10:27

(Ups!.
Vine a apoyar la sugerencia de 0K sobre "revalidar" en el servidor, pero el mensaje desapareció.

)

Mitacsss · #7 (**permalink**) 11/08/2012, 04:16

Cita:

Iniciado por furoya

Y hablando de buscadores ... ¿sabes que el sitio que pusiste de ejemplo sí existe, Mitacsss? Digo, por lo del spam XD

Pues la verdad es que me di cuenta cuando ya no podía modificar el texto... Solo era un ejemplo.... :(

Mitacsss · #8 (**permalink**) 21/08/2012, 05:12

Lo he probado todo, y aunque busque en Google, no puedo conseguir lo que quiero...
Por cierto, el onclick="if(Buscador.q.value=='') return false" que va delante o detrás de la etiqueta style? Da igual donde esté?

daniyxxxx2006 · #9 (**permalink**) 21/08/2012, 22:54

Hola no se si ya han respondido a tu interrogante pero yo he utilizado este codigo y me funciona muybien ya que si no ingresa un valor te dice que regreses y lo llenes para poder enviar los datos. Tambien si tiene que ser numerico lo puedes usar espero te sirva

if(!is_numeric($_REQUEST["codigo"]))
{
echo "Por Favor Ingrese un Valor Numérico en el Producto";
echo "<br><a href='javascript:history.go(-1)'>Volver</a>";
exit();
}
if($_REQUEST["nombre"]=="")
{
echo "Por Favor Ingrese un Dato en la Casilla Nombre";
echo "<br><a href='javascript:history.go(-1)'>Volver</a>";
exit();
}
if($_REQUEST["existencias"]=="")
{
echo "Por Favor Ingrese un Dato en la Casilla Existencias";
echo "<br><a href='javascript:history.go(-1)'>Volver</a>";
exit();
}
if(!is_numeric($_REQUEST["existencias"]))
{
echo "Por Favor Ingrese un Valor Numérico a las Existencias";
echo "<br><a href='javascript:history.go(-1)'>Volver</a>";
exit();
}

furoya · #10 (**permalink**) 23/09/2012, 13:19

Cita:

Iniciado por Mitacsss

Pues la verdad es que me di cuenta cuando ya no podía modificar el texto... Solo era un ejemplo.... :(

Sí, es increíble los dominios que registran. El otro día descubrí que unos ejemplos que puse como "misitio" y "otrositio", que usaba justamente para probar direcciones que tiraran error ... ya existen.

como cambiar las propiedades de onmouseover #12

Cita:

Iniciado por Mitacsss

Lo he probado todo, y aunque busque en Google, no puedo conseguir lo que quiero...
Por cierto, el onclick="if(Buscador.q.value=='') return false" que va delante o detrás de la etiqueta style? Da igual donde esté?

El código en rojo va donde está. Allí no hay ningún "style" ¿dónde lo viste?

Como mucho, le faltará su alert('Caracter no válido.') para el aviso.

Y no es que no encuentras, es que no tienes idea de lo que estás mirando. Lo viste mil veces y no lo reconociste, porque para esto primero tienes que aprender un poco de programación en páginas web.
Y ya quedó claro que no sabes usar atributos HTML, ni JS elemental.

En realidad ese ejemplo podría hacerse mejor, usando javascript que no esté inline, pero como estamos en el Foro HTML, te lo escribí dentro del <input>. Si decides hacerlo así, se mueve el tema para debatir un poco (más) sobre la sintaxis poco apropiada que utilicé.

Y hablando de código fuera de foro ...

Cita:

Iniciado por daniyxxxx2006

no se si ya han respondido a tu interrogante pero yo he utilizado este codigo y me funciona muybien

Sí, la verdad es que ya le respondimos, desapareció algún comentario sobre revalidación en servers, pero seguramente ya le quedó claro. Con leer el tema bastaba para no preguntar.
Y eso es PHP, no hay manera de hacerlo pasar por HTML. Quizá en JS, por el método para regresar la página usando el historial; pero acá no tiene excusa.