enlace en un boton de formularuio

alfa18 · #1 (**permalink**) 18/02/2018, 08:11

Hola amigos,
tengo un formulario que quiero que vaya a una pagina determinada segun el valor de un campo del formulario:

Código:

<head>
<script>
function f1(info){
    var provincia;
    switch(info) {
    case "gran canaria":
             provincia='gran-canaria';
             break;
    case "a coruña":
             provincia='a-coruna';
             break;
    case "illes balears":
             provincia='illes-balears';
             break;
    default:
             provincia=info;
    }
    alert(provincia);
    return provincia;
}
</script>
</head>

<body>
<form>
<input type="text"  value="" placeholder="nombre restaurante" required>
<input type="text" value=""  name="c2" placeholder="localidad" required>
<input type="submit" value="Buscar" onclick='location.href="http://yahoo.es/"+f1(document.forms[0]["c2"].value)+"/";'>
</form>

tengo problemas con el evento onclick del boton "Enviar", no me ejecuta la accion¡¡(no me lleva a la pagina dada), sin embargo si pego el codigo del evento en la consola de JS(en Chrome) me funcona perfectamente(me redirecciona a esa pagina)

¿Cual creeis que pueda ser el error por el que no me funciona el evento? No entiendo cual puede ser el error ¿alguien m,e puede echar una mano?

Gracias, saludos:D

Alexis88 · #2 (**permalink**) 18/02/2018, 11:02

Cuando el formulario no tiene definido un valor para el atributo action, el procesamiento de los datos contenidos en los campos que se encuentran dentro de este, se realiza en la misma página, recargándose la ventana.

Lo que necesitas es cancelar el envío, ya sea mediante un retorno del valor booleano false (return false) o el uso del método .preventDefault(). Una vez hecho esto, en la función puedes añadir la línea de redireccionamiento.

Puedes hacerlo trabajando inline (insertando código JavaScript en los elementos HTML, forma obsoleta de trabajar) y retornando el valor false:

Código HTML:

Ver original<form onsubmit="return f1(document.forms[0]['c2'].value)">
    <input type="text"  value="" placeholder="nombre restaurante" required>
    <input type="text" value=""  name="c2" placeholder="localidad" required>
    <input type="submit" value="Buscar" />
</form>

Código Javascript:

Ver originalfunction f1(info){
    var provincia;
 
    switch(info) {
        case "gran canaria":
             provincia='gran-canaria';
             break;
        case "a coruña":
             provincia='a-coruna';
             break;
        case "illes balears":
             provincia='illes-balears';
             break;
        default:
             provincia=info;
    }
 
    location.href = "http://es.search.yahoo.com/search?p=" + provincia;
    return false;
}

O mediante métodos que registran funciones escuchadoras de eventos (forma moderna y recomendada de trabajar):

Código HTML:

Ver original<form>
    <input type="text"  value="" placeholder="nombre restaurante" required>
    <input type="text" value=""  name="c2" placeholder="localidad" required>
    <input type="submit" value="Buscar" />
</form>

Código Javascript:

Ver originaldocument.addEventListener("submit", function(event){
    event.preventDefault();
    f1(document.forms[0]['c2'].value);
});
 
function f1(info){
    var provincia;
 
    switch(info) {
        case "gran canaria":
             provincia='gran-canaria';
             break;
        case "a coruña":
             provincia='a-coruna';
             break;
        case "illes balears":
             provincia='illes-balears';
             break;
        default:
             provincia=info;
    }
 
    location.href = "http://es.search.yahoo.com/search?p=" + provincia;
}

#3 (**permalink**) 18/02/2018, 13:26

Y por que no haces esto?

Código Javascript:

Ver originalfunction f1(opc,url){
var def = "Opc Default";
var opcs = {"a":"Opc A","b":"Opc B","c":"Opc C"};
 
var ref = "";
    if(opcs[opc] === undefined){  ref  = def; }else{ ref = opcs[opc]; }
window.location.href=url+ref;
return false;
}

opc = la opcion
url = la url

y mas generico:

Código Javascript:

Ver originalfunction f1(opcs,opc,def,url){
var ref = ""; 
    if(opcs[opc] === undefined){  ref  = def; }else{ ref = opcs[opc]; }
window.location = url+ref;
return false;
}

opcs = objeto con los datos
opc = la opcion
def = valor por defecto
url = la url

Saludos