Hacer un mensaje de alerta
Necesitaría saber como hacer que salte un mensaje de alerta al seleccionar un valor de un list/menu. Me explico, tienes tres campos y un botón de enviar. En cada campo tienes, por ejemplo, 5 valores y un sexto, que seria el primero de los seis, que pone seleccione una opción, y cuyo valor es 0. Así los 3 list/menu. Lo que quiero es que cuando le das al botón enviar, si te has dejado en alguno de los menús la opción "seleccione una opción", cuyo valor es 0, te salga un mensaje de alerta que te diga que esa no es una opción errónea. Quiero hacerlo como lo tienen en www.idealista.com y mi web es www.aunpaso.com, por si quieres ver exactamente los campos y los valores.
7 respuestas
Respuesta de mcalons
1
Te envío un sencillo ejemplo que acabo de realizar ahorita mismo que te servirá para entender como se realiza
<html>
<head>
<script language="javascript">
<!--
function validarForm(theForm){
if (document.McAlons.asr.value == ""){alert("El campo asr no puede enviarse vacio");return(false)}
if (document.McAlons.asr2.selectedIndex == "0"){alert("El Select no puede enviarse vacio");return(false)}else{alert("El Select se completo correctamente");return(true);}
return(true)}
//-->
</script>
</head>
<body>
<p>validacion de formulario
<form name=McAlons method=post action="http://www24.brinkster.com/mcalons/mmd/shop/default.asp" onSubmit="return validarForm(this.form);">
Asr<input type=text size=5 name=asr value="">
Asr2<select name=asr2>
<option value=0>Selecciona un valor
<option value=1>McAlons1
<option value=2>McAlons2
</select>
<input type=submit name=enviar value=submit size=3>
</form>
</body>
</html>
Tamabien te indico que archivo es el de la web de idealistas por si debes de hacerlo igual pero recuerda que los nombres de los select deberán ser iguales y ten cuidado que javascript distingue minúsculas de mayúsculas.
http://www.idealista.com/libreriasJavascript/funciones_cuadro_busqueda.js
Si utilizas un archivo de otro programador es conveniente dejar su nombre, por cortesía pues al también le llevo su tiempo y nos ha ahorrado un tiempo a nosotros.
Es el archivo js que se incluye y controla el submit del formulario al hacer click sobre el botón
<INPUT TYPE="button" value='buscar' style="width:150px" width="150px" onClick="javascript:ValidarSubmit(document.formCriterio);">
Y asi es como se incluye un archivo js en concreto el citado
<SCRIPT LANGUAGE='JavaScript1.2' SRC='../libreriasJavascript/funciones_cuadro_busqueda.js'></SCRIPT>
Te facilito este link donde encontrarás diversos artículos sobre javascript y varios de ellos tratan sobre validar formularios
http://www.elcodigo.net/taller/autores.html
Saludos pedroche!
McAlons Multimedia Design
Muy pronto URL personal.
En construcción Tienda Virtual standard para su comercialización para webmaster, pequeñas y medianas empresas que deseen realizar negocio en internet.
Puedes ver como se está construyendo en http://www24.brinkster.com/mcalons/mmd/shop/default.asp
Si estas interesado en la misma, enviame un mail a [email protected]
<html>
<head>
<script language="javascript">
<!--
function validarForm(theForm){
if (document.McAlons.asr.value == ""){alert("El campo asr no puede enviarse vacio");return(false)}
if (document.McAlons.asr2.selectedIndex == "0"){alert("El Select no puede enviarse vacio");return(false)}else{alert("El Select se completo correctamente");return(true);}
return(true)}
//-->
</script>
</head>
<body>
<p>validacion de formulario
<form name=McAlons method=post action="http://www24.brinkster.com/mcalons/mmd/shop/default.asp" onSubmit="return validarForm(this.form);">
Asr<input type=text size=5 name=asr value="">
Asr2<select name=asr2>
<option value=0>Selecciona un valor
<option value=1>McAlons1
<option value=2>McAlons2
</select>
<input type=submit name=enviar value=submit size=3>
</form>
</body>
</html>
Tamabien te indico que archivo es el de la web de idealistas por si debes de hacerlo igual pero recuerda que los nombres de los select deberán ser iguales y ten cuidado que javascript distingue minúsculas de mayúsculas.
http://www.idealista.com/libreriasJavascript/funciones_cuadro_busqueda.js
Si utilizas un archivo de otro programador es conveniente dejar su nombre, por cortesía pues al también le llevo su tiempo y nos ha ahorrado un tiempo a nosotros.
Es el archivo js que se incluye y controla el submit del formulario al hacer click sobre el botón
<INPUT TYPE="button" value='buscar' style="width:150px" width="150px" onClick="javascript:ValidarSubmit(document.formCriterio);">
Y asi es como se incluye un archivo js en concreto el citado
<SCRIPT LANGUAGE='JavaScript1.2' SRC='../libreriasJavascript/funciones_cuadro_busqueda.js'></SCRIPT>
Te facilito este link donde encontrarás diversos artículos sobre javascript y varios de ellos tratan sobre validar formularios
http://www.elcodigo.net/taller/autores.html
Saludos pedroche!
McAlons Multimedia Design
Muy pronto URL personal.
En construcción Tienda Virtual standard para su comercialización para webmaster, pequeñas y medianas empresas que deseen realizar negocio en internet.
Puedes ver como se está construyendo en http://www24.brinkster.com/mcalons/mmd/shop/default.asp
Si estas interesado en la misma, enviame un mail a [email protected]
Respuesta de rescue74
1
He visto tu web y sinceramente creo que está bastante bien, por lo que veo, ya debías tener algún conocimiento de asp, ya que algo has hecho en este entorno de programación, ¿no? :-)
Bueno, te respondo tu duda.
Tu campo de submitir el formulario, sustitúyelo por este:
<input type="button" name="buscarinmueble" value="buscar" onClick="buscar(document.forms[0]);">
Es parecido al tuyo, pero yo estoy más acostumbrado a utilizar este.
Dentro de la cabecera de la página html (etiquetas <head></head>) coloca este código js:
</script language="javascript">
function buscar(fr){
var continuar = true;
if (continuar && fr.categoryID.options[fr.categoryID.selectedIndex].value == "0"){
//Para poner el foco en el campo erroneo.
fr.categoryID.focus();
alert("Tiene que seleccionar una opción.");
continuar=false;
}
if (continuar && fr.inmID.options[fr.inmID.selectedIndex].value == "0"){
//... igual que para el anterior
}
//... Así el resto de list/menus correspondientes al boton
if (continuar){ //Si todo correcto
fr.submit();
}
}
</script>
Y bueno, con este código tienes solucionada tu pregunta.
Bueno, te respondo tu duda.
Tu campo de submitir el formulario, sustitúyelo por este:
<input type="button" name="buscarinmueble" value="buscar" onClick="buscar(document.forms[0]);">
Es parecido al tuyo, pero yo estoy más acostumbrado a utilizar este.
Dentro de la cabecera de la página html (etiquetas <head></head>) coloca este código js:
</script language="javascript">
function buscar(fr){
var continuar = true;
if (continuar && fr.categoryID.options[fr.categoryID.selectedIndex].value == "0"){
//Para poner el foco en el campo erroneo.
fr.categoryID.focus();
alert("Tiene que seleccionar una opción.");
continuar=false;
}
if (continuar && fr.inmID.options[fr.inmID.selectedIndex].value == "0"){
//... igual que para el anterior
}
//... Así el resto de list/menus correspondientes al boton
if (continuar){ //Si todo correcto
fr.submit();
}
}
</script>
Y bueno, con este código tienes solucionada tu pregunta.
Respuesta de newdavinci
1
La solución es sencilla, tan sólo tienes que usar un script en javascript que compruebe el valor de cada campo y en función de si se han seleccionado opciones envíe el formulario o muestre el mensaje de error:
1.-Lo primero que tienes que hacer es cambiar el botón de enviar por un botón normal, algo así como:
<input type="button" value="Enviar" name="enviar">
2.- Incluye en la definición del botón una llamada a la función que hará las comprobaciones, con lo que el botón quedará así:
<input type="button" value="Enviar" name="enviar" onclick="enviar()"></p>
3.- Incluye en cualquier parte de la página, preferiblemente antes de </HEAD> un script que haga las comprobaciones y envíe, en caso correcto, el formulario. Por si acaso, te he hecho un ejemplo:
<script language="javascript">
function enviar()
{
var textoError=''
if (document.forms[0].elements[0].value==0) {textoError+='El campo1 no puede ser nulo.\n'}
if (document.forms[0].elements[1].value==0) {textoError+='El campo2 no puede ser nulo.\n'}
if (document.forms[0].elements[2].value==0) {textoError+='El campo3 no puede ser nulo.\n'}
if (textoError)
{
alert(textoError)
return false
}
else document.forms[0].submit()
}
</script>
El ejemplo que te muestro puede resumirse así:
A.- Al pulsar el botón de evío se llama a la función enviar.
B.- La función busca el valor de los tres campos y si alguno de ellos es 0 añade un nuevo mensaje a la cadena textoError.
C.- Si la cadena textoError se queda vacía es porque todos los campos tienen un valor distinto de cero, y entonces envía el formulario.
D.- Si la cadena textoError no está vacía, es porque algún campo contiene el valor 0 y muestra los mensajes de error sin enviar el formulario.
Por último una aclaración: en el código de ejemplo he supuesto que en la página sólo existe un formulario y/o éste es el primero que aparece (por eso pone document.forms[0]...) si existieran más formularios en vez ... forms[0]... deberías poner ... forms[n]... siendo n el número de formulario contando el primero como 0.
Lo mismo puede aplicarse a ... forms[0].elements[0]... que hace referencia al primer campo del primer formulario, etc
Si algo no te ha quedado claro no dudes en preguntármelo.
1.-Lo primero que tienes que hacer es cambiar el botón de enviar por un botón normal, algo así como:
<input type="button" value="Enviar" name="enviar">
2.- Incluye en la definición del botón una llamada a la función que hará las comprobaciones, con lo que el botón quedará así:
<input type="button" value="Enviar" name="enviar" onclick="enviar()"></p>
3.- Incluye en cualquier parte de la página, preferiblemente antes de </HEAD> un script que haga las comprobaciones y envíe, en caso correcto, el formulario. Por si acaso, te he hecho un ejemplo:
<script language="javascript">
function enviar()
{
var textoError=''
if (document.forms[0].elements[0].value==0) {textoError+='El campo1 no puede ser nulo.\n'}
if (document.forms[0].elements[1].value==0) {textoError+='El campo2 no puede ser nulo.\n'}
if (document.forms[0].elements[2].value==0) {textoError+='El campo3 no puede ser nulo.\n'}
if (textoError)
{
alert(textoError)
return false
}
else document.forms[0].submit()
}
</script>
El ejemplo que te muestro puede resumirse así:
A.- Al pulsar el botón de evío se llama a la función enviar.
B.- La función busca el valor de los tres campos y si alguno de ellos es 0 añade un nuevo mensaje a la cadena textoError.
C.- Si la cadena textoError se queda vacía es porque todos los campos tienen un valor distinto de cero, y entonces envía el formulario.
D.- Si la cadena textoError no está vacía, es porque algún campo contiene el valor 0 y muestra los mensajes de error sin enviar el formulario.
Por último una aclaración: en el código de ejemplo he supuesto que en la página sólo existe un formulario y/o éste es el primero que aparece (por eso pone document.forms[0]...) si existieran más formularios en vez ... forms[0]... deberías poner ... forms[n]... siendo n el número de formulario contando el primero como 0.
Lo mismo puede aplicarse a ... forms[0].elements[0]... que hace referencia al primer campo del primer formulario, etc
Si algo no te ha quedado claro no dudes en preguntármelo.
Respuesta de unholy
1
Como estas, espero que bien, he estado vindo tu web y la verdad es que esta muy bien, te la estas currando.
Pues lo que decía, que te voy a mandar el código para que hagas lo que quieres, incluso con los mismos nombre de campo que necesitas (soy la leche ja ja), era broma.
Lo primero es que el botón tiene que dejar de ser submit, para ser button y en el onClick tiene que llamar a la función que te mando:
<script Languaje=VBSCript>
sub Comprueba()
n=document.forms[0].categoryId.selectedIndex
Category=document.forms[0].categoryId.options(n).value
n=document.forms[0].inmId.selectedIndex
inm=document.forms[0].inmId.options(n).value
n=document.forms[0].locId.selectedIndex
loc=document.forms[0].locId.options(n).value
if(category="")then
msgBox("Has de rellenar la categoria")
document.forms[0].categoryId.focus();
else if(inm="")then
msgBox("Has de rellenar el inmueble")
document.forms[0].inmId.focus();
else if(loc="")then
msgBox("Has de rellenar la localidad")
document.forms[0].locId.focus();
else
document.forms[0].submit()
end if
end sub
}
</script>
Eso es todo, espero no haberme equivocado, que programar así a pelo es jodiddillo.
Pues lo que decía, que te voy a mandar el código para que hagas lo que quieres, incluso con los mismos nombre de campo que necesitas (soy la leche ja ja), era broma.
Lo primero es que el botón tiene que dejar de ser submit, para ser button y en el onClick tiene que llamar a la función que te mando:
<script Languaje=VBSCript>
sub Comprueba()
n=document.forms[0].categoryId.selectedIndex
Category=document.forms[0].categoryId.options(n).value
n=document.forms[0].inmId.selectedIndex
inm=document.forms[0].inmId.options(n).value
n=document.forms[0].locId.selectedIndex
loc=document.forms[0].locId.options(n).value
if(category="")then
msgBox("Has de rellenar la categoria")
document.forms[0].categoryId.focus();
else if(inm="")then
msgBox("Has de rellenar el inmueble")
document.forms[0].inmId.focus();
else if(loc="")then
msgBox("Has de rellenar la localidad")
document.forms[0].locId.focus();
else
document.forms[0].submit()
end if
end sub
}
</script>
Eso es todo, espero no haberme equivocado, que programar así a pelo es jodiddillo.
Respuesta de jamsystem
1
Lo primero que debes hacer es decidir que tipo de método utilizaras para verificar el formulario, puedes hacerlo con php, lo cierto es que para colocar un mensaje debes programar en el formulario de verificación lo siguiente:
<script languaje="javascript"
<!-- Begin
function verify() {
var themessage = "Los siguientes campos tuvieron errores:\n";
if (document.forma.nombredelcampo.value=0){
themessage = themessage + "No ha seleccionado ninguna opción valida\n";
</script>
Creo que con esta información puedes verificar el formulario.
Cualquier cosa escríbeme de nuevo.
<script languaje="javascript"
<!-- Begin
function verify() {
var themessage = "Los siguientes campos tuvieron errores:\n";
if (document.forma.nombredelcampo.value=0){
themessage = themessage + "No ha seleccionado ninguna opción valida\n";
</script>
Creo que con esta información puedes verificar el formulario.
Cualquier cosa escríbeme de nuevo.
Respuesta de bfernandez
1
Aquí te mando un ejemplo de como generar un mensaje de alerta. Espero que te sirva. Saludos!
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function validar(){
if(document.forms[0].lista.value==0){
alert("Debe selecionar una opcion")
document.forms[0].lista.focus();
}else{
document.forms[0].submit();
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="form1" action="">
<select name="lista">
<option value="0">Seleccione una opcion---></option>
<option value="1">Opcion1</option>
<option value="2">Opcion2</option>
<option value="3">Opcion3</option>
</select>
<br>
<input type=button value="Enviar" onclick="validar()">
</form>
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function validar(){
if(document.forms[0].lista.value==0){
alert("Debe selecionar una opcion")
document.forms[0].lista.focus();
}else{
document.forms[0].submit();
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="form1" action="">
<select name="lista">
<option value="0">Seleccione una opcion---></option>
<option value="1">Opcion1</option>
<option value="2">Opcion2</option>
<option value="3">Opcion3</option>
</select>
<br>
<input type=button value="Enviar" onclick="validar()">
</form>
</body>
</html>
Respuesta de hnry23
1
Solo se trata de hacer un pequeño chequeo antes de hacer submit. Para eso has de tener en cuenta que ya NO debes usar un botón type="Submit", sino uno type="Button" con un onClick="javascript:my_function()", donde my_function() será una función javascript donde haremos el chequeo. Es desde esta función que haremos el submit si lo creemos correcto todo o sacaremos los alerts que quieras.
Bien, ahora solo debemos desarrollar la función que haga el chequeo de los tres SELECT.
Función ejemplo:
<<Supongamos un SELECT de nombre my_select, dentro de un FORM de nombre my_form>>
function my_function()
{
if(document.my_form.my_select.value == 0)
{
alert("¡¡¡En este caso el valor es 0, luego no podemos continuar con el submit!!!")
}
else
{
alert("¡¡¡Perfecto, ahora haremos el submit!!!");
document.my_form.submit();
}
}
*****
Espero haber podido ayudarte. En el caso de que no fuera esto lo que buscabas, please, házmelo saber y trataré de responder de nuevo.
Bien, ahora solo debemos desarrollar la función que haga el chequeo de los tres SELECT.
Función ejemplo:
<<Supongamos un SELECT de nombre my_select, dentro de un FORM de nombre my_form>>
function my_function()
{
if(document.my_form.my_select.value == 0)
{
alert("¡¡¡En este caso el valor es 0, luego no podemos continuar con el submit!!!")
}
else
{
alert("¡¡¡Perfecto, ahora haremos el submit!!!");
document.my_form.submit();
}
}
*****
Espero haber podido ayudarte. En el caso de que no fuera esto lo que buscabas, please, házmelo saber y trataré de responder de nuevo.